通过state控制页面元素的变化,类似于vue中的data
setState会引发视图的重绘
-
如何在项目中添加state
在类中添加一个constructor函数,然后给状态赋值。注意 super()必须执行,可以带参数也可以不带,参数为父组件传下来的props。
export default class LifeCycleDemo extends React.Component {
constructor (props) {
super(props)
this.state = {
count: '我是组件状态'
}
}
...
} -
修改状态: this.setState()
-
通过
this.state.data= 'name'
的方式给state赋值只能出现在constructor函数中
this.setState({
count: '我修改了组件状态'
})-
当有多个状态批量修改的时候,建议在setState()传入函数。因为他们值得改变是异步的,你不能依赖他们的值得到下counter的值
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
})
// Correct 也可以不用箭头函数。函数接收两个参数: 未更改前的状态, 第二个参数是父组件传进来的props
this.setState((state, props) => ({
counter: state.counter + props.increment
}))注意:参数传函数的方式只能用在
componentWillMount
和componentDidMount
钩子中。且回调函数的两个参数是确定的 -
-
this.setState()同步和异步的执行的问题
在可控的情况下异步执行,在不可控的情况下同步执行。比如发起异步请求,通过请求返回的数据改变状态,我们不知道请求什么时候完成,这时就得请求完成改变状态后就开始对比重新渲染DOM树;但像有些情况,比如用定时器更改状态值,在知道状态什么时候会改变,就会等所有的改变完成后才对比渲染页面,这样就减少因此多次显然页面造成的性能问题
-
在可控的情况下,将异步执行的setState改成同步执行
-
状态提升
将子组件中都用到的状态提升到父组件,由父组件统一管理
组件中的状态共用形式:父传子(props)、子传父(子组件触发父组件的自定义事件,然后父组件自己改变状态)、两个组件共用相同的父组件或者子组件