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 (
      <div>
        <Button type="warn" onClick={this.buttonEvents.bind(this)} style={{margin:'5px'}}>
          警告
        </Button>
        <Toast icon="alert-circled" show={ show }>警告</Toast>
      </div>
    );
  }
}

ReactDOM.render((
  <Toasts />
),document.getElementById('app'));

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

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

results matching ""

    No results matching ""