react组件多次渲染问题

最新推荐文章于 2024-04-09 21:58:04 发布

Ruonorth

最新推荐文章于 2024-04-09 21:58:04 发布

阅读量1w

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/riddle1981/article/details/131501148

版权

在React应用中，即使数据未变化，组件也可能因父组件渲染而重复渲染。通过React.memo可以优化这种情况，但需注意props的变更和内部组件的影响。使用memo时，确保props对象最小化，避免函数在组件内部定义，以减少不必要的渲染。

摘要由CSDN通过智能技术生成

问题背景

在数据没有发生变化的情况下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