了解 React 应用程序中的渲染和重新渲染:它们如何工作以及如何优化它们

当我们在 react 中创建应用程序时,我们经常会遇到术语"渲染"和"重新渲染组件"。虽然乍一看这似乎很简单,但当涉及不同的状态管理系统(如 usestate、redux)或当我们插入生命周期钩子(如 useeffect)时,事情会变得有趣。如果您希望您的应用程序快速高效,那么了解这些流程是关键。

什么是渲染?

渲染是 react 根据状态或属性在屏幕上渲染用户界面 (ui) 的过程。当你的组件第一次渲染时,它被称为第一次渲染。

初始渲染如何工作?

当组件首次"安装"到 dom 时,会发生以下情况:

1。状态初始化:

无论你使用 usestate、props 还是 redux,都会创建组件的初始状态。

2。渲染函数:

react 循环遍历 jsx 代码并根据当前状态生成虚拟 dom。

3。为组件的当前状态创建一个虚拟 dom(虚拟 dom)。

4。比较(差异):

虚拟 dom 与真实 dom 进行比较(由于是第一次渲染,所以所有元素都会完全渲染)。

5。显示:

该组件显示在屏幕上。
组件渲染完成后,下一个挑战就是渲染它。

重新渲染:何时以及为何?

每次状态或道具发生变化时都会发生重新渲染。您是否单击了更改屏幕上数字的按钮?更改了 redux 存储中的值?所有这些操作都可能导致 react 再次渲染组件,这就是重新渲染的用武之地。

重新渲染如何工作?

状态变化检测:

  • 使用 usestate,当你调用 setstate 时,react 知道它需要更新组件。

  • 使用 redux,当存储中的值发生更改时,与该状态部分关联的每个组件都会重新渲染。

渲染触发器:

当状态发生变化时,react 会根据该变化创建一个新的虚拟 dom。

比较(差异):

  • react 将新的虚拟 dom 与旧的虚拟 dom 进行比较,并计算要应用哪些更改。这是 react 优化渲染的一种方式。

查看更改:

  • 计算出更改后,react 将它们应用到实际的 dom 上。因此,仅再次显示页面更改的部分。

渲染哪些组件?

并非所有组件都会受到每次更改的影响。 react 仅重新渲染那些满足以下条件的组件:

使用当地州:

如果您使用 usestate,则每次调用 setstate.

时都会重新渲染组件

使用 redux 状态:

如果你的组件依赖于 redux 状态(通过 useselector 或 connect),当该部分状态发生变化时,它将重新渲染。

使用道具:

如果 props 值发生变化,组件将使用新值重新渲染。

渲染优化

当然,不必要地重新渲染所有组件并不总是理想的。如果我们希望应用程序快速高效地运行,这里有一些优化技巧:

1。组件记忆

react 通过 react.memo 提供组件记忆功能。如果你的组件不依赖于 props 或状态变化,你可以"记住"它,因此只有当相关值发生变化时它才会重新渲染。

示例:

const memoizedcomponent = react.memo(mycomponent);

2。函数和值的记忆

为了避免在每次渲染时重新创建函数或值,请使用 usecallback 来记忆函数并使用 usememo 来记忆值。

  • usecallback 允许您记住函数并防止在依赖项发生变化之前重新创建它。

  • usememo 会记住函数的结果,因此不会在每次渲染时重新计算。

示例:

const increment = usecallback(() => {
  setcount(prevcount => prevcount + 1);
}, []);

const expensivecalculation = usememo(() => {
  return count * 2;
}, [count]);

3。 redux 优化

如果您使用 redux,您可以使用记忆选择器(例如重新选择)进一步优化您的应用程序。这可以避免重新渲染不受状态更改影响的组件。

生命周期挂钩和渲染

在经典的react类中,我们使用shouldcomponentupdate来控制组件何时重新渲染。在功能组件中,可以使用 useeffect 和 memoization 来模拟这个概念。

结论

渲染和重新渲染对于 react 应用程序中的 ui 显示至关重要,但正确理解和优化这些过程可以区分慢速应用程序和超快应用程序。正确使用 memoization、usecallback、usememo 以及仔细处理 redux,有助于避免不必要的重新渲染,并保持我们的应用程序快速响应。

代码示例:实际渲染和重新渲染

这是一个使用 usestate、redux 和 memoization 来优化渲染的示例组件:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onclick="{increment}">Increment</button>
      <button onclick="{()"> dispatch({ type: 'SOME_ACTION' })}&gt;
        Dispatch Redux Action
      </button>
    </div>
  );
};

正如我们所看到的,这里使用了本地状态、redux、memoization 和 useeffect hook 的组合,以使应用程序尽可能高效。

相关推荐
小牛itbull26 分钟前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
待磨的钝刨31 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询