React 组件状态 State

初始化状态 & 读取状态

import React from "react"
class Cpn extends React.Component {
  state = {
    num: 10
  }
  render() {
    return (
      <div>{this.state.num}</div>
    )
  }
}
export default Cpn

修改状态

import React from "react"
class Cpn extends React.Component {
  state = {
    num: 10
  }
  add = () => {
    this.setState({
      num: this.state.num + 1
    })
  }
  render() {
    return (
      <div>
        <div>{this.state.num}</div>
        <button onClick={this.add}>点击加一</button>
      </div>
    )
  }
}
export default Cpn

基于当前状态创建新值

this.setState({
    count: this.state.count + 1
    list: [...this.state.list, 4],
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
})

setState更多用法

1. setState可以传入一个回调函数

好处一: 可以在回调函数中编写新的state的逻辑

好处二: 当前的回调函数会将之前的state和props传递进来

   this.setState((state, props) => {
      console.log(this.state.message, this.props)
      return {
        message: "修改后的内容"
      }
    })

        2. setState在React的事件处理中是一个异步调用

如果希望在数据更新之后(数据合并), 获取到对应的结果执行一些逻辑代码，那么可以在setState中传入第二个参数: callback

      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            message: "hello",
          };
        }
        handleClick = () => {
          this.setState({ message: "你好啊, 李银河" });
          console.log(this.state.message); // hello
        };

        render() {
          return <div onClick={this.handleClick}>点击执行</div>;
        }
      }

 为什么setState设计为异步呢？

        如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的。最好的办法应该是获取到多个更新，之后进行批量更新； 如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步。state和props不能保持一致性，会在开发中产生很多的问题。

 如何可以获取到更新后的值呢？

setState的回调

      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            message: "hello",
          };
        }
        handleClick = () => {
          this.setState({ message: "修改之后的内容" }, () => {
            console.log(this.state.message);  // 修改之后的内容
          });
          console.log(this.state.message); // hello
        };

        render() {
          return <div onClick={this.handleClick}>点击执行</div>;
        }
      }