相关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方法，再次渲染组件。

这里值得注意的几点如下：

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, 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

二、组件的状态：