[JavaScript知识库]React-(5)React中state的使用

React中state的使用

一.理解什么是 state ?

首先 我们用最通俗易懂的话来理解， 比如 每个人都有自己的状态 ， 每个人的状态 都会影响 他的行为，那么， 我们将这句话放到 react 中去理解，把人看作是 组件，组件也有自己的状态，组件的状态会影响它的页面。我们在游览各大网页时，会发现 网页上有一些数据，如个人信息 账号 以及一些新闻列表等等。 这些都是数据， 我们将这些数据放在了页面上，那么是什么驱动着页面的改变呢？ 是数据。 这时候我们只需要
将数据 放入状态 ( state ) 中 ，我们去更改状态 页面也会随之变化。

二.如何修改state ?

React强烈不建议直接修改state，究其原因可以从两方面进行阐

1. 性能问题

React提倡不可变性，通过setstate()修改state实际上是创建了一个副本用来代替原来的state，这与直接修改原数据有着本质的区别。其他框架类似angular监听一个变量的变化通过watch和deepwatch，尤其deepwatch在判断一个数据量大的变量是否变化时会消耗很多资源，导致应用性能下降。而在React中则是数据变化就产生新对象将之替代，没变化就直接返回原数据，通过判断新旧变量的引用是否一致来判断变量是否修改，这样做的效率要比前者高的多。

2. 机制

要知道setState本质是通过一个队列机制实现state更新的。
执行setState时，会将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state。
如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时对状态队列进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去。

三.代码演示修改state

export default class Hello extends Component{

    constructor(props){
      console.log("调用constructor")
       super(props);
       this.state={isHot:false};
       //解决handleClick中this指向问题
       this.handleClick = this.handleClick.bind(this);
    }
    //类中的方法默认开启了严格模式，所以handleClick中的this是underfind
    handleClick(){
       console.log(this.state.isHot);
        //获取原本的isHot值
       const ishot=this.state.isHot;
       //修改isHot值
       this.setState({isHot:!ishot})
       console.log("点击事件触发了")
    }
  render(){
    console.log("调用render")
    return <div className='Hello'>
            <h2 className='Hello_header' onClick={this.handleClick}> 今天的心情很{this.state.isHot?'愉快':'糟糕'}</h2>
          </div>
  }
}

效果展示：

四.拓展

1.刷新浏览器constructor方法调用了几次？

constructor()调用了1次

2.为什么刷新浏览器constructor和render方法调用了两次？

类中的方法默认开启了严格模式，是因为我的用例是直接通过create-react-app模式创建的，默认就是StrictMode下。StrticMode默认会执行两次render和constructor来检测你的函数有没有副作用。