扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于 React 中 useEffect 使用问题浅谈
  • 507

0
分享到

关于 React 中 useEffect 使用问题浅谈

2024-04-02 19:04:59 507人浏览 薄情痞子
摘要

目录前言优化前优化后总结前言 最近看了一下 ant-design 中的 tree 组件源码时发现 useEffect 中根据 props 来计算当前函数组件的 state 的，感到好

前言

最近看了一下 ant-design 中的 tree 组件源码时发现 useEffect 中根据 props 来计算当前函数组件的 state 的，感到好奇，因为这样会导致应用重新绘制一次，这样才复杂场景下会对应用有一定的性能影响。为了验证自己猜想是否正确做了一下实践。这里的 React 是官方 16.12.0的源码。

优化前

import * as React from './react-source/packages/react'
import * as ReactDOM from './react-source/packages/react-dom'

const root = document.getElementById('root');

function Foo({number}) {
  const [number2, setNumber2] = React.useState(0);
  React.useEffect(() => {
    setNumber2( number + 1)
  }, [number])
  return <div>
   {number2 % 2 === 0 && <div>{number2}</div>}
    <button onClick={() => setNumber2(number2 + 1)}>更新 number2</button>
  </div>
}

function App() {
  const [number1,setNumber1] = React.useState(1);
  return <>
   {number1 % 2 === 0  &&  <div>{number1}</div>}
    <Foo number={number1}/>
    <button onClick={() => setNumber1(number1 + 1)}>更新 number1</button>
  </>
} 
ReactDOM.render(<App/>, root)

这里有两个组件， APP 函数组件有一个 number1 的 state,并作用 Foo 函数组件的 number props传递给子组件。Foo 子组件在 useEffect 中 依赖 number 的变化来更新该组件的 number2 state。

为了监听 root 节点变化的情况我使用了 MutationObserver api 来看看监听回调函数执行了多少次，所以在测试代码中增加了如下代码

const root = document.getElementById('root');
const observer = new MutationObserver(mutations =&gt; {
  console.log(mutations)
} )
observer.observe(root, {
  childList: true,
  subtree: true
})

来看一下第一渲染时界面输出的效果

可以看到 MutationObserver 回调被执行了两次， mutations 中有两项新增记录，对应 root 的新增两个子节点。现在再看看我点【更新number1】按钮之后的结果

可以看到 MutationObserver 这个回调被执行了两次，也就是但这个按钮的时候页面绘制了两次。

优化后

import * as React from './react-source/packages/react'
import * as ReactDOM from './react-source/packages/react-dom'

const root = document.getElementById('root');
const observer = new MutationObserver(mutations => {
  console.log(mutations)
} )
observer.observe(root, {
  childList: true,
  subtree: true
})


function Foo({number2,setNumber2}) {
  return <div>
   {number2 % 2 === 0 && <div>{number2}</div>}
    <button onClick={() => setNumber2(number2 + 1)}>更新 number2</button>
  </div>
}

function App() {
  const [number1,setNumber1] = React.useState(1);
  
  const [number2, setNumber2] = React.useState(0);
  return <>
   {number1 % 2 === 0  &&  <div>{number1}</div>}
    <Foo number2={number2} setNumber2={setNumber2}/>
    <button onClick={() => {
        let newNumber1 = number1 + 1
       setNumber1(newNumber1)
       setNumber2(newNumber1 + 1)
    }}>更新 number1</button>
  </>
} 
ReactDOM.render(<App/>, root)

优化有的代码就是把 Foo 状态提升到父组件中，然后把状态以及更新函数传给子组件就行。这样我们再来看一下点击【更新number1】之后的效果图

可以看看到这次 MutationObserver 的回调只被执行了一次。

总结

项目中还是尽量减少应用的重复绘制次数，不然会影响用户的交互体验，最差的情况可能还会看到每次绘制的中间状态，视觉上给人一种很卡的感觉。虽然性能提升上去了，但是代码的可维护性变差了，这种的就看你怎么平衡了，如果性能如果能接受的话，个人还是感觉代码的可维护性重要些。实践的时候还发现了一个 MutationObserver 的一个问题，就是我对 DOM 节点的文本进行修改的时候，MutationObserver 的回调居然没有执行让我有些意外。

到此这篇关于关于 React 中 useEffect 使用问题浅谈的文章就介绍到这了,更多相关React useEffect 使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 关于 React 中 useEffect 使用问题浅谈

