React & 理解 re-render 的作用、概念，并提供详细的例子解释

🕗 发布于 2024-09-28 02:56 react.js javascript 前端

一、什么是 re-render

在 React 中 re-render（重新渲染） 是经常发生的行为，主要确保视图要时刻保持最新的数据来呈现。

但每次发生 re-render 也是有代价的，比如数据状态、focus 焦点、表单数据、都得重置，
遇到代码复杂一点，还给性能带来不必要的消耗。

React 的 re-render 是一个很核心的概念，我们必须得掌握它，否则出现问题将无从下手。

下面我将会介绍触发 re-render 的场景，以及如何避免 re-render 。

二、什么场景会触发 re-render

前言：re-render 只会影响自身和 children，如果 children 还有 children 则继续影响，以此类推。
理解这点很重要，它将会作为后续如何避免 re-render 的解题思路。

提示：此 children 非 props.children

2.1 parent

当 parent 组件发生 re-render 时，自身与 children（子组件）都会受影响（上面已提到过）。

代码如下：

import ReactDOM from 'react-dom/client';
import { useState, } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const Parent = () => {
  const [parentName, setParentName] = useState('Jack')
  const ChildComponent = () => {
    console.log('Init child Component.')
    return <>
      <div>I am child.</div>
    </>
  }
  return <>
    <div>
      <span>Parent name: {parentName}</span>
      <button onClick={() => setParentName('Tony')}>Change Parent'name.</button>
    </div>
    <ChildComponent/>
  </>
}
root.render(
  <Parent/>
);

关系如图：
在这里插入图片描述

效果：
请添加图片描述

2.2 state

当 state 数据发生变化时，那些引用过 state 的组件都会发生 re-render。

提示: 其实和 parent 没啥两样，上面的 parent 演示只是为了加深理解 re-render 的渲染机制。

下面我将以子组件自身更改 state 来完成自身 re-render 的演示。

代码如下：

import ReactDOM from 'react-dom/client';
import { useState, } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const Parent = () => {
  const [parentName, setParentName] = useState('Jack')
  const ChildComponent = () => {
    console.log('Init child Component.')
    return <>
      <div>I am child.</div>
      <button onClick={() => setParentName('Tony')}>A child can change his parent'name.</button>
    </>
  }
  return <>
    <div>
      <span>Parent name: {parentName}</span>
    </div>
    <ChildComponent/>
  </>
}
root.render(
  <Parent/>
);

关系如图：
在这里插入图片描述
效果：
请添加图片描述

2.3 props

当组件的 props 数据发生变化时触发 re-render。

代码如下：

import ReactDOM from 'react-dom/client';
import { useState, } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const Parent = () => {
  const [parentName, setParentName] = useState('Jack')
  const ChildComponent = (props) => {
    console.log('Init child Component.')
    return <>
      <div>I am child. My parent'name is {props.parentName}</div>
    </>
  }
  return <>
    <div>
      <span>Parent name: {parentName}</span>
      <button onClick={() => setParentName('Tony')}>Change Parent'name.</button>
    </div>
    <ChildComponent parentName={parentName}/>
  </>
}
root.render(
  <Parent />
);

关系如图：
在这里插入图片描述

你可能注意到了，这触发 re-render 还不是因为更改了 state ? 好像跟上面的例子没啥两样啊？
因为 props 本身就支持传递 state 呀，这块先别着急，目前先把它当成 props 发生变化时，组件会执行 re-render 即可，等到后面的避免 re-render 章节自然就明白了。

效果：
请添加图片描述

2.4 context

当 context 数据发生变化时，那些引用 context 的组件都会触发 re-render。

代码如下：

import ReactDOM from 'react-dom/client';
import { useState, createContext, useContext, } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const ThemeContext = createContext(null)
const Parent = () => {
  const [theme, setTheme] = useState({
    mode: 'light'
  })
  const ChildComponent = () => {
    const theme = useContext(ThemeContext)
    console.log('Init child component.')
    return <>
      <div>
        The current mode is: {theme.mode}
      </div>
    </>
  }
  const onChangeTheme = () => {
    setTheme(() => ({
      ...theme,
      mode: theme.mode === 'light' ? 'dark' : 'light'
    }))
  }
  return <>
    <ThemeContext.Provider value={theme}>
      <button onClick={onChangeTheme}>Change mode</button>
      <ChildComponent/>
    </ThemeContext.Provider>
  </>
}
root.render(
  <Parent />
);

