【three】React 之 setState异步执行、重复渲染问题、路由

最新推荐文章于 2025-03-19 06:28:09 发布

圆○

最新推荐文章于 2025-03-19 06:28:09 发布

阅读量2.3k

点赞数

分类专栏：学习笔记文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45342093/article/details/124768709

版权

React学习

setState()方法异步执行

setState()方法是异步执行的。

class App extends React.Component {
   
  state = {
   
    count: 0,
  }
  bianhua = () => {
   
    this.setState({
   
      count: this.state.count + 1
    })
    console.log("shuzi ",this.state.cou

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

圆○

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

前端面试汇总-React

越陌度阡

06-29

1322

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

React 学习笔记

飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘

02-19

1627

文章目录React 学习笔记安装基础概念变量 css列表组件事件处理事件对象state表单处理一个实现评论的案例高阶概念props传递数据函数传递数据constructorprops childrenprops校验props校验组件通信父传子子传父兄弟组件通讯Context各种细节setState() 异步更新数据setState() 二次调用setState() 同步JSX 语法的转化过程组件更新机制组件性能优化虚拟DOM 和 Diff算法v6 路由 React 学习笔记学习课程来自黑马程序员安装

参与评论您还未登录，请先登录后发表或查看评论

[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件？

歌谣的博客

11-26

1355

[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件？ 1.在同一个组件添加不同的key,以下重新封装了组件： export default function (props) { return (<组件 {...props} key={search参数} />) } 2.但是不知道在路由跳转的地方加入key可行否？ <Route path='/sdspace/offline/:id/detail' exact component={

Component和PureComponent的区别

weixin_46261309的博客

01-13

442

引出PureComponent Component存在2个问题：只要执行setState(),即使不改变状态数据, 组件也会重新render() 只当前组件重新render(), 就会自动重新render子组件 ==> 效率低以上问题出现原因是 Component中的shouldComponentUpdate()总是返回true 那么只有当组件的state或props数据发生改变时才重新render() 解决方法办法1: 重写shouldComponentUpdate()方

React组件重复渲染的成因与优化策略

最新发布

zzjlhlcd的博客

03-19

309

React 组件的重复渲染是性能优化中的关键问题。通过合理使用React.memo和、优化useEffect和、避免内联函数和对象、优化 Context API 的使用以及按需加载组件，可以有效减少不必要的渲染。希望本文的优化策略能帮助你在 React 开发中提升应用性能。

由React Router引起的组件重复渲染谈Route的使用姿势

weixin_34116110的博客

11-20

587

React Router 4 把Route当作普通的React组件，可以在任意组件内使用Route，而不再像之前的版本那样，必须在一个地方集中定义所有的Route。因此，使用React Router 4 的项目中，经常会有Route和其他组件出现在同一个组件内的情况。例如下面这段代码： class App extends Component { render() { const { i...

React--》React组件变化每次都会导致重新渲染，如何解决？

ztK63LrD的博客

04-20

7774

可以看到初次渲染时，所有的组件都会被执行一次，当点击按钮时，父组件传递给子组件A的props值发生变化导致A组件又被重新渲染一次，接下来仅仅是父组件发生变化，当父组件的值为4的时候会再次导致子组件A的props值发生变化导致子组件A再次被重新渲染，因为孙组件B没有被传入props，导致其只有在初次渲染的时候被被渲染，后面即使父组件发生变化，其也不会重新渲染，具体的过程如上图所示。React.memo()是一个高阶组件，它接收另一个组件作为参数，并且会返回一个包装过的新组件，包装过的新组件就会。

react原理分析--this.state修改引起的重新渲染

weixin_30267691的博客

06-27

839

整理向,非原创,目的是整理出浅显易懂的方向性说明. 比如现有 this.state={name:"小明",age:18} 我们说修改组件的状态要用this.setState()来实现.这里有两个问题 1.为什么?我直接用this.state.age=17能不能实现重新渲染? 不能.因为它只是改变了这个组件当前的状态,并没有调用render(). 2.thi...

React 面试题

MissXu666的博客

01-30

2203

React中的props是只读的，主要是为了维护组件的可预测性和可维护性。如果允许子组件修改props，那么一个父组件将状态传递给多个子组件时，这些子组件就可以随意修改props的值，导致状态的不可预测，给调试和维护带来困难。为了解决这个问题，React采用了只读的props机制。子组件只能读取props的值，但不能修改它们。这种设计模式类似于函数式编程中的纯函数，纯函数不会改变传入的参数，只会返回一个新的值。通过保护props不被修改，React确保了组件的可预测性和可维护性。

react-presentation:reactjs-演示文稿

06-15

- **Fragment, Portal, Suspense**：React 新特性，用于减少 DOM 操作，实现跨 DOM 树渲染，以及异步加载组件。 8. **部署与构建** - **create-react-app**：官方提供的脚手架，简化了项目设置和构建流程。 - **...

[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决？

歌谣的博客

11-20

765

[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决？ componentWillReceiveProps 个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 ...

React路由跳转时通过传参进行动态渲染的方法

Ka_houl的博客

12-19

1929

最近在react项目中，需要根据点击元素的不同，而切换同一个路由地址下的一个Tab选项卡的不同区域中，我采用的是通过在路由跳转时候顺带传值的方法，通过值的不同而切换到选项卡的不同区域中。首先是pageA页面中在需要调转的不同元素中绑定上相应的方法（设置路由跳转到pageB页面，并且给selectd传入不同的参数值Tab_a、Tab_b） onGotoTab_ a= () =&amp;amp;gt; { ...

【react】setState()的执行流程

Codefreyy

08-05

550

首先判断，组件当前处于什么阶段（1)如果是渲染阶段 ==>不会检查state值是否相同上面那个setCount(0)就是在渲染阶段 (2)如果不是渲染阶段 ==>会检查state的值是否相同 a、值不同,渲染 b、值相同，不重新渲染有时候（值第一次相同时）值相同 React也会继续执行当前组件的渲染，但是不会触发其子组件的渲染，不会产生实际的效果。...

React中setState执行机制

m0_71955188的博客

09-12

180

状态合并：当调用 setState 时，React 首先将传入的状态对象与当前的状态进行合并。如果传入的是一个对象，React 将会浅合并（Shallow Merge）这两个对象；如果传入的是一个函数，React 将会将当前状态作为参数传递给该函数，并使用函数返回的新状态进行合并。批量更新： React 会将所有的 setState 调用收集起来，并进行批量更新。这样做是为了提高性能，避免频繁的重渲染。触发重新渲染：在组件的生命周期方法或 React 事件处理程序中，React 会根据更新队列中的状

React-Router路由跳转时render触发两次的情况

weixin_33890526的博客

04-10

1663

问题：React-Router路由跳转时，render触发两次，导致页面重复渲染。原因：项目中使用的react-router ^3.x.x。react-router路由跳转时，this.props.location.action的值会有两种状态。这两种状态都会触发render。故页面渲染两次。　　 1. 当点击Link时，this...

说说React中setState执行机制

weixin_70238574的博客

08-18

615

当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用，可以通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新。11 .当上一次更新机制执行完毕，以生命周期为例，所有组件，最顶层组件的didmount之后将isBranchUpdate设置为false,执行之前累积的setState。2 .判断当前React是否处于批量更新状态，如果是，将当前组件加入待更新的组件队列中去。

前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？

星辰迷上大海的博客

03-08

5190

在React中，组件的重新渲染可以通过setState()、forceUpdate()、props或state的改变、父组件的重新渲染以及context的改变来触发。当组件重新渲染时，React会执行render方法，生成新的虚拟DOM树

react（60）——PureComponent，解决当setState时值未发生新改变也重新渲染组件的问题

木子旭的博客

03-24

1198

1.问题描述当组件中运行方法setState({})。哪怕该方法的参数为一个空对象，该组件和其子组件都会被重新渲染，这样会影响效率。 2.解决方法利用shouldComponentUpdate(nextProps, nextState)函数，手动对比状态是否改变。通过判断状态是否改变，决定shouldComponentUpdate的返回值为true或者false。如果为true，则会重新渲染组件，如果为false，就不会重新渲染组件当状态过多的时候，一个一个手动判定会比较麻烦，有一个组件Pure

react setstate异步

09-08

setState在React中是异步的。当我们在React组件中调用setState方法时，它并不会立即更新组件的状态。相反，React会将所有的setState调用进行批处理，然后在合适的时机一次性更新组件的状态。这样做的目的是为了提高性能和优化渲染过程。然而，有一些情况下可以绕过React的性能优化机制，使setState表现出同步的形式。其中一种方式是在原生事件或setTimeout中使用setState。在这些情况下，setState会立即更新组件的状态，因为React无法捕获到这些事件的触发。总结起来，setState在合成事件（由React封装的事件）中调用时是异步的，而在原生事件或setTimeout中调用时是同步的。这个区别需要我们在编写React组件时注意，以免产生意外的结果。1234