脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react组件多次渲染

react组件多次渲染问题的解决

 更新时间：2023年07月20日 10:21:44   作者：Ruonorth  
本文主要介绍了react组件多次渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

问题背景

在数据没有发生变化的情况下React组件会进行数次重复渲染，绘制出来完全相同的两个图

排查思路

寻找子组件重渲染原因实验

测试一：在子组件的props未发生任何变更的情况下是否会发生重新渲染

import React, { useState } from "react"
import { Select } from "antd"
const { Option } = Select
export function Chart() {
    console.log("父组件重新渲染了")
    const [selectedOption, setSelectedOption] = useState("option1")
    function handleSelectChange(value) {
        setSelectedOption(value)
    }
    return (
        <div>
            <Select defaultValue={selectedOption} onChange={handleSelectChange}>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
                <Option value="option3">Option 3</Option>
            </Select>
            <ChildComponent />
        </div>
    )
}
function ChildComponent() {
    console.log("ChildComponent重新渲染了")
    return <div>Hello from ChildComponent</div>
}

测试结论：子组件即使不接收任何props当父组件重新渲染时子组件也会重新渲染

解决方案

使用React.memo，关于memo介绍如下：

包装一个组件memo以获得该组件的记忆版本。只要组件的 props 没有改变，当它的父组件重新渲染时，组件的这个记忆版本通常不会被重新渲染。

但 React 可能仍然会重新渲染它：memoization 是一种性能优化，而不是保证。

import React, { useState } from "react"
import { Select } from "antd"
const { Option } = Select
export function Chart() {
    console.log("父组件重新渲染了")
    const [selectedOption, setSelectedOption] = useState("option1")
    function handleSelectChange(value) {
        setSelectedOption(value)
    }
    return (
        <div>
            <Select defaultValue={selectedOption} onChange={handleSelectChange}>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
                <Option value="option3">Option 3</Option>
            </Select>
            {/* <ChildComponent /> */}
            <MemoChild />
        </div>
    )
}
function ChildComponent() {
    console.log("ChildComponent重新渲染了")
    return <div>Hello from ChildComponent</div>
}
const MemoChild = React.memo(ChildComponent)

即使使用memo，但其仍然会在其接受的props发生变更时及其所在的上下文发生变更时重新渲染。

因此为了更好的使用memo，应当尽量减少props的变化。具体方案如下：

  • 当props为引用值时应当使用useMemo返回相同引用值
  • 使得 props 中接受最少的必要信息
  • 当props包含函数时，要么在组件外部声明它以使其永远不会更改，要么useCallback在重新渲染之间缓存其定义。

例如：当props为对象时，应当减少props对象的变化

测试内组件对memo的影响

接下来进行另外的测试，将子组件放在Adapt中称为内部组件

可以发现，此时子组件的缓存失效了，尽管子组件没有props的变化

但每次父组件重新渲染子组件仍然会重新渲染

import React, { useState } from "react"
import { Select } from "antd"
const { Option } = Select
export function Adapt() {
    console.log("父组件重新渲染了")
    const [selectedOption, setSelectedOption] = useState("option1")
    function handleSelectChange(value) {
        setSelectedOption(value)
    }
    return (
        <div>
            <Select defaultValue={selectedOption} onChange={handleSelectChange}>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
                <Option value="option3">Option 3</Option>
            </Select>
            {/* <ChildComponent /> */}
            <MemoChild />
        </div>
    )
}
function ChildComponent() {
    console.log("ChildComponent重新渲染了")
    return <div>Hello from ChildComponent</div>
}
const MemoChild = React.memo(ChildComponent)

React.memo 失效的原因是因为将 ChildComponent 和 MemoChild 定义在了 Adapt 组件的内部。这意味着每当 Adapt 组件重新渲染时，ChildComponent 和 MemoChild 都会重新定义，导致了缓存失效。

测试props变更对memo的影响

改写测试用例，测试当父组件的props变更时，子组件是否重新渲染

