一、setState的特性

React修改数据，一定使用setState(),页面会自动根据最新的state进行渲染
setState会合并更新；并不是没调用this.setState()一次，组件就会render() 一次，在连续的setState 的时候，最终只执行一次render() 函数，这个render() 是生成虚拟DOM,最终是否转化真实DOM，还要看数据是否发生变化
setState((State)=>{}) 此时回调函数中的State是最新数据；平时也可以使用setState((State)=>{}) 去替换 setState({ num : 2 })
setState() 可能是异步的，不一定会立即更新数据，关键看这个setState所处的环境

在React控制的时间中,setState() 是异步的，无法立刻获得最新数据，比如： onCkick componentDidMount. ------异步调用中想要立刻获取新的数据，可以将seyState 设置第二个参数(回调函数)，react会在数据更新后，立即执行回调函数
在一些不受React 控制的时间当中，setState是同步的，立刻获得最新数据，比如：原生事件，定时器，延时器，addEventListener

二、相关解释

三、V18 的新特性

在V18 中的优化针对的是原生事件，相对于受React控制的事件是相同的，setState() 在React17 和React18 中的对比

该方法并不总是一部更新，（18 版本没有变化）；在React控制的时间中是异步，原生事件中是同步；
该方法的集中语法没有发生变化，仍然分为几种情况；获取最新数据和普通更新数据
（新特性）在setTimeout等原生事件中，如果连续的调用this.setState（）更新数据，react17 是没有批量更新数据的，而是连续触发render() 多次；React18中进行了优化，在原生事件中连续多次调用this.setState () 也会自动批量更新数据，最终只render() 一次

自动批量更新数据，最终只render() 一次

react setState特性相关推荐

React 新特性 Hooks 讲解及实例(四)
想优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 使用 Ref Hooks 类组件中使用 Ref 一般有: String Ref Callback Ref CreateRef 上述在函数组 ...
React: setState解析
作用更新 State 中的数据因为 React 不允许直接更改 state 中的数据,所以引入了 setState() 方法.当调用 setState 时,会重新执行 render 函数,进而根据 ...
react setState详解
React setState调用的原理 setState具体的执行过程如下: 首先调用setState()函数: ReactComponent.prototype.setState = functio ...
React setState流程解析
一.setState使用接触react框架不久,却在项目当中发现,非受控组件其更新时机的触发方式--setState,是一个异步的过程下面是一个例子: handelTabChange (tabNa ...
前端每周清单第 30 期：WebVR 指南，Vue 代码分割范式，理想的 React 架构特性
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID:front ...
react setState里的作用域
从接触racet开始,我们就认识了setState,它是对全局变量进去更新的一个重要方法, 不仅可以更新数据,还能在更新后执行方法时直接调用刚刚更新的数据今天碰到的问题就在于它的作用域的先后问题先 ...
React高级特性之Render Props
render prop是一个技术概念.它指的是使用值为function类型的prop来实现React component之间的代码共享. 如果一个组件有一个render属性,并且这个render属性的 ...
React setState 的异步与同步
目录前言先看一个例子 setState 为什么不会同步更新组件? 探秘setState 源码事务整体流程回顾: 再看一个例子: 结语前言 react 官网:State 的更新可能是异步的详 ...
react新特性实例详解（memo、lazy、suspense、hooks）
1.memo 其实react.memo的实现很简单,就几行代码. export default function memo<Props>(type: React$ElementType,c ...

react setState特性

一、setState的特性

二、相关解释

三、V18 的新特性

react setState特性相关推荐

最新文章

热门文章