相关reactjs的相关知识

一、组件的属性：

var Greet = React.createClass({        render: function() {          return <h1>Hello {this.props.name}</h1>;        }      });      React.render(        <Greet name="Jack" />,        document.getElementById('container')      );

使用React.createClass来生成一个组件；

注意的点：

1、创建组件时，组件的首字母必须大写；

2、获取组件的值时，使用this.props.属性名（id,name）;

3、为元素添加css的class时，需要将class改为className;

4、组件的样式设置时（style）,写法：style={{width:this.state.witdh}}；

二、组件的状态：

var InputState = React.createClass({        getInitialState: function() {          return {enable: false};        },        handleClick: function(event) {          this.setState({enable: !this.state.enable});        },        render: function() {          return (            <p>               <input type="text" disabled={this.state.enable} />               <button onClick={this.handleClick}>Change State</button>            </p>          );        }      });      React.render(        <InputState />,        document.getElementById('container')      );

这里，我们又使用到了一个方法getInitialState，这个函数在组件初始化的时候执行，
必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，
这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。
我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。

原理分析：
当用户点击组件，导致状态变化，this.setState方法就修改状态值，
每次修改以后，自动调用this.render方法，再次渲染组件。
这里值得注意的几点如下：
getInitialState函数必须有返回值，可以是NULL或者一个对象。
访问state的方法是this.state.属性名。
变量用{}包裹，不需要再加双引号。

三、组件的生命周期：

组件的生命周期分成三个状态：
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, objectnextState)：组件判断是否重新渲染时调用。

eg:

var Hello = React.createClass({        getInitialState: function () {          return {            opacity: 1.0          };        },        componentDidMount: function () {          this.timer = setInterval(function () {            var opacity = this.state.opacity;            opacity -= .05;            if (opacity < 0.1) {              opacity = 1.0;            }            this.setState({              opacity: opacity            });          }.bind(this), 100);        },        render: function () {          return (            <div style={{opacity: this.state.opacity}}>              Hello {this.props.name}            </div>          );        }      });      React.render(        <Hello name="world"/>,        document.body      )

上面代码在hello组件加载以后，通过 componentDidMount方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

四、组件的嵌套：

var Search = React.createClass({        render: function() {          return (            <div>               {this.props.searchType}:<input type="text" />               <button>Search</button>            </div>          );        }      }); var Page = React.createClass({     render: function() {        return (          <div>               <h1>Welcome!</h1>               <Search searchType="Title" />               <Search  searchType="Content" />          </div>        );      } }); React.render(    <Page />,        document.getElementById('container')   )

这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属searchType传入值。

总结：

1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。

3、为组件添加外部CSS样式时，类名应该写成className而不是class；添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

4、组件名称首字母必须大写。

5、变量名用{}包裹，且不能加双引号。

参考资料：http://www.ruanyifeng.com/blog/2015/03/react.html

二、组件的状态：