react 随笔1

------------------------------------------------
http://www.css88.com/react/
17-08-02 学习来源

------------------------------------------------
虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操做的仅仅是Diff部分，于是能达到提升性能的目的。
一个简单的组件
React 组件实现一个 render() 方法，它接收输入数据并返回显示的内容。此示例使用相似XML的语法，称为 JSX 。输入数据能够经过 this.props 传入组件，被 render() 访问。
1）获取属性的值用的是this.props.属性名
2）建立的组件名称首字母必须大写。
3）为元素添加css的class时，要用className。
4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

有状态的组件
除了获取输入数据（经过 this.props 访问）以外，组件能够维护内部 state(状态) 数据（经过 this.state 访问）。当组件的 state(状态) 数据发生变化时，渲染标记将经过调用 render() 来从新更新。
当用户点击组件，致使状态变化，this.setState 方法就修改状态值，每次修改之后，自动调用 this.render 方法，再次渲染组件。
这里值得注意的几点以下：
1）getInitialState函数必须有返回值，能够是NULL或者一个对象。
2）访问state的方法是this.state.属性名。
3）变量用{}包裹，不须要再加双引号。

组件的生命周期
组件的生命周期分红三个状态：
Mounting：已插入真实 DOM
Updating：正在被从新渲染
Unmounting：已移出真实 DOM
React 为每一个状态都提供了两种处理函数，will 函数在进入状态以前调用，did 函数在进入状态以后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否从新渲染时调用

组件的嵌套

ReactJS小结
关于ReactJS今天就先学习到这里了，下面来总结一下，主要有如下几点：
一、ReactJs是基于组件化的开发，因此最终你的页面应该是由若干个小组件组成的大组件。
二、能够经过属性，将值传递到组件内部，同理也能够经过属性将内部的结果传递到父级组件(留给你们研究)；要对某些值的变化作DOM操做的，要把这些值放到state中。
三、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
四、组件名称首字母必须大写。
五、变量名用{}包裹，且不能加双引号。