关系如图：
在这里插入图片描述

你可能注意到了，这触发 re-render 还不是因为更改了 state ? 好像跟上面的例子没啥两样啊？
因为 context 本身就支持传递 state 呀，这块先别着急，目前先把它当成 context 发生变化时，组件会执行 re-render 即可，等到后面的避免 re-render 章节自然就明白了。

效果：
请添加图片描述

提示：还没用过 context 的可以先阅读React & 解释常见的 hooks: useState / useRef / useContext / useReducer 再回头看本文。

三、如何优雅地避免 re-render

前言：在理解 re-render 的触发场景后，对如何避免 re-render 将会是一件既有趣又有挑战性的事情。
“挑战性”皆指容易犯“过度/错误 地避免 re-render，这是每个新手基本都会犯的错甚至老手，对于刚学 React 的同学也不必担心，因为它并不是一俩天就能搞定的，得不断的实践和积累才能慢慢减少。

废话不多说，咋们开始进入正文。

3.1 提取 state

既然 state 发生变化时，组件自身和 children 都会 re-render ，我们可以把变更 state 代码单独抽取一个组件来维护。

代码如下：

import ReactDOM from 'react-dom/client';
import { useState, } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const Parent = () => {
  const BaseComponent = () => {
    const [parentName, setParentName] = useState('Jack')
    return <>
      <div>
        <span>Parent name: {parentName}</span>
        <button onClick={() => setParentName('Tony')}>Change Parent'name.</button>
      </div>
    </>
  }
  const ChildComponent = () => {
    console.log('Init child Component.')
    return <>
      <div>I am child.</div>
    </>
  }
  return <>
    <BaseComponent />
    <ChildComponent/>
  </>
}
root.render(
  <Parent />
);

关系如图：
在这里插入图片描述
效果：
请添加图片描述

3.2 组件以 props / children 的方式传递

children 其实是 props 的一部分，而 props 的其它字段也可作为组件，因此我将它俩单独放一起做演示。

回到正题，在不想分离 state 的情况下，我们可以将组件以 props 的形式传递，一旦 state 发生变化时，若组件自身的 props 未发生变化就不会触发 re-render，本质上也是一种抽离的思想。

代码如下：

import ReactDOM from 'react-dom/client';
import { useState, } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
// 方式1：采用 children 作为组件。
import ReactDOM from 'react-dom/client';
import { useState, } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const Parent = () => {
  const BaseComponent = ({children}) => {
    const [parentName, setParentName] = useState('Jack')
    return <>
      <div>
        <span>Parent name: {parentName}</span>
        <button onClick={() => setParentName('Tony')}>Change Parent'name.</button>
      </div>
      {children}
    </>
  }
  const ChildComponent = () => {
    console.log('Init child Component.')
    return <>
      <div>I am child.</div>
    </>
  }
  return <>
    <BaseComponent>
      <ChildComponent/>
    </BaseComponent>
  </>
}
root.render(
  <Parent />
);

// 方式2：采用 props 其它字段作为组件传递。
const Parent = () => {
  const BaseComponent = ({ bottom }) => {
    const [parentName, setParentName] = useState('Jack')
    return <>
      <div>
        <span>Parent name: {parentName}</span>
        <button onClick={() => setParentName('Tony')}>Change Parent'name.</button>
      </div>
      {bottom}
    </>
  }
  const ChildComponent = () => {
    console.log('Init child Component.')
    return <>
      <div>I am child.</div>
    </>
  }
  return <>
    <BaseComponent bottom={ChildComponent()}>
    </BaseComponent>
  </>
}
root.render(
  <Parent />
);

关系如图：
在这里插入图片描述
效果：
请添加图片描述

3.3 使用 memo + useMemo/useCallback

memo 用于缓存组件，useMemo 用于缓存数据，useCallback 用于缓存函数。

提示1： useMemo 也能模拟 useCallback ，但俩者的用法有着细微差别，后面会提到。
提示2：memo 的底层实现逻辑也需要维护成本，建议在不能使用 3.1、3.2 的方式情况下再来考虑 memo 。

3.3.1 memo

