React学习笔记-state(四)

概念

state的主要作用是用于组件保存控制以及修改自己的状态它算是组件的私有属性不可通过外部访问和修改只能通过组件内部的this.setState来修改修改state属性会导致组件的重新渲染

注意:

如果直接通过this.state.xxx的方式修改，组件不会重新渲染，但是值会被修改。并且这也是不规范的行为

state定义及使用

import React from "react";

export default class LearnState extends React.Component {

  // 一个组件只会定义一个state对象 直接定义在组件内部
  state = {
    name : 'bob'
  }

  render () {
    console.log('setState被修改, render重新渲染')
    return (
      <div>
        {/* 使用state值 */}
        <div>{this.state.name}</div>
      </div>
    )
  }
}

setState方法及其异步问题

使用setState方法会调用render方法重新渲染页面

import React from "react";

export default class LearnState extends React.Component {

  // 存在异步问题
  state = {
    num : 1
  }
  addNum () {
   // 每次调用setState修改值都会调用render重新渲染页面
    this.setState ({
      num : this.state.num + 1
    })
    // 这里打印在控制台的永远比页面渲染的小1 因为setState里面代码是异步的
    console.log(this.state.num)
  }

  render () {
    console.log('setState被修改, render重新渲染')
    return (
      <div>
        {/* 存在异步问题 数据和页面渲染不一样 */}
        <div>{this.state.num}</div>
        <button onClick={() => this.addNum()}>+1异步</button>
      </div>
    )
  }
}

解决异步问题

import React from "react";

export default class LearnState extends React.Component {

  // 异步问题得到解决
  state = {
    num : 1
  }
  addNum () {
    this.setState ({
      num : this.state.num + 1
      // setState可以传入第二个参数回调函数 将打印语句写到微任务中(即异步体内)
    }, () => {console.log(this.state.num)})
  }

  render () {
    console.log('setState被修改, render重新渲染')
    return (
      <div>
        {/* 解决异步问题 */}
        <div>{this.state.num}</div>
        <button onClick={() => this.addNum()}>+1异步</button>
      </div>
    )
  }
}

state中复杂类型数据修改(不推荐)

import React from "react";

export default class LearnState extends React.Component {

  // 以下方法在类组件中可以使用 在函数组件中不推荐 不规范写法
  state = {
    info : {name : 'bob', age : 18}
  }
  changeName (event) {
    // state的值不应该被直接修改
    this.state.info.name = event.target.value;
    // 渲染视图
    this.setState({
      info : this.state.info
    })
  }

  render () {
    console.log('setState被修改, render重新渲染')
    return (
      <div>
        {/* 此方法在函数组件中不推荐 */}
        <div>{this.state.info.name + '-->' + this.state.info.age}</div>
        <input type="text" onChange={(event) => this.changeName(event)}/>修改对象name值
      </div>
    )
  }
}

state中复杂类型数据修改(推荐)

import React from "react";

export default class LearnState extends React.Component {
  // state中存复杂数据类型 对其进行修改 以下方法在类组件和函数组件都推荐
  state = {
    arr : [1, 2, 3],
    info : {name : 'bob', age : 18}
  }
  addArr () {
    this.setState({
      // 将原数组扩展 和 新数据拼接成新数组给arr
      arr : [
      ...this.state.arr,
      this.state.arr.length + 1
      ]
    })
  }
  changeName (event) {
    // console.log(event.target.value)
    this.setState({
      info : {
        // 将原对象扩展 和 新数据拼接成新对象给info
        ...this.state.info,
        name : event.target.value
      }
    })
  }

  render () {
    console.log('setState被修改, render重新渲染')
    return (
      <div>
        {/* 此方法在类组件和函数组件中都推荐 */}
        <div>{this.state.arr}</div>
        <button onClick={() => this.addArr()}>修改数组</button>
        <div>{this.state.info.name + ' --> ' + this.state.info.age}</div>
        <input type="text" onChange={(event) => this.changeName(event)}/>修改对象name值 */}

        {/* 对象不允许作为参数直接使用 会报错
        <div>{this.state.info}</div> */}
      </div>
    )
  }
}