import React, { useState } from "react"
import { Select } from "antd"
const { Option } = Select
export function Adapt() {
    console.log("Adapt重新渲染了")
    const [filterList, setFilterList] = useState(null)
    function onRefresh(value) {
        setFilterList(value)
    }
    return (
        <div>
            <Chart {...{ onRefresh, filterList }} />
        </div>
    )
}
function Chart({ filterList, onRefresh }) {
    console.log("Chart重新渲染了")
    return (
        <div>
            <Select value={filterList} onChange={onRefresh}>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
                <Option value="option3">Option 3</Option>
            </Select>
            <MemoChild />
        </div>
    )
}
function ChildComponent() {
    console.log("ChildComponent重新渲染了")
    return <div>hello</div>
}
const MemoChild = React.memo(ChildComponent)
export default Adapt

子组件仍然可以进行正常的缓存，可得知当子组件使用memo

无论是父组件的state或者props状态变更，只要子组件的props和上下文未变化都不会影响到子组件

问题结论

导致组件重复渲染的可能如下：

  • 当子组件未使用memo时，子组件会随着父组件一起重新渲染，因此即使子组件的props未变化仍会多次渲染子组件
  • 当子组件使用了memo，但仍然重新渲染
    • 子组件接受的props或者context变更了
    • 子组件的上下文及props都没变更，但子组件时内部组件所以每次都是重新创建的

因此为了优化子组件的多次渲染应当注意：

  • 重复的渲染可以使用memo缓存
  • 父组件传递的重复的props参数可以使用useMemo
  • 每次传递的props应当是最小的props，不然无关的props变更会影响组件缓存失效
  • 组件及函数应该尽量以纯函数形式写在组件之外，避免组件重渲染时重新创建函数带来的影响

 到此这篇关于react组件多次渲染问题的解决的文章就介绍到这了,更多相关react组件多次渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React 错误边界组件的处理

    React 错误边界组件的处理

    这篇文章主要介绍了React 错误边界组件的处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • react如何解决Hooks闭包陷阱解决方案

    react如何解决Hooks闭包陷阱解决方案

    在React中使用Hooks时,开发者可能会遇到一些常见的坑点,这篇文章主要介绍了react如何解决Hooks闭包陷阱的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-05-05
  • React Hooks核心原理深入分析讲解

    React Hooks核心原理深入分析讲解

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-12-12
  • react antd-design Select全选功能实例

    react antd-design Select全选功能实例

    这篇文章主要介绍了react antd-design Select全选功能实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • pubsub-js在react中的使用教程

    pubsub-js在react中的使用教程

    pubsub-js 是一个用于实现发布-订阅模式的 JavaScript 库,可以用于不同组件之间的通信,在 React 中,可以使用 pubsub-js 来实现组件之间的通信,本篇文章给大家讲解pubsub-js在react中的使用,感兴趣的朋友一起看看吧
    2023-10-10
  • 在React项目中实现一个简单的锚点目录定位

    在React项目中实现一个简单的锚点目录定位

    锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节,本文讲给大家介绍一下React项目中如何实现一个简单的锚点目录定位,文中有详细的实现代码,需要的朋友可以参考下
    2023-09-09
  • 深入理解React Native原生模块与JS模块通信的几种方式

    深入理解React Native原生模块与JS模块通信的几种方式

    本篇文章主要介绍了深入理解React Native原生模块与JS模块通信的几种方式，具有一定的参考价值，有兴趣的可以了解一下
    2017-07-07
  • react实现点击选中的li高亮的示例代码

    react实现点击选中的li高亮的示例代码

    本篇文章主要介绍了react实现选中的li高亮的示例代码，页面上有很多个li，要实现点击到哪个就哪个高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 在create-react-app中使用css modules的示例代码

    在create-react-app中使用css modules的示例代码

    这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • React各种状态管理器的解读及使用方法

    React各种状态管理器的解读及使用方法

    这篇文章主要介绍了对于React各种状态管理器的解读,文中给大家提到了状态管理器是如何使用的，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-12-12

最新评论