本文链接: https://lsjlt.com/news/152791.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 关于 React 中 useEffect 使用问题浅谈
    目录前言优化前优化后总结前言 最近看了一下 ant-design 中的 tree 组件源码时发现 useEffect 中根据 props 来计算当前函数组件的 state 的，感到好...
    99+
    2024-04-02
  • React中useEffect使用问题怎么解决
    本篇内容介绍了“React中useEffect使用问题怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！前言最近看了一下 ant-des...
    99+
    2023-07-02
  • 浅谈Android中关于静态变量（static）的使用问题
    项目中，在不停地接收串口数据很长一段时间(几小时)后，会偶然性的报错。初步排除了oom和cpu紧张问题，因为是工业平板不方便调试，用了些比较笨的方法最后锁定在几个用了stati...
    99+
    2022-06-06
    静态 静态变量 static 变量 Android
  • 浅谈java中String相关问题
    原文：https://blog.csdn.net/qq_41268447/article/details/96759597    首先我们先说一下java堆内存和栈内存 java中八个基本数据类型就是值类型，存放在栈内存...
    99+
    2023-06-02
  • 浅谈element关于table拖拽排序问题
    最近在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法 //table的默认排序方式是按ID排序 顺序为...
    99+
    2024-04-02
  • 浅谈关于Mybatis的mapper-locations配置问题
    目录一、Spring-boot配置mybatis的mapper-locations解决什么问题？mapper-locations使用场景： 二、该怎么配置？三、classp...
    99+
    2023-05-19
    Mybatis 配置 Mybatis mapper-locations
  • 浅谈React Router关于history的那些事
    如果你想理解React Router，那么应该先理解history。更确切地说，是history这个为React Router提供核心功能的包。它能轻松地在客户端为项目添加基于loc...
    99+
    2024-04-02
  • 关于useEffect执行两次的问题及解决
    目录useEffect执行两次问题父组件里面 子组件里面react使用useEffect及踩坑useEffect 介绍重要理解useEffect常见跳坑useEffect执...
    99+
    2024-04-02
  • React-hooks中的useEffect使用步骤
    目录1.理解函数副作用什么是副作用常见的副作用2.基础使用使用步骤示例代码3.依赖项控制useEffect 永远是在 DOM渲染完成之后执行 1.理解函数副作用 什么是副作用 对于R...
    99+
    2024-04-02
  • 浅谈Nodejs中的作用域问题
    在JS中有全局作用域和函数作用域，而在Nodejs中也自己的作用域，分为全局作用域（global）和模块作用域。 js作用域： 以前学js的时候我们的全局对象是window，如： var a = 10;...
    99+
    2022-06-04
    浅谈 作用 Nodejs
  • react中使用useEffect及踩坑记录
    目录使用useEffect及踩坑记录useEffect 介绍useEffect常见跳坑hooks中useEffect()使用总结常见使用useEffect() 的第二个参数说明use...
    99+
    2022-11-13
    react使用useEffect useEffect踩坑 使用useEffect踩坑
  • 浅谈React的React.FC与React.Component的使用
    目录一、React.FC<> 二、class xx extends React.Component React 的组件可以定义为 函数（React.FC<>）...
    99+
    2024-04-02
  • 浅谈Python 中的复数问题
    前言 复习试题时，发现一道复数问题 问题 关于 Python 的复数类型，以下选项中描述错误的是 A复数的虚数部分通过后缀“J”或者“j”来表示 B对于复数 z，可以用 z.real 获得它的实数部分 C对于复数 z...
    99+
    2022-06-02
    Python 复数问题
  • 浅谈NodeJS中require路径问题
    项目需要用nodejs，感觉nodejs是前端装逼神器了，是通向全栈工程师的必经之路哇，接下来开始踏上学习nodejs的征程。下面是第一个hello，world的程序。 1、server.js文件，这相当于...
    99+
    2022-06-04
    浅谈 路径 NodeJS
  • 浅谈mysql导出表数据到excel关于datetime的格式问题
    最近用mysql导出表数据到excel文件，mysql中的datetime类型导出到excel（excel2016）中被excel识别成它自己默认的日期格式了，在mysql中的格式形如 yyyy-mm-dd hh:m...
    99+
    2022-05-20
    mysql 导出数据 excel datetime格式
  • 浅谈spring boot使用thymeleaf版本的问题
    spring boot使用thymeleaf版本问题 Spring boot默认使用的是thymeleaf的2版本，这个版本比较低，有些功能不支持，需要切换成3版本 在propert...
    99+
    2024-04-02
  • 浅谈Docker run 容器处于created状态问题
    在最近遇到的一次问题中，有这样一种现象： 系统有一个测试脚本会不断的执行docker run命令来运行容器，在测试过程中发现有一个情况是，有时候容器没有完全被运行到"Up"状态，而是...
    99+
    2024-04-02
  • React中使用react-file-viewer问题
    目录使用react-file-viewerreact-file-viewer预览本地文件解决思路使用react-file-viewer 1.npm install react-fil...
    99+
    2024-04-02
  • 关于mybatis3中@SelectProvider的使用问题
    mybatis3中增加了使用注解来配置Mapper的新特性，本篇文章主要介绍其中几个@Provider的使用方式，他们是：@SelectProvider、@UpdatePr...
    99+
    2024-04-02
  • 关于python中.xpath的使用问题
    在python中使用xpath定位时，有时候会先用.xpath定位到一个地点，for循环后，继续使用.xpath，但是会出现问题，比如在下面这个例子中：    根...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作