和我一起实战 react 之 state

state 属性与 props 属性有着相同的特点，都是做为属性传入组件，唯一的区别在于 props 一般用于静态属性，即不修改之数据，而 state 正好相反。

例子：

var Icon = Kodo.Icon;
var Button = Kodo.Button;
var Toast = Kodo.Toast;

class Toasts extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      show: false
    };
    this.showToast = null;
  }

  controlToast (){
    const show = this.state.show ? false : true;
    this.setState({
      show: show
    });
  }

  buttonEvents (e){
    this.showToast = setTimeout(()=>{
      this.controlToast();
    },2000);
    this.controlToast();
  }

  render (){
    const { show } = this.state;

    return (
      

        
          警告
        
        警告
      
    );
  }
}

ReactDOM.render((
  
),document.getElementById('app'));

它的东西不多，在组件类中，主要在constructor中初始化，使用setState方法来设置即可。

但是在优化中，你一设置state将会引发React内部调用render方法进行重新“渲染”，感觉上是。不过不要紧，在“渲染”的过程中，就会过度diff的比对等一系列的流程，在这中间你需要优化的点就比较多了。