不直接修改state
例如,此代码不会重新渲染组件:
constructor(props) {
super(props)
this.state = {
name: '',
age: 24,
exp: {
year: '',
job: 'web前端'
}
}
};
componentDidMount() {
this.setState({
name: '张三',
})
this.setState({
age: 26,
})
};
修改自身的state
setTime() {
setTimeout(() => {
this.setState({
name: '李四'
})
}, 2000)
// Correct
this.setState((state, props) => ({
age: state.age + 3
}));
};
State 与 Props 区别
除了State, 组件的Props也是和组件的UI有关的。他们之间的主要区别是:State是可变的,是组件内部维护的一组用于反映组件UI变化的状态集合;而Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。在组件状态上移的场景中,父组件正是通过子组件的Props, 传递给子组件其所需要的状态。