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的比对等一系列的流程,在这中间你需要优化的点就比较多了。