第六十周总结——React数据管理

最新推荐文章于 2023-03-10 10:30:32 发布
最新推荐文章于 2023-03-10 10:30:32 发布
阅读量1.1k 收藏 1
点赞数 2
分类专栏： 总结 文章标签： react.js javascript 前端 setState React批量更新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51965698/article/details/129367082
版权

React数据管理

代码仓库

React批量更新

React中的批量更新就是将多次更新合并处理，最终只渲染一次，来获得更好的性能。

React18版本之前的批量更新
// react 17 react-dom 17 react-scripts 4.0.3
import * as ReactDOM from "react-dom";
import {useState} from 'react'
function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  function handleClick() {
    setNum1(c => c + 1);
    setNum2(c => c + 1);
  }
  console.log("render");
  return (
    <div>
      num1:{num1}-num2:{num2}
      <button onClick={handleClick}>Next</button>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

点击一次按钮触发setNum1和setNum2，但是render只输出一次，React将多次更新合并处理，最终只渲染一次。

然而React18版本之前，批量更新并不是所有场景都会生效。

import * as ReactDOM from "react-dom";
import {useState} from 'react'
function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  function handleClick() {  
    setTimeout(()=>{
      setNum1(c => c + 1);
      setNum2(c => c + 1);
    })
  }
  console.log("render");
  return (
    <div>
      num1:{num1}-num2:{num2}
      <button onClick={handleClick}>Next</button>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

点击一次按钮触发setNum1和setNum2，然后会输出两次render，这就是在React18版本之前，React的批量更新失效了。

总结：在React18之前，我们只能在React事件处理函数中执行过程中进行批量更新。对于promise、setTimeout、原生事件处理函数或其他任何事件中的状态更新都不会进行批量更新。

React18自动批量更新

从React18的createRoot开始，无论在哪里，所有更新都将自动进行批量更新。
这意味着 setTimeout、promises、原生事件处理函数或其他任何事件的批量更新都将与 React 事件一样，以相同的方式进行批量更新。我们希望这样可以减少渲染工作量，从而提高应用程序的性能:

// react 18.2.0 react-dom 18.2.0 react-scripts 5.0.1
import ReactDOM from 'react-dom/client';
import {useState} from 'react'
function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  function handleClick() {  
    setTimeout(()=>{
      setNum1(c => c + 1);
      setNum2(c => c + 1);
    })
  }
  console.log("render");
  return (
    <div>
      num1:{num1}-num2:{num2}
      <button onClick={handleClick}>Next</button>
    </div>
  );
}
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
    <App />
);

点击一次按钮触发setNum1和setNum2，然后会输出一次render，这就是在React18版本，自动批量更新，所有更新都将进行批量更新。

禁止批量更新

使用flushSync来包裹更新，做到禁止批量更新

import ReactDOM from 'react-dom/client';
import {flushSync} from 'react-dom';
import {useState} from 'react';
function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  function handleClick() {  
    setTimeout(()=>{
      flushSync(()=>{
        setNum1(c => c + 1);
      })
      flushSync(()=>{
        setNum2(c => c + 1);
      })
    })
  }
  console.log("render");
  return (
    <div>
      num1:{num1}-num2:{num2}
      <button onClick={handleClick}>Next</button>
    </div>
  );
}
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
    <App />
);
React18的自动批量更新对Hooks的影响

如果你正在使用 Hooks，在绝大多数情况下批量更新都能“正常工作”。

React18的自动批量更新对Classes的影响

如果在React17版本之前，没有在React事件处理函数中执行的代码不会批量执行，同时它也是同步执行，而在React18版本中，都是批量更新和异步执行的。所以会导致React18版本和React18版本之前的输出不一样。

在React18版本之前

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num1: 1,
      num2: 1
    }
  }
  handleClick(){
    setTimeout(()=>{
      this.setState(({num1})=>({
        num1: num1+1
      }))
      console.log(this.state);
      this.setState(({num2})=>({
        num2: num2+1
      }))
    })
  }
  render() {
    console.log('render');
    return (
      <div>
        num1:{this.state.num1}-num2:{this.state.num2}
        <button onClick={()=>{
          this.handleClick()
        }}>Next</button>
      </div>
    )
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
/*
  上述代码点击的时候会输出一下内容：
  render
  {num1: 2, num2: 1}
  render
*/

在React18版本

import React, { Component } from 'react'
import ReactDOM from 'react-dom/client';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num1: 1,
      num2: 1
    }
  }
  handleClick(){
    setTimeout(()=>{
      this.setState(({num1})=>({
        num1: num1+1
      }))
      console.log(this.state);
      this.setState(({num2})=>({
        num2: num2+1
      }))
    })
  }
  render() {
    console.log('render');
    return (
      <div>
        num1:{this.state.num1}-num2:{this.state.num2}
        <button onClick={()=>{
          this.handleClick()
        }}>Next</button>
      </div>
    )
  }
}
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
    <App />
);
/*
  上述代码点击的时候会输出一下内容：
  {num1: 1, num2: 1}
  render
*/

