react组件浅谈

组件属性

props

组件的属性，主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。当外部组件主动传入新的 props可进行修改

state

组件当前的状态，根据state的值呈现UI，当数据发生改变的时候通过render进行渲染，用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，组件自身通过this.setState进行触发修改，而外部不能访问也不能修改

无状态组件

<script type="text/babel">

    var HelloWorld =(props)=>{
        return <div>{props.name}</div>;
    }

    ReactDOM.render(
        <HelloWorld name="Hello world !"/>,
        document.getElementById('grid')
    );
</script>

优点
语法简洁
占用内存小，扩展性好
缺点
无生命周期，this变量为undefine不能使用

创建组件类

组件类名第一个字母应大写，并且只能包含一个顶层标签

React.createClass

<script type="text/babel">
    var LikeButton = React.createClass({
        getInitialState: function() {
            return {number: 0};
        },
        handleClickAdd: function() {
            var number = this.state.number;
            this.setState({number:number+1});
        },
        render: function() {

            return (
                  <div >
                        <p>{this.state.number}</p>
                      <input type="button" value="+" onClick={this.handleClickAdd}/>
                  </div>
            );
        }
    });
    ReactDOM.render(
            <LikeButton />,
        document.getElementById('example')
    );
</script>

对于状态的处理使用getInitialState函数进行设置初始值
使用React.createClass会自动绑定this

extends React.Component

<script type="text/babel">
       class Hello extends React.Component{
           constructor(props){
               super(props);
               this.state={Message:"Welcome World !"};
               this.Attention=this.Attention.bind(this);

           }
           Attention(){
               this.setState({Message:"hello world ！"});
           }
           render(){
              return(
                  <div>
                      <p>{this.state.Message}</p>
                      <input type="button" value="change" onClick={this.Attention}/>
                  </div>
              );
           }
       }
       ReactDOM.render(
           <Hello/>,
           document.getElementById('example')
       );
   </script>

extends React.Component 中this需要自己手动绑定，通过es6的bind进行绑定，
在构造函数中绑定：

constructor(props){
                super(props);
                this.state={Message:"Welcome World !"};
                this.Attention=this.Attention.bind(this);

            }

在render中绑定:

 render(){
               return(
                   <div>
                       <p>{this.state.Message}</p>
                       <input type="button" value="change" onClick={this.Attention.bind(this)}/>
                   </div>
               );

舍弃了getInitailState函数

最后
- 组件尽可能地少状态使得组件逻辑就越容易维护。
- 当更改这个状态（数据）需要更新组件 UI 的就可以认为是 state，
下面这些可以认为不是状态：
可计算的数据(比如一个数组的长度)和 props 重复的数据(除非这个数据是要做变更的)