当我们无法让组件分离 state 或以 props/children 的方式时，memo 可以派上用场，当组件内引用 props/state/context 发生变化时才会发生re-render。

代码如下：

import ReactDOM from 'react-dom/client';
import { useState, memo } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const ChildMemo = memo(function ChildMemo({ name }) {
  console.log('Init component.')
  return <>
    <h3>Child's name is: {name}</h3>
  </>
})
const Parent = () => {
  const [childName, setChildName] = useState('Lucy')
  const [parentName, setParentName] = useState('Jack')
  return <>
    <div>
      <div>
        <input type="text" value={parentName} placeholder='Please enter your name' onChange={(e) => setParentName(e.target.value)} />
      </div>
      <div>
        <button onClick={() => setChildName('Tony')}>Set child name</button>
      </div>
    </div>
    <ChildMemo name={childName} />
  </>
}
root.render(
  <Parent />
);

关系如图：
在这里插入图片描述

效果：
请添加图片描述

3.3.2 useMemo

上面讲的是缓存组件，那在什么情况下需要缓存数据呢？先思考下这段代码：
在这里插入图片描述
知道引用类型的同学应该都知道，当声明两个对象（数据相同）进行比较时，
obj1 === obj2 总是等于 false，于是每次 re-render 的时候，这个函数实际上就会被重新创建一次，因此这里的 memo 将会一直无效。

请添加图片描述

解决方法就是使用 useMemo 来缓存这份对象：
在这里插入图片描述
其中 useCallback 的第二个参数是可选项，可以指定某个依赖项发生变化时再触发 re-render。

具体代码如下：

import ReactDOM from 'react-dom/client';
import { useState, memo, useMemo } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const ProfileMemo = memo(function Profile({info}) {
  console.log('Init component')
  return <>
    <div>
      Address: {info.address}
    </div>
  </>
})

const Parent = () => {
  const [parentName, setParentName] = useState('Jack')
  const info = useMemo(() => ({
    address: 'London'
  }), [])
  return <>
    <div>Parent name: {parentName}</div>
    <button onClick={() => setParentName('John')}>Change parent's name</button>
    <ProfileMemo info={info} />
  </>
}
root.render(
  <Parent />
);

效果：
请添加图片描述

3.3.3 useCallback

在什么情况下需要缓存函数呢？首先得明确一点，函数也是对象的一部分，因此两个同样的函数比较时永远为 false ，思考下这段代码：
在这里插入图片描述
这里的 ProfileMemo 组件将因为函数的不等价导致再次被 re-render 。
请添加图片描述

此时缓存函数 useCallback 就可以解决啦，改造后关系图如下：
在这里插入图片描述
代码如下：

import ReactDOM from 'react-dom/client';
import { useState, memo, useMemo, useCallback } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const ProfileMemo = memo(function Profile({info}) {
  console.log('Init component')
  return <>
    <div>
      Address: {info.address}
    </div>
  </>
})

const Parent = () => {
  const [parentName, setParentName] = useState('Jack')
  const info = useMemo(() => ({
    address: 'London'
  }), [])
  const handSubmit = useCallback(() => {
    console.log('Save profile.')
  }, [])
  return <>
    <div>Parent name: {parentName}</div>
    <button onClick={() => setParentName('John')}>Change parent's name</button>
    <ProfileMemo handSubmit={handSubmit} info={info} />
  </>
}
root.render(
  <Parent />
);

useCallback 的第二个参数和 useMemo 是一样的，可以指定某个依赖项发生变化时再触发 re-render 。

效果：
请添加图片描述

3.3.4 useMmeo 模拟 useCallback

useMemo 除了缓存数据也支持缓存函数，以下两种写法的作用是一样的：

const handleSumit = useMemo(() => (
return () => {
console.log('Save profile')
}
), [])
const handSubmit = useCallback(() => {
    console.log('Save profile.')
  }, [])

唯一区别是， useMemo 共包裹两层函数，官方也建议 useCallback 作为缓存函数首选。

3.4 提取 context

经过前几章的学习，对如何避免 re-render 我们其实已经有了一个框架和概念。
比如 3.1 章节，我们也可以将变化 context 的部分提取出来，与其它组件保持隔离。

具体效果不演示了，大家可自行练习。

四、避免 re-render 的几个注意事项

4.1 memo 不要与变更父级 state 数据的子组件放一起

