05-react中setState详解，react性能优化

最新推荐文章于 2022-07-29 15:38:22 发布
最新推荐文章于 2022-07-29 15:38:22 发布
阅读量726 收藏
点赞数
分类专栏： react知识总结 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunbabac/article/details/121268102
版权

为什么使用setState

我们直接修改state中数据，数据会被修改，但react监听不到，就不会重新渲染页面

我们必须通过setState告诉react数据已经发生改变

setState函数是从Component中继承过来的

setState异步更新

 为什么设计异步

 如何获得异步的结果

方法一，setState的第二个参数

 方法二，componentDidUpdate

 setState一定是异步吗？

 setState数据的合并

当你使用setState时，有没有想过会吧state中数据覆盖掉

答：不会，是合并

 setState本身合并

 react更新机制

 React在props或state发生改变时，会调用React的render方法，会创建一颗不同的树

 React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI：

如果完全比较两棵树，算法复杂程度为O(n)的3次方，成本太大

react做了优化

 keys的优化

嵌套组件中 render函数的调用

 

shouldComponentUpdate生命周期函数

决定要不要重新调用render

 类PureComponent

类组件继承PureComponent就行了，PureComponent类帮我们实现了在shouldComponentUpdate中判断


高阶函数memo

state数据不可变性

直接修改state不进行scu优化

 直接修改的问题

推荐方法

 

