React的State和setState

于 2024-06-21 23:15:25 发布
阅读量822 收藏 28
点赞数 18
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45215308/article/details/139871756
版权

如何确地使用 State

  1. 不要直接修改 State.
  2. 修改State应该使用 setState():
  3. 构造函数是唯一可以给 this.state 赋值的地方

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件

我们可以在我们的自定义组件中添加私有的State
jcode

class Clock extends React.Component {
  constructor(props) {   
      super(props);    
      this.state = {date: new Date()}; 
      }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

那我们如果要更新State要怎么去更新呢？

答案就是setState，而且必须使用setState。

为什么必须使用setState呢？

在开发中我们并不能直接通过修改state的值来让界面发生更新。因为我们修改了state之后，是希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化。React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；所以我们必须通过setState来告知React数据已经发生了变化。React才会更新我们对应的数据以及更新页面的渲染。

那你可能会问:为什么我们在组件中并没有实现setState的方法，为什么可以调用呢？

原因很简单，setState方法是从Component中继承过来的。

关于setState的源码截图：

image.png

setState的更新是异步的！

异步的情况

我们做个实验，我们在更新完的函数里面直接console.log我们的state的值。可以发现我们的setState是异步的

代码：

jcode

import React, { useState, useCallback } from 'react';
import ReactDom from 'react-dom';

class Test extends React.Component {
  constructor(props) {   
      super(props);    
      this.state = {message:"我是初始的State"  }; 
      this.handleClick = this.handleClick.bind(this)
      }
      

     handleClick(){
       this.setState({message:"我是更新后的结果" },);
       console.log(this.state.message)
     } 
     
      
  render() {
    return (
      <button onClick={this.handleClick}>更新</button>
    );
  }
}
ReactDom.render(<Test />, document.getElementById('app'));

点击按钮之后的打印结果，

image.png

我们可以很明显的发现打印出来的值仍然是旧值，未修改前的值。所以虽然我们setState修改了我们的State值，迪但是在代码运作中，他并不是立即同步去进行修改的。

为什么setState设计为异步呢？

  • setState设计为异步，可以显著的提升性能。

    • 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的。
    • 最好的办法应该是获取到多个更新，之后进行批量更新。

  • 如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步。

    • state和props不能保持一致性，会在开发中产生很多的问题。

github上也有很多讨论，React核心成员（Redux的作者）Dan Abramov也有对应的回复GitHub回应链接这里就不细究了。

如何获取异步的结果

方式一：setState的回调

  • setState接受两个参数：第二个参数是一个回调函数，这个回调函数会在更新后会执行；
  • 格式如下：setState(partialState, callback)

jcode

import React, { useState, useCallback } from 'react';
import ReactDom from 'react-dom';

class Test extends React.Component {
  constructor(props) {   
      super(props);    
      this.state = {message:"我是初始的State"  }; 
      this.handleClick = this.handleClick.bind(this)
      }
      
     handleClick(){
       this.setState({message:"我是更新后的结果" },() =>{
           //拿到的是更新后的值
          console.log(this.state.message)
       });
       //拿到的是更新前的值
       console.log(this.state.message)
     } 
     
  render() {
    return (
      <button onClick={this.handleClick}>更新</button>
    );
  }
}

ReactDom.render(<Test />, document.getElementById('app'));

点击按钮之后的打印结果：

image.png

可以看见我们拿到的值是最新的值

方式二： componentDidUpdate()生命周期函数

jcode

import React, { useState, useCallback } from 'react';
import ReactDom from 'react-dom';

class Test extends React.Component {
  constructor(props) {   
      super(props);    
      this.state = {message:"我是初始的State"  }; 
      this.handleClick = this.handleClick.bind(this)
      }
      
     handleClick(){
       this.setState({message:"我是更新后的结果" });
     } 

     componentDidUpdate(){
       console.log(this.state.message)
     }
      
  render() {
    return (
      <button onClick={this.handleClick}>更新</button>
    );
  }
}

ReactDom.render(<Test />, document.getElementById('app'));

点击按钮之后的打印结果：

image.png

可以看见我们拿到的值是最新的值

方式三：箭头函数

因为 this.props 和 this.state 可能会异步更新，所以我们不能依赖他们的值来更新下一个状态。可能会出现bug

那如果我们一定要同时使用this.props 和 this.state来更新我们的数据怎么办呢？

可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 作为第二个参数

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }

  handleClick = () => {
    this.setState((prevState, props) => {
      return {
        counter: prevState.counter + props.increment
      };
    });
  };

  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

非异步的情况

setState一定是异步吗？

其实分成两种情况：

  1. 在组件生命周期或React合成事件中，setState是异步
  2. 在setTimeout或者原生dom事件中，setState是同步

在setTimeout中更新

我们可以做个试验，在setTimeout里面进行更新，更新完之后直接打印我们的state值。可以看见我们的setState是同步的

import React, { useState, useCallback } from 'react';
import ReactDom from 'react-dom';

class Test extends React.Component {
  constructor(props) {   
      super(props);    
      this.state = {message:"我是初始的State"  }; 
      this.handleClick = this.handleClick.bind(this)
      }
    