思考下这段代码：当子组件更改外部的 state 时，ChildMemo 组件是否会触发 re-render?
在这里插入图片描述

答案是会的！而且 input 的每一次更改外部 state 时，ChildMemo 都将被重新 re-render。

为什么？

这里会涉及到作用域的概念，当前 BaseCmp 与 state 并不在同个作用域，它改变了外部 state 作用域的值，
根据 2.2 章节讲到，当 state 数据发生变化时，那些引用过 state 的组件都将被 re-render，而 ChildMemo 刚好与 BaseCmp 处于同个作用域，因此也就一并被 re-render 。

解决的方式有几种：

将 ChildMemo 提取出来，与 BaseCmp 隔离。
将外部的 state 转成内部 state ，保持同级作用域。
自行发挥~

结论：同一作用域的 state 发生变化时，memo 在没有引入该 state 的情况下不会受到影响，
若 memo 放在引入外部 state 的子组件时，当 state 发生变化时则受到影响，它并不能阻止 re-render 。

以上便是有关 re-render 的所有内容，如有问题，欢迎补充。

完！

原文地址：https://blog.csdn.net/cookcyq__/article/details/142488099

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

QML使用Qt自带软键盘例子
VirtualKeyboardSettings.locale = "eesti" // 复古键盘样式。// 这种集成方式下点击隐藏键盘的按钮是没有效果的，只会改变active，因此
阅读更多2024-09-28
Pinia只能存储简单数据类型
Pinia是一个Vue的状态管理库，它允许开发者跨组件或页面共享状态。为了实现数据的持久化，即让数据在页面刷新或重新加载后依然保持，可以使用pinia-plugin-persistedstate插件。
阅读更多2024-09-28
Maven常见解决方案
idea中maven本地仓库jar包打包失败和无法引用的问题解决_java_脚本之家
阅读更多2024-09-28
无线感知会议系列【4】【基于WiFi和4G/5G的非接触无线感知：挑战、理论和应用-2】
本篇重点分享一下该论文接 2020年北京智源大会张大庆老师的一个报告。
阅读更多2024-09-28
ResNet50V2:口腔癌分类
本文为为内部文章原作者：K同学啊。
阅读更多2024-09-28
【AI大模型】Kimi API大模型接口实现
Kimi API 是一套基于RESTful风格的大模型调用接口，支持文本生成、语音合成、图像识别等任务。开发者可以通过简单的API调用，快速地将AI大模型功能集成到自己的应用中。多模型支持：支持多个大
阅读更多2024-09-28
【C++】模板、宏、命名空间、
模板就是基于你给定的一套规则让编译器为你写代码。或者通俗的说就是，你写个模板，里面抠出一些空，这些空填上不同的东西，就是一个可用的对象。或者我举个例子，比如开发票，其实发票的格式都是一样的，只有抬头、
阅读更多2024-09-28
【锁住精华】MySQL锁机制全攻略：从行锁到表锁，共享锁到排他锁，悲观锁到乐观锁
是最低粒度的的锁，锁住指定行的数据，加锁的开销较大，加锁较慢，可能会出现死锁的情况，锁的竞争度会较低，并发度相对较高。但是如果where条件里的字段没有加索引，则加的行锁会自动升级为表锁，因为行锁是基
阅读更多2024-09-28
校园外卖系统SpringBoot免费分享
今天我们分享一个非常实用的校园外卖系统，基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的瑞吉外卖案例项目，经过站长的进一步改进和优化，提供了更丰富的功能和更高的可用性。
阅读更多2024-09-28
vue3 vite模式配置测试，开发、生产环境以及代理配置
vue3 vite模式配置测试，开发、生产环境以及代理配置
阅读更多2024-09-28

React & 理解 re-render 的作用、概念，并提供详细的例子解释

一、什么是 re-render

二、什么场景会触发 re-render

2.1 parent

2.2 state

2.3 props

2.4 context

三、如何优雅地避免 re-render

3.1 提取 state

3.2 组件以 props / children 的方式传递

3.3 使用 memo + useMemo/useCallback

3.3.1 memo

3.3.2 useMemo

3.3.3 useCallback

3.3.4 useMmeo 模拟 useCallback

3.4 提取 context

四、避免 re-render 的几个注意事项

4.1 memo 不要与变更父级 state 数据的子组件放一起

相关文章