如果想要在React18中按照React18版本之前的输出需要使用flushSync来进行修改

import React, { Component } from 'react'
import { flushSync } from 'react-dom';
import ReactDOM from 'react-dom/client';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num1: 1,
      num2: 1
    }
  }
  handleClick(){
    setTimeout(()=>{
      flushSync(()=>{
        this.setState(({num1})=>({
          num1: num1+1
        }))
      })
      console.log(this.state);
      this.setState(({num2})=>({
        num2: num2+1
      }))
    })
  }
  render() {
    console.log('render');
    return (
      <div>
        num1:{this.state.num1}-num2:{this.state.num2}
        <button onClick={()=>{
          this.handleClick()
        }}>Next</button>
      </div>
    )
  }
}
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
    <App />
);
/*
  上述代码点击的时候会输出一下内容：
  {num1: 1, num2: 1}
  render
*/

useState是同步还是异步

先上结论：

  1. 在React18版本之前，useState在React合成事件和hooks中是异步的，其他情况都是同步的，例如，原生事件、setTimeout、promise等
  2. 在React18版本，useState在React中都是异步的
React18版本之前的this.setState
import * as ReactDOM from "react-dom";
import React,{useState,useEffect} from 'react'
class App extends React.Component {
  state = {
    count: 0
  }
  componentDidMount() {
    this.setState({count: this.state.count + 1})
    console.log(this.state.count);
    this.setState({count: this.state.count + 1})
    console.log(this.state.count);
    setTimeout(() => {
      this.setState({count: this.state.count + 1})
      console.log(this.state.count);
      this.setState({count: this.state.count + 1})
      console.log(this.state.count);
    });
  }
  render() {
    return <h1>Count: {this.state.count}</h1>
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

上述代码输出0 0 2 3，我们来分析一下为什么这样输出。

  1. 首先进入componentDidMount，因为this.setState是异步执行的，所以先执行同步代码，执行两次console.log(this.state.count);，输出两次0
  2. 在componentDidMount中，this.setState导致的更新会进行合并，批量更新，只会更新最后一个，所以当还没执行setTimeout之前，更新count，这时的count变成了1
  3. 进入setTimeout执行，在setTimeout中，this.setState是同步执行的，并且没有批量更新
  4. 执行this.setState({count: this.state.count + 1})，这时count同步更新为2，执行console.log(this.state.count);输出2
  5. 执行this.setState({count: this.state.count + 1})，这时count同步更新为3，执行console.log(this.state.count);输出4

所以最终输出0 0 2 3。

React18版本之前的this.setState怎么在setTimeout实现异步批量更新(unstable_batchedUpdates)

this.setState怎么在setTimeout实现异步批量更新，React提供了一种解决方案，就是从react-dom中暴露一个API:unstable_batchedUpdates，我们看一下具体的用法。

import * as ReactDOM from "react-dom";
import React,{useState,useEffect} from 'react'
class App extends React.Component {
  state = {
      count: 0
  }
  componentDidMount() {
      this.setState({count: this.state.count + 1})
      console.log(this.state.count);
      this.setState({count: this.state.count + 1})
      console.log(this.state.count)
      setTimeout(() => {
          ReactDOM.unstable_batchedUpdates(() => {
              this.setState({count: this.state.count + 1})
              console.log(this.state.count)
              this.setState({count: this.state.count + 1})
              console.log(this.state.count)
          }) 
      })
  }
  render() {
      return <h1>Count: {this.state.count}</h1>
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

上述代码输出0 0 1 1，我们来分析一下为什么这样输出。

  1. 首先进入componentDidMount，因为this.setState是异步执行的，所以先执行同步代码，执行两次console.log(this.state.count);，输出两次0
  2. 在componentDidMount中，this.setState导致的更新会进行合并，批量更新，只会更新最后一个，所以当还没执行setTimeout之前，更新count，这时的count变成了1
  3. 进入setTimeout执行，因为setTimeout中的代码用了unstable_batchedUpdates嵌套，所以也是异步批量更新。
  4. 先执行同步代码，执行两次console.log(this.state.count)，输出两次1。
  5. 执行this.setState({count: this.state.count + 1})，此时count更新为2。
  6. 执行this.setState({count: this.state.count + 1})，此时count更新为3。
React18的解决方案

如果在React17版本中，想要在setTimeout中执行异步批量更新，需要在每个setTimeout中都嵌套unstable_batchedUpdates，React18中解决了这个痛点，无论在哪里的更新都是异步批量更新。

import ReactDOM from 'react-dom/client';
import {flushSync} from 'react-dom';
import React from 'react';
class App extends React.Component {
  state = {
    count: 0
  }
  componentDidMount() {
    this.setState({count: this.state.count + 1})
    console.log(this.state.count);
    this.setState({count: this.state.count + 1})
    console.log(this.state.count);
    setTimeout(() => {
      this.setState({count: this.state.count + 1})
      console.log(this.state.count);
      this.setState({count: this.state.count + 1})
      console.log(this.state.count);
    });
  }
  render() {
    return <h1>React18 Count: {this.state.count}</h1>
  }
}
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
    <App />
);

上述代码输出0 0 1 1，我们来分析一下为什么这样输出。

  1. 首先进入componentDidMount，因为this.setState是异步执行的，所以先执行同步代码，执行两次console.log(this.state.count);，输出两次0
  2. 在componentDidMount中，this.setState导致的更新会进行合并，批量更新，只会更新最后一个，所以当还没执行setTimeout之前，更新count，这时的count变成了1
  3. 进入setTimeout执行，在React18中，setTimeout中是异步批量更新。
  4. 先执行同步代码，执行两次console.log(this.state.count)，输出两次1。
  5. 执行this.setState({count: this.state.count + 1})，此时count更新为2。
  6. 执行this.setState({count: this.state.count + 1})，此时count更新为3。
抓住鼹鼠不撒手
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
30分钟精通React今年最劲爆的新特性——React Hooks
10-17
主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 18 新特性（一）：自动批量更新
浮沉半生的博客
07-30 1652
本文介绍了 React 18 的自动批量更新特性，和之前版本的批量更新进行了对比。并且使用代码模拟了批量更新的不同实现思路。
React数据管理
Solitarily的博客
01-06 571
React数据管理 父子关系的组件： 数据传递方式是自顶向下的，一般通过props让子组件拿到父组件的数据 非父子关系的组件： 依靠状态提升来和兄弟元素进行数据交互 通过发布订阅模式做数据交互 Redux等数据管理工具 1 状态提升方式 业务层级很深的话不适合，但扁平化或数据通信都在父子间通信就很适合。 2 发布订阅方式 当业务量很大的时候，发布订阅方式下的事件是暴露的，容易造成事件之间...
react数据管理
无聊者进来逛逛
03-27 333
方法 依靠状态提升来和兄弟元素进行数据交互 应用场景：组件层级扁平，兄弟组件通信情况很少 通过发布订阅模式做数据交互：通过观察者模式 应用场景：业务规模较小，层级较深的业务 redux等数据管理工具：redux单向数据流 应用场景：业务复杂，组件层级较深，兄弟组件通信密切 ...
React 数据管理 - Reac-Redux
weixin_41154070的博客
04-19 156
1.更新流程 Provider 中主要功能创建 Context Connect 的最终返回函数中的Context, parentSub属性中包含 Provider 的 Context Connect执行逻辑中 subscribeUpdates 函数调用了subscription.trySubscribe()
React 数据管理 - Redux
weixin_41154070的博客
04-17 354
redux 1.createStore 方法 createStore 方法返回了包含几个常用的函数的对象，以及调用了一次diapatch方法提取reducer传入的默认值，初始化state的值 1.1diapatch 方法 diapatch 方法调用reducer函数，参数为（state, action），得到新的state值，调用subscribe中注册的回调函数数组，diapatch 方法返回值为传入的action 2.subscribe 方法 subscribe方法添加回调函数，dispatch方
React 全自动数据表格组件——BodeGrid的实现思路
12-12
表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路： 表格是在后台管理系统中用的最频繁的...
react pro——————————
04-14
react pro——————————
react全家桶资料——react的学习资源
07-26
前端框架 react资源 B站有教学视频，此为学习课件 视频地址：https://www.bilibili.com/video/BV1wy4y1D7JT?spm_id_from=333.337.search-card.all.click&vd_source=74a6d047a9213c01664428d8c47be9e9
简书 React-Redux进行数据的管理
weixin_48294709的博客
06-14 316
redux
前端技能树，面试复习第 21 天—— React 怎么做数据管理，原理是什么
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
07-12 200
具体的执行过程如下（源码级解析）： 方法将新的 放进组件的状态队列里，并调用 来处理将要更新的实例对象； 在 方法中引出了一个关键的对象——，该对象所具备的 属性直接决定了当下是要走更新流程，还是应该排队等待；如果轮到执行，就调用 方法来直接发起更新流程。由此可以推测， 或许正是 React 内部专门用于管控批量更新的对象。 注意： 对象可以理解为**“锁管理器”。这里的“锁”，是指 React 全局唯一的 变量， 的初始值是 ，意味着“当前并未进行任何批量更新操作”。每当 Rea
react 数据集中式管理- 有浅入深
magicjunjunqq的博客
03-10 237
react 数据集中式管理- 有浅入深
第三十七周总结——大二下学期开学总结
1514的博客
03-07 7691
    上一周末总结没写，今天实在不想写项目了，就来划下水吧。     从大二上学期最后一段时间开始，到现在大二下学期刚开始，几乎都没停过，一直都是写项目，有点麻木了。总结起来有一下几点。 一系列问题 在写项目中复习以前不熟悉的知识点较少，收获的东西较少，主要是不清楚是不是写的对。就拿vue来举例子，前几天别的组考核时我才知道，vue里面的token最好是存到store中，但是我存到了cookie里面。其实刚开始我也是尝试着存到store里面的，只不过一刷新页面，store里面的数据就清空了，导致我以为不
第三十一周总结——js数组
1514的博客
11-20 4700
生活   这一学期过的是真的快，可能是因为疫情在家待了一月。感觉还没多长时间就快要期末考试了。说实话，大二学的东西是真的难，到现在还没咋看书。等这个项目写的差不多了，要抽出时间来看看专业课的书了，不能挂科了。还有四级，估计是过不了了，放平心态就好。 学习(js数组) 感觉自己基础知识不会，难的又搞不明白，唉，废了。现从基础的学起。 1.创建和赋值 let array=new Array(1,2,3,4,5) let array=[1,2,3,4,5] let array=new Array() 1. ar
第三十四周总结——复习
1514的博客
12-12 3609
    今天周日，又该写每周总结了，现在正在看复变函数的视频，看的困死了，来写写博客精神一下。今天跟学长换的键盘，好键盘就是手感不一样。这一周真的没学到什么，尚且说说生活上的小事吧。     还有两周的时间，真的该抓紧时间复习了，好多专业课还不会，这次期末有七门专业课，太多了，两天复习一门（/doge）。今晚看看能不能把复变函数学懂一点吧。下午被学长催交互登陆页面了，让我今晚必须交互完，哪有那么简单，还是明天交互吧，我今晚要学习复变函数。     昨晚学校举办“发现杯”比赛，共9题，真的难，最后两题的正确率
第四十二周总结——今后计划
1514的博客
04-28 3421
今后计划     马上就要大三了，等暑假也就该面试了吧，但是感觉自己还有好多东西没了解过，还有的即使了解过也是似懂非懂，了解的只是表面，没有更深层的挖掘，没多少时间了，也给该简单的规划一下接下来的一段时间做什么了，最好时间紧一点。回想起来大一的时候，那学习计划真的就是一个接着一个，不带停的，那时间紧总让我觉得只要浪费一点就完不成任务了。当时的压力就是做梦都能梦见自己在改bug。现在大二了，马上大三，反而没有大一的时候自律了。大二了，学长学姐也不怎么管了，就松懈了一点吧。从今天看是吧，我想和大一的时候一样，布
第十三周总结——认清自己
1514的博客
04-10 2381
第十周总结     这，这一周忽然明白一句话，就是当自己真正知道学了，赶上来还是很快的（吧）。你看吧，现在我菜的一批，网页网页做不好，蓝桥杯快开始了，自己还是不怎么会，今天一上午就写出来一题，还有就是专业课，这专业课咋怎么难啊（无语的眼神）。本来觉得等快考试时复习以下应该就行了吧，结果……还是不要太高估自己的好，现在补应该不晚（吧）。还有就是，自己自律能力是真的差，都说好了不要熬夜的，你咋怎么不争气呢？明天就要九韶杯了，已经准备好经历残酷的现实了，能写几题是几题吧，反正这是免费的，慌蓝桥啊，毕竟三百呢，不能
第三十九周总结——reactnative中使用rsa和aes加密解密来传输和接收数据
1514的博客
03-26 2257
    出于安全性问题，防止别人爬虫，前后端数据传输采用了rsa和aes加密解密的方式进行     1.rsa加密数据传递给后端(采用rsa加密)     需要安装jsencrypt yarn add jsencrypt import JSEncrypt from 'jsencrypt' var encryptor = new JSEncrypt() // 创建加密对象实例 //加密密钥，这里是后端设置的加密密钥 var pubKey = '' encryptor.setPublicKey(pubKey
前端分页插件_免费开源的React前端框架——ReactAdmin
最新发布
05-26
ReactAdmin 是一个免费开源的 React 前端框架，用于快速构建管理后台应用程序。它提供了许多可重用的组件和工具，包括前端分页插件。 ReactAdmin 的前端分页插件是一个高度可定制的组件，可以与任何 API 集成，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值