是云呀！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React setState(多次调用setState真的会影响性能吗？)
Hank的博客
07-16 1万+
看了网上很多帖子很多都说setState慎用，因为可能导致页面性能变差。 报着怀疑的态度发现并不如此。 代码和运行结果直接看效果（后面再从源码角度进行分析）涉及到React的事件系统。 现象分析 1.  yes代表渲染成功，可以看到总共渲染了两次。 那么setState可不止2次。  那么什么导致渲染次数的。（首先一个事件发生到结束的过程（比如Click，setTimeout），每次调用se
React原理解密
liuyuhua666的博客
07-19 917
1. setState() 的说明 1.1 更新数据 setState() 是异步更新数据的 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState() 可以多次调用 setState() ，只会触发一次重新渲染 this.state = { count: 1 } this.setState({ count: this.state.count + 1 }) co...
React setState一些解析以及 react性能优化
qq_43955202的博客
08-23 772
详解setState 1.开发中我们并不能直接通过修改state的值来让界面发生更新： 因为我们修改了state之后,希望React根据最新的State来重新渲染界面,但是这种方式的修改React并不知道数据发生了变化; React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化; 我们必须通过setState来告知React数据E经发生了变化; 2.setState函数是我们继承的Component原型中定义的。 3.setStat
react原理篇:组件性能优化(减轻state、使用纯组件PureComponent避免不必要的重新渲染)
m0_45877477的博客
07-29 581
问:如何避免不必要的渲染? 答:用钩子函数shouldComponentUpdate解决(返回true重新渲染,返回false不重新渲染) 为什么要用纯组件? 纯组件内部自动实现了shouldComponentUpdate这个钩子函数,不需要手动比较
React setState详解和React性能优化
行无所至，学无所尽。
01-01 337
为什么要使用setState修改数据 原因就是希望通过修改了state之后，能够使得React根据最新的state来重新渲染界面 setState异步更新 setState修改值之后不能立即访问，值的更新是异步的； 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的； 最好的办法应该是获取到多个更新，之后进行批量更新 如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步； state和prop
React setState优化
weixin_33716557的博客
05-22 155
学习笔记： 1. React 里面的 setState不会自动差量化处理，只要调一次 setState, 必定会重新渲染一次 UI。因此 需要尽量减少调用 setState 的次数，比方能同时 set 两个值的话，就调用一次 set 两个值，不要调用两次 set.必要情况下，可以重写 shouldComponentUpdate 方法，通过判断 props 和 state的值自行判断是否需要重新渲...
详解React中setState回调函数
08-27
"详解React中setState回调函数" React中setState回调函数是React框架中的一种重要机制，用于更新组件的状态。setState函数是异步的，因此在使用时需要特别注意。下面将详细介绍setState回调函数的使用方法和注意...
React：setState详解
01-02
react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。
react-native中AsyncStorage实例详解
08-30
import { View, StyleSheet, Text, AsyncStorage } from 'react-native'; export default class Root extends React.Component { constructor(props) { super(props); this.state = { value: '' }; } async ...
一.React入门 create-react-app使用
09-03
React入门与Create-React-App使用详解 React是一个流行的JavaScript库，用于构建用户界面，特别是单页面应用。它引入了组件化的概念，使得开发更加模块化和可维护。本文将深入讲解React的基础知识，包括如何使用...
react入坑之setState注意事项
chiuwingyan的博客
12-04 9417
  不要直接改变state 直接对组件state中的属性赋值将不会触发DOM更新，因为React并不知道state被改变了 state的更新可能是异步的 React会一次处理多个对setState的调用以提高性能，所以调用setState()时不应当直接基于另外一些来自state或props中的属性进行计算，很有可能当前计算的值并不是最终的值，当用于计算的另一些值再次变化后，React并不...
react中的setState方法
Sapling
01-22 4752
在react中如果你想修改数据的话，必须使用this.setState()方法 可以在调用一个事件中使用this.setState()方法，从而达到修改数据的目的, 也可以用于文本框双向数据绑定 例如 render(){ //创建一个点击事件 return<button onClick={()=>textCount()}></button&a
我不再使用React.setState的3个原因
smk108的博客
12-24 2694
从几个月前开始，我在新开发的React组件中不再使用setState。我并没有停止使用局部组件状态，只是不再用React来管理这些state，这是很不错的一个选择。 对于React初学者来说，使用setState是比较棘手的。即使是经验丰富的React开发者，在使用React本身的状态管理机制时，也经常会出现一些比较微妙的bug，例如： 忘记setState是异步的导致的bug：控制台的输...
React中setState同步更新策略
大灰狼的小绵羊哥哥的博客
08-11 7152
React中setState同步更新策略从属于笔者的Web 前端入门与工程实践中的React入门与最佳实践系列总纲系列文章，推荐阅读2016-我的前端之路:工具化与工程化。 setState 同步更新 我们在上文中提及，为了提高性能React将setState设置为批次更新，即是异步操作函数，并不能以顺序控制流的方式设置某些事件，我们也不能依赖于this.state来计算未来状
【React】深入理解setState
qq_42996469的博客
04-25 775
setState为什么是异步的？ 一般使用setState()时，React并不会保证state会立刻更新，这些操作将延迟批量调用。 这两个词很重要，批量就是延迟的原因。 事实上，我们应该将setState() 视为更新组件的请求而不是立即更新的命令，这一点与Vue不同，不论是Vue2的Object.definedProperty还是Vue3的Proxy，都拦截了对象的setter，所以在数据被改变时会被立刻拦截并命令组件开始更新。 为什么React要设计成这样？为了性能（并不是说Vue性能不好，只是框架思
21个React性能优化技巧
shadowfall的博客
03-12 727
React 为高性能应用设计提供了许多优化方案，本文列举了其中的一些最佳实践。 在以下场景中，父组件和子组件通常会重新渲染： 在同一组件或父组件中调用 setState 时。 从父级收到的“props”的值发生变化。 调用组件中的 forceUpdate。 下面是提升 React 应用性能的 21 个技巧。 使用纯组件 如果 React 组件为相同的状态和 props 渲染相同的输出，则可以将其视为纯组件。 对于像 this 的类组件来说，React 提供了 PureCompon...
你真的理解setState吗？
FireBird_one的博客
08-12 3943
面试官：“react中setState是同步的还是异步？” 我：“异步的，setState不能立马拿到结果。”  面试官：“那什么场景下是异步的，可不可能是同步，什么场景下又是同步的？” 我：“......” setState真的是异步的吗 ？ 这两天自己简单的看了下setState的部分实现代码，在这边给到大家一个自己个人的见解，可能文字或图片较多，没耐心的同学可以直接跳过看总结（源码版本是...
setState
覃大畅的博客
02-23 670
文章目录setState基础用法setState对组件树的性能影响 ReactNative系列-文章 setState 基础用法 在react组件中，我们使用两种数据来控制一个组件：props和state。props (不了解可以去看 -> props详解) 是组件中的属性，一经指定，那么它在整个组件的生命周期中都不再改变。对于需要改变数据，这时候需要state。 一般来说在construc...
setState的性能优化化化化化
gercke的博客
10-26 258
React更新 React在props或state发生改变时，会调用React的render方法，会创建一颗不同的树。 React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI： 如果一棵树参考另外一棵树进行完全比较更新，那么即使是最先进的算法，该算法的复杂程度为 O(n 3 )，其中 n 是树中元素的数量；这个开销太过昂贵了，React的更新性能会变得非常低效； 于是，React对这个算法进行了优化，将其优化成了O(n)，如何优化的呢？ 同层节点之间相互比较，不会垮节点比较； 不同
react 中unstated-next的 createContainer详解
最新发布
06-17
`useContainer` 是一个 React Hook，可以在组件中使用该 Hook 获取状态容器的实例。状态容器实例中包含了类中定义的数据和方法。 下面是一个简单的示例： ``` import { createContainer } from 'unstated-next'; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值