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