相关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

二、组件的状态：