react.js笔记

 

　　　　　　React入门教程：

　　　　　　https://hulufei.gitbooks.io/react-tutorial/content/component.html

　　　　　　https://segmentfault.com/a/1190000002647357

　　　　　    http://www.cocoachina.com/webapp/20150721/12692.html

 

 　　　　　　React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

　　　　　　1:仅仅只要表达出你的应用程序在任一个时间点应该长的样子，而后当底层的数据变了，React 会自动处理全部用户界面的更新。

　　　　　　2:数据变化后，React 概念上与点击“刷新”按钮相似，但仅会更新变化的部分。

 　　　　

　　　　　JSX

　　　　　　JSX两个花括号：{}渲染成动态值，花括号指明了一个JavaScript上下文环境——或括号内的任何东西都会进行求值，获得的结果会被渲染为标签中的若干节点。

　　　　　　表达式写在{}中。

　　　　　　对于简单值，好比文本或者数字，你能够直接引用对应的变量。

 

　　　　Virtual DOM

　　　　　　当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法从新渲染整个组件的 UI。

　　　　　　固然若是真的这样大面积的操做 DOM，性能会是一个很大的问题，因此 React 实现了一个Virtual DOM，

　　　　　　组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要从新渲染组件的时候，会经过 diff 寻找到要变动的 　　　　　

　　　　　　DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，因此实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，因此性能会比原生 DOM 快不少。

 

　　　　　组件

　　　　　　对于一个组件来说，render方法是惟一一个必需的方法。render方法须要知足下面几点：

1. 1. 　只能经过 this.props 和 this.state 访问数据（不能修改）

   2. 　能够返回 null,false 或者任何React组件

   3. 　只能出现一个顶级组件，不能返回一组元素

   4. 　不能改变组件的状态

   5. 　不能修改DOM的输出

　　　　　　render方法返回的结果并非真正的DOM元素，而是一个虚拟的表现，相似于一个DOM tree的结构的对象。react之因此效率高，就是这个缘由。

　　　　　　多看看该文档，顺便提升英语阅读能力，哈哈 https://reactjs.org/docs/thinking-in-react.html

 

　　　　　　React.createClass 方法就用于生成一个组件类。

　　　　　　

 

　　　　　　1）获取属性的值用的是this.props.属性名

　　　　　　2）建立的组件名称首字母必须大写。

　　　　　　3）为元素添加css的class时，要用className。

　　　　　　4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

 

 

　　　　　组件有两个核心概念：

• • • props
    • state

　　　　　　一个组件就是经过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

　　　　　　注意：组件生成的 HTML 结构只能有一个单一的根节点。

 

　　　　props

　　　　　　props 就是组件的属性，由外部经过 JSX 属性传入设置，

　　　　　　一旦初始设置完成，就能够认为 this.props 是不可更改的，

　　　　　　因此不要轻易更改设置 this.props 里面的值（虽然对于一个 JS 对象你能够作任何事）。this.props就是组件的属性集合。

　　　　state

　　　　　　state 是组件的当前状态，能够把组件简单当作一个“状态机”，根据状态 state 呈现不一样的 UI 展现。

　　　　　　一旦状态（数据）更改，组件就会自动调用 render 从新渲染 UI，这个更改的动做会经过 this.setState方法来触发。

 

　　　　　　getInitialState是用来初始化state，handleClick是用来处理咱们点击事件的。

　　　　　　经过this.state.属性名来访问属性值，这里咱们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。

　　　　　　咱们声明handleClick方法，来绑定到button上面，实现改变state.enable的值，代码以下：

　　　　　　

　　　　　　

 

　　　　　　在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。

　　　　　　一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。

实例化

当组件在客户端被实例化，第一次被建立时，如下方法依次被调用：

一、getDefaultProps
二、getInitialState   方法用于定义初始状态，也就是一个对象，这个对象能够经过 this.state 属性读取。
三、componentWillMount
四、render
五、componentDidMount

当组件在服务端被实例化，首次被建立时，如下方法依次被调用：

一、getDefaultProps
二、getInitialState
三、componentWillMount
四、render

componentDidMount 不会在服务端被渲染的过程当中调用。

 

存在期

此时组件已经渲染好而且用户能够与它进行交互，好比鼠标点击，手指点按，或者其它的一些事件，致使应用状态的改变，你将会看到下面的方法依次被调用

一、componentWillReceiveProps
二、shouldComponentUpdate
三、componentWillUpdate
四、render
五、componentDidUpdate

 

销毁时

componentWillUnmount

每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成全部的清理和销毁工做，在 componentDidMount 中添加的任务都须要再该方法中撤销，如建立的定时器或事件监听器。

当再次装载组件时，如下方法会被依次调用：

一、getInitialState
二、componentWillMount
三、render
四、componentDidMount

 

下图为React组件四条更新路径地总结：

测试例子原文地址：http://www.jianshu.com/p/4784216b8194