setState更新状态的2种写法

最新推荐文章于 2024-04-18 04:45:12 发布

0yizhiyang

最新推荐文章于 2024-04-18 04:45:12 发布

阅读量233

点赞数

分类专栏： React 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/m0_58190023/article/details/128941232

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章详细介绍了React中setState方法的作用，用于更新组件的状态并触发重新渲染。setState可以采用对象形式或函数形式，其中函数形式在状态依赖于先前状态时更为适用。当状态更新后，界面的更新是异步的，若需在更新后获取最新状态，应使用回调函数。文章提供了示例代码以演示如何使用这两种形式的setState，并提出了使用原则。

摘要由CSDN通过智能技术生成

1. 为什么要是用 setState

当我们希望通过点击一个按钮从而改变一个文本时，就需要使用到 setState方法
当我们调用setState时，会重新执行render函数，根据最新的State来创建ReactElement对象；然后再根据最新的ReactElement对象，对DOM进行修改
setState方法是从Component中继承过来的

在这里插入图片描述

2. 对象式的setState

语法：setState(stateChange, [callback])
1. stateChange为状态改变对象(该对象可以体现出状态的更改)
2. callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

案例：点击加1进行说明

App组件

import React, { Component } from 'react'
import Demo from './components/Demo'

export default class App extends Component {
  render() {
    return (
      <div>
        <Demo/>
      </div>
    )
  }
}

Demo组件

import React, { Component } from 'react'

export default class Demo extends Component {
  state = { count: 0 }
  add = () => {
    // 1. 获取原来的count值
    const { count } = this.state

    // 2. 更新状态
    this.setState({
      count: count + 1
    })
    console.log(this.state.count);
  }

  render() {
    return (
      <div>
        <h1>当前和为：{this.state.count}</h1>
        <button onClick={this.add}>点我加1</button>
      </div>
    )
  }
}

在这里插入图片描述

页面为1，状态是0；页面为2，状态是1
因为setState是一个同步的方法，但是setState引起React后续更新状态的动作是异步的

如果想在更新完状态后拿到该状态，应该在回调中执行

  add = () => {
    //1.获取原来的count值
    const { count } = this.state
    //2.更新状态
    this.setState({ count: count + 1 }, () => {
      console.log(this.state.count);
    })
  }

在这里插入图片描述

3. 函数式的setState

语法： setState(updater, [callback])
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props。
3.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
App组件

export default class App extends Component {
  render() {
    return (
      <div>
        <Demo x={100} />
      </div>
    )
  }
}

Demo组件

  add = () => {
    // 函数式的setState
    this.setState((state, props) => {
      console.log(state, props);
      return {count:state.count+1}
    })
  }

在这里插入图片描述

简写

    // 简写
    this.setState(state => ({count:state.count+1}))

4. 总结

1.对象式的setState是函数式的setState的简写方式(语法糖)
2.使用原则：
	(1).如果新状态不依赖于原状态 ===> 使用对象方式
	(2).如果新状态依赖于原状态 ===> 使用函数方式
	(3).如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数读取