组件化开发-05.01-组件状态的修改——componentDidMount组件更新是异步的；setState连续调用，不保证每次调用都会更新页面；通过返回一个新的state的方式来修改原有的状态数据

组件状态的修改——componentDidMount组件更新是异步的；setState连续调用，不保证每次调用都会更新页面；通过返回一个新的state的方式来修改原有的状态数据

• 类组件中状态的变化必须使用setState，不可以直接修改
  • 状态的修改操作是异步的
  • 不建议频繁调用setState

class AboutState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 1
    }
  }
  componentDidMount () {
    // 状态的更新是异步的
    // this.setState({
    //   num: 2
    // }, () => {
    //   console.log('如果该回调函数触发了，说明数据已经完成更新')
    //   console.log(this.state.num)
    // })
    // console.log(this.state.num)
    // -----------------------------------
    // 如果setState连续调用，那么并不保证每次调用都会更新页面
    // 更新的原则：不要频繁调用setState
    // this.setState({
    //   num: this.state.num + 1
    // })
    // this.setState({
    //   num: this.state.num + 1
    // })
    // this.setState({
    //   num: this.state.num + 1
    // })
    // ---------------------------------
    this.setState((state, props) => {
      // state表示组件的内部原有数据
      // props表示父组件传递过来的数据
      // 采用这种方式修改状态的话，不要直接修改参数中的state
      // 而是要通过返回一个新的state的方式来修改原有的状态数据
      return {
        num: state.num + 2
      }
    })
  }
  render () {
    return (
      <div>
        <div>测试状态变化:{this.state.num}</div>
      </div>
    )
  }
}

实例

第一步：src下新建文件夹components，下面新建06.js

/*
  关于状态的更新问题 setState
*/
import React from 'react'

class AboutState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 1
    }
  }
  componentDidMount () {
    // 1、状态的更新是异步的
    // this.setState({
    //   num: 2
    // }, () => {
    //   console.log('如果该回调函数触发了，说明数据已经完成更新')
    //   console.log(this.state.num)
    // })
    // console.log(this.state.num)
    // -----------------------------------
    // 2、如果setState连续调用，那么并不保证每次调用都会更新页面
    // 更新的原则：不要频繁调用setState
    // this.setState({
    //   num: this.state.num + 1
    // })
    // this.setState({
    //   num: this.state.num + 1
    // })
    // this.setState({
    //   num: this.state.num + 1
    // })
    //3、 ---------------------------------
    this.setState((state, props) => {
      // state表示组件的内部原有数据
      // props表示父组件传递过来的数据
      // 采用这种方式修改状态的话，不要直接修改参数中的state
      // 而是要通过返回一个新的state的方式来修改原有的状态数据
      return {
        num: state.num + 2
      }
    })
  }
  render () {
    return (
      <div>
        <div>测试状态变化:{this.state.num}</div>
      </div>
    )
  }
}

export default AboutState

第二步：App.js中进行引入

import React from 'react';
import './App.css';
import AboutState from './component/06-关于状态的更新问题'

function App () {
  return (
    <div>
      <AboutState msg='hello'/>
    </div>
  )
}

export default App;

npm run start打开界面，显示