react学习-状态

通过state控制页面元素的变化,类似于vue中的data

setState会引发视图的重绘

  1. 如何在项目中添加state

    在类中添加一个constructor函数,然后给状态赋值。注意 super()必须执行,可以带参数也可以不带,参数为父组件传下来的props。

    export default class LifeCycleDemo extends React.Component {
     constructor (props) {
       super(props)
       this.state = {
         count: '我是组件状态'
      }
    }
    ...
    }
  2. 修改状态: 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
    }))

    注意:参数传函数的方式只能用在 componentWillMountcomponentDidMount钩子中。且回调函数的两个参数是确定的

  3. this.setState()同步和异步的执行的问题

    在可控的情况下异步执行,在不可控的情况下同步执行。比如发起异步请求,通过请求返回的数据改变状态,我们不知道请求什么时候完成,这时就得请求完成改变状态后就开始对比重新渲染DOM树;但像有些情况,比如用定时器更改状态值,在知道状态什么时候会改变,就会等所有的改变完成后才对比渲染页面,这样就减少因此多次显然页面造成的性能问题

  4. 在可控的情况下,将异步执行的setState改成同步执行

  5. 状态提升

    将子组件中都用到的状态提升到父组件,由父组件统一管理

    组件中的状态共用形式:父传子(props)、子传父(子组件触发父组件的自定义事件,然后父组件自己改变状态)、两个组件共用相同的父组件或者子组件

上一篇:K210基础实验—定时器


下一篇:LeetCode 连续数组