     handleClick(){
       setTimeout(() =>{
         this.setState({
           message:"我是更新后的结果"
           })
          // 更新后里面打印结果
            console.log(this.state.message)
       },0)
     }

  render() {
    return (
      <button onClick={this.handleClick}>更新</button>
    );
  }
}

ReactDom.render(<Test />, document.getElementById('app'));

点击按钮之后的打印结果：

image.png

可以看见我们拿到的值是最新的值

在原生DOM事件中更新

我们可以做个试验，在原生DOM事件中进行更新，更新完之后直接打印我们的state值。可以看见我们的setState是同步的

componentDidMount(){
  const btnEl =document.getElementById("btn");
  btnEl.addEventListener('click',() =>{
    this.setState({
      message:"我是更新后的结果"
    })
    console.loh(this.state.message)
  })
}

点击按钮之后的打印结果：

image.png

可以看见我们拿到的是最新的值而且是同步更新的

State 的更新会被合并

在 React 中，setState() 的更新操作可能会被合并。当你多次调用 setState() 时，React 可能会将多个更新操作合并为单个更新，以提高性能。

      componentDidMount() {
        fetchPosts().then(response => {
          this.setState({
            posts: response.posts      });
        });

        fetchComments().then(response => {
          this.setState({
            comments: response.comments      });
        });
      }

当我们的posts被更新之后comments还是旧的值，comments在更新完成后两个值才是最新的

注意: React状态更新的合并是基于浅合并（shallow merge）的方式。如果状态对象中包含嵌套的对象或数组，并且你希望进行深层次的合并，需要自行处理合并逻辑。

什么是浅合并？

首先先给大家用代码介绍什么是浅合并

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      person: {
        name: 'John',
        age: 25
      }
    };
  }

  handleClick = () => {
    this.setState({
      person: {
        name: 'Jane'
      }
    });
  };

  render() {
    return (
      <div>
        <p>Name: {this.state.person.name}</p>
        <p>Age: {this.state.person.age}</p>
        <button onClick={this.handleClick}>Update</button>
      </div>
    );
  }
}

上述示例中，我们的状态对象 person 包含了 name 和 age 属性。当点击按钮时，我们调用 setState() 更新状态中 person 对象的 name 属性。

由于状态更新是基于浅合并的方式，React 会用新的 person 对象替换当前状态中的 person 对象，导致 age 属性丢失。因此，在重新渲染时，person 对象只包含 name 属性。

如何进行深层次的合并？

如果你希望进行深层次的合并，需要自行处理合并逻辑。可以使用深拷贝方法（如 Object.assign()、spread 运算符或第三方库）来创建一个新的深层次对象，并将其与当前状态进行合并。

代码示例：

import React from 'react';
//要使用 cloneDeep()，你需要安装 lodash 库并导入相应的方法。
import cloneDeep from 'lodash/cloneDeep';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      person: {
        name: 'John',
        age: 25
      }
    };
  }

  handleClick = () => {
    const updatedPerson = cloneDeep(this.state.person);
    updatedPerson.name = 'Jane';

    this.setState({
      person: updatedPerson
    });
  };

  render() {
    return (
      <div>
        <p>Name: {this.state.person.name}</p>
        <p>Age: {this.state.person.age}</p>
        <button onClick={this.handleClick}>Update</button>
      </div>
    );
  }
}

在上述示例中，我们使用 cloneDeep() 方法从当前状态中创建了一个深层次的副本 updatedPerson，然后修改了副本的 name 属性。最后，我们使用新的副本来更新状态中的 person 对象，实现了深层次的合并。

React要求我们遵从“数据向下流动规则”

  • 组件间的state都是独立的互不干扰的，他们之间的状态都是互不知晓的

  • 我们的父组件的数据更新可以影响我的的子组件，但是子组件的数据更新不能往上传给父组件，并且不能影响父组件。

  • 组件可以选择把它的 state 作为 props 向下传递到它的子组件中，但是组件本身无法知道它是来自于父组件的state还是props

我们如何判断该数据是否应该放入state

通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：

  • 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
  • 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
  • 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。
