react学习-状态

标签：赋值   相同   批量修改   必须   comment   统一   方式   star   rgba   

通过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
   }))

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

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

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

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

5. 状态提升

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

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

react学习-状态

标签：赋值   相同   批量修改   必须   comment   统一   方式   star   rgba   

原文地址：https://www.cnblogs.com/lovlyGir/p/14906356.html