zayyo
关注
React中setState/useState的对比分析
weixin_45549481的博客
04-04 625
React中setState/useState的对比分析，包括同步异步问题、如何使用setState/useState的最新的值、如何使用setState/useState 连续设置两次的分析
React中的setState更新state是同步还是异步的？
Always-Learning
07-15 955
问题引入 React中的setState是用来更新状态的重要工具，但是setState是同步的还是异步的，需要我们进行一定的探讨，接下来让我们好好研究研究。 使用setState的两种形式 函数形式的setState test1 = () => { // 函数形式的setState,函数形式的setState能够接收到两个参数，一个是state，另一个是props this.setState(state => ({count: state.count +
react 玩转state和setState
秋来九月八
07-01 685
前言 react的组件分为两种，函数式组件和类式组件，函数式组件现在可以有自己的状态，通过useState hook的方式，但没有state，类式组件才有state。 如果你想学习函数式组件如何管理自己的状态， 请前往 https://blog.csdn.net/glorydx/article/details/105676697 class组件state状态初始化 初始化state指的是组件挂载时，在没有用户交互的情况下，state保存的值。 两种初始化state的方式 开发中实际使用的一种方式 impor
React: state和setState理解
Haines
04-23 1283
问题引入： 我们改变了isHot的值，值确实变了，但是视图没更新 解决： React中规定：state状态不可以直接更改，要借助内置的api去更改，即：setState方法 即下面的这种方式： 问题：setState是替代还是合并？ --- 答案是合并 问题：constructor调用几次？render函数调用几次？changeWeather调用几次？ 答案：constructor是1次，即初始化的那次； render是1+n次，1是初始化调用那次，n是setState调..
state和setState
weixin_45545454的博客
03-08 383
1.state的基本使用 介绍：就是状态数据，是组件内部的私有数据，只能在组件内部使用，他是一个对象 使用： class App extends Component { constructor (props) { super(props) this.state = { name: '小美' } } render () { return ( <span>...
react中的state和setstate
wangzhen12138的博客
04-06 338
首先react中的state可以用来储存可以变化的状态 在我们想要改变组件的状态的时候，不能直接用this.state=XXX这种方式来进行修改，如果这样做react就没有办法知道修改组建的状态，这里需要用react提供的setstate方法，通过运用setstate的方法来将对象传入，这个对象表示组建的新状态，但是 只需要传入需要更新的部分就可以了 ... constructor (props) { super(props) this.state = { name:
在react中state和setState的使用方法（详细教程）
weixin_45301448的博客
01-26 3241
state state 是 react 中用来存储组件数据状态的，可以类比成 vue 中的 data。 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化....
react学习笔记之state以及setState的使用
11-27
在React开发中，状态（state）和setState()方法是核心概念，它们对于构建动态和响应式的用户界面至关重要。本文将深入探讨这两个概念及其在React组件中的应用。 首先，让我们了解什么是状态（state）。在React中，...
React - setState 的用法
kelly0721的博客
01-17 452
React 中的 setState 的用法 setState 并不会立即更新 setState 会引发组件的重新绘制 多个 setState 会合并执行 这三个点也可以合在一起来说，首先，我们应该意识到，我们想要更新 state 的值，除了state本身的数值要改变，另外render也必须要执行，这才能让state的更新有意义。 所以，state的更新会引起生命周期发生变化。这4个函数依...
【React学习】React中的setState方法
最新发布
zx1041561837的博客
08-18 2184
本文介绍React中的用于更新状态的方法setState，介绍了不可变值的概念，以及React17和18版本中setState在不同的场景中，更新状态的情况。
react 精华之组件状态state setState
gwdgwd123的博客
12-15 1185
13 一个经常被问到的问题，就是为什么不把组件的数据直接存放在组件类的成员变量中？比如像下面这样： class Foo extends React.Component { foo = 'foo' render() { return ( &lt;React.Fragment&gt;{this.foo}&lt;/React.Fragment&gt; );...
React使用
qq_37633967的博客
02-21 148
react使用
三、类组件的state & setState
weixin_45928836的博客
09-18 1058
一、state的基本使用 需求：封装一个Clock组件来实现时钟的自动更新 1.用函数组件实现 function Clock(props){ return ( <div> <h1>hello world</h1> <h1>it is {props.time}</h1> </div> ) } function tick(){ React
setState详解
热门推荐
sysuzhyupeng的博客
03-18 4万+
我们都知道，React通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UIsetState异步更新React初学者常会写出this.state.value = 1这样的代码，这是完全错误的写法。注意：一定不要直接修改this.state setState
震惊! React中三个方法获取setState更新之后的state !其中一个竟用到Promise!
lanadeus
08-18 1万+
问题的诞生React的setState方法是个异步方法.所以,若是在setState之后立即访问state,往往是不能得到更新之后的state值的.试看如下代码:class Orz extends Component{ constructor(props){ super(props); this.state = { value:1, } } compo
react中的setState的使用和深入理解
weixin_30436101的博客
11-24 265
前端框架从MVC过渡到MVVM。从DOM操作到数据驱动，一直在不断的进步着，提升着， angular中用的是watcher对象，vue是观察者模式，react就是state了，他们各有各的特点，没有好坏之分，只有需求不同而选择不同。 今天就着重详细的随手写点我对react中state的理解： React通过管理状态实现对组件的管理，通过this.st...
你真的理解setState吗？
大灰狼的小绵羊哥哥的博客
11-22 1431
你真的理解setState吗？ 面试官：“react中setState是同步的还是异步？” 我：“异步的，setState不能立马拿到结果。” 面试官：“那什么场景下是异步的，可不可能是同步，什么场景下又是同步的？” 我：“......” setState真的是异步的吗？ 这两天自己简单的看了下 setState 的部分实现代码，在这边给到大家一个自己个人的见解，可能文字或图片较多...
React setState源码解析：优化视图更新机制
React的核心优势之一是通过Virtual DOM（虚拟DOM）和高效的state管理机制，使得开发者只需要关注数据变化，而无需手动操作DOM。setState()方法正是这一机制的灵魂。 首先，我们从创建一个React组件开始，如`App`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zayyo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值