React中每次渲染都会传入一个新的props.children到子组件?

传入props.children后, 为什么会导致组件的重新渲染?

问题描述

在 react 中, 我想要对组件的渲染进行优化, 遇到了一个非常意思的问题, 当我向一个组件中传入了 props.children 之后, 每次父组件重新渲染都会导致这个组件的重新渲染; 它看起来的表现就像是被memo包裹的组件, props和自身状态未发生变化, 组件却重新渲染了; 下面我写了一个demo, 一起来看看这个问题吧:

父组件App中引入了一个Home组件:

import Home from "./pages/Home";
import { useState } from "react";function App() {const [count, setCount] = useState(0);console.log("App is render");return (<div className="App">{count}<button onClick={() => setCount(count + 1)}>Increment</button><Home></Home></div>);
}

使用 memo 包裹 Home 子组件, 同时 Home 组件可以接收一个 props.children 展示传入到 Home 中的组件, 如下:

import React, { memo } from "react";const Home = memo((props) => {console.log("Home is render");return (<div>Home{props.children}</div>);
});export default Home;

目前在 App 组件中, 没有向 Home 组件中传入 props.children, 此时第一次加载时 App 组件和 Home 组件都会重新渲染, 当我们点击 Increment 按钮让 count 的值变化时, App 组件重新渲染, 由于 Home 组件被 memo 包裹, 当 Home 组件的 props 和自身状态未发生变化时, 组件不进行重新渲染, 目前也正是我们所期望的这样, 没有问题。

但是, 当我们在 App 组件中向 Home 组件传入 props.children 时, 就会出现问题(此问题不仅限于我下面例子中传入了一个 About 组件, 传入任何元素都会出现这个问题, 即使我们传入一个简单的 div 元素):

import { useState } from "react";
import Home from "./pages/Home";
import About from "./pages/About";function App() {const [count, setCount] = useState(0);console.log("App is render");return (<div className="App">{count}<button onClick={() => setCount(count + 1)}>Increment</button><Home><About /></Home></div>);
}

About 组件同样使用 memo 包裹, 代码如下:

import React, { memo } from "react";const About = memo(() => {console.log("About is render");return <div>About</div>;
});export default About;

此时如果我们修改 count 的值, 会导致 App 组件重新渲染, 但是也会导致 Home 组件重新渲染。这就有些令人疑惑, 我们来分析一下:

首先我们知道, 在未经过任何优化的情况下, 父组件重新渲染一定会导致子组件的重新渲染, 那么也就会创建一个新的组件实例; 而如果使用 memo 对组件进行包裹, 那么在组件的 props 和自身状态没有发生变化的情况下, 父组件重新渲染子组件不会重新渲染, 是不是意味着不会创建一个新的组件实例呢? (这里进入了思维误区)

上面代码中, 我们向 Home 组件中传递了一个 About 组件, 目前 Home 组件中的表现就相当于 props.children = <About/>, 由于 Home 组件被 memo 包裹还重新渲染了, 那大几率是 props 发生了变化。纠结之处就在于, 此时 props 中又只有 children 一个属性, 值为 About 组件, About 组件同样被 memo 包裹, 且没有依赖任何 props 和状态, 如果 About 组件返回的结果应该是相同的, 就不应该导致 Home 组件的 props 发生变化才对。

这就是我所遇到的问题, 为什么 props.children 会影响组件的渲染呢?

问题分析

我依然怀疑是由 Home 组件的 props 发生了变化, 唯一可能变化的就是 About 组件, 为了验证我的想法, 于是我在Home 组件中定义了一个 aboutRef 变量, 使用 useRef 包裹 About 组件, 如下所示:

import Home from "./pages/Home";
import { useState } from "react";function App() {const [count, setCount] = useState(0);// 使用useRef包裹const aboutRef = useRef(<About/>);console.log("App is render");return (<div className="App">{count}<button onClick={() => setCount(count + 1)}>Increment</button><Home>{aboutRef.current}</Home></div>);
}

此时我发现, 首次渲染时 App、Home、About 都会渲染, 而当 count 发生变化时, 只有 App 组件重新渲染了, 这也就达到了我最初期望的效果。但是为什么包裹了 useRef 才可以做到这个效果呢? 到这里已经可以确定的是 Home 组件的 props.children 一定是发生了变化的, 那么我们来探讨一下 About 组件为什么会变化。

变化的原因是因为组件每次重新渲染时都会创建 React 元素, 例如<About /> = jsx(About), 并且在调用时会返回一个新对象, 当然不只是 About 会这样创建, 其他组件和元素也是这样创建的。其中jsx()只不过是React.createElement 的语法糖而已, 元素或组件都会通过 React.createElement 创建返回一个 ReactElement 对象, 这是因为 React 利用 ReactElement 对象组成了一个 Javascript 对象树(也就是虚拟 DOM )。前面我进入了一个思维误区, 认为 memo 包裹的组件不会再被重新创建了, 其实不管是否有memo包裹, 都是会通过 React.createElement 来创建, 只不过被memo包裹的组件创建出来的 React 元素会有所不同, 具体的可以深入的学习 memo, 这里给大家推荐一篇文章《从源码学 API 系列之 React.memo》。

因此对于 props.children 而言, 每次得到的都是 React.createElement(About) 返回的一个新对象, 这也是 Home 组件的 props 改变了的原因; 而我们使用 useRef, 创建了一个不会改变的对象赋值给 Home 组件的 props, 所以 Home 组件的 props 没有发生变化, 就不会重新渲染。

解决方案

解决这个问题, 除了使用 useRef 之外, 我们还可以定义一个变量, 提到 App 组件外, 也可以做到这个效果, 如下所示:

import { useState } from "react";
import Home from "./pages/Home";
import About from "./pages/About";// 在组件外定义变量
const about = <About />;function App() {const [count, setCount] = useState(0);console.log("App is render");return (<div className="App">{count}<button onClick={() => setCount(count + 1)}>Increment</button><Home>{about}</Home></div>);
}

当 About 组件没有依赖于 App 组件中其他状态时, 我们可以采用上面的做法, 但是如果 About 组件还依赖 App 内的其他状态, 可以发现无论是提变量还是 useRef 的做法都无法实现, 例如 About 组件中接收一个 name 参数, 由 App 组件传入:

import React, { memo } from "react";// 接收一个props.name
const About = memo(({ name }) => {console.log("About is render");return <div>About: {name}</div>;
});export default About;

这个时候我们就需要借助于 useMemo 进行优化(不用 useCallback 的原因是 useCallback 作用于函数, useMemo 作用于返回值, 在这里很明显我们想要作用于函数返回的组件), 就做到了实现当 count 发生变化时, 只有 App 组件重新渲染, 而 name 属性变化时 App、Home、About 都会重新渲染:

function App() {const [count, setCount] = useState(0);// 传入About组件的状态const [name, setName] = useState("Hello");// 使用useMemo优化const about = useMemo(() => <About name={name} />, [name]);console.log("App is render");return (<div className="App">{count}<button onClick={() => setCount(count + 1)}>Increment</button><button onClick={() => setName("abc")}>Change Name</button><Home>{about}</Home></div>);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/211986.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MTU与MSS

MTU&#xff1a;一个网络包的最大长度&#xff0c;以太网中一般为1500各字节。 MSS&#xff1a;除去头部之后&#xff0c;一个网络包所能容纳的TCP数据的最大长度。 应用程序调用write后&#xff0c;将要发送的数据被交给TCP/IP协议栈进行。 协议栈不关心应用的数据内容&…

四:爬虫-Cookie与Session实战

四&#xff1a;Cookie与Session实战 ​ 在浏览网站的过程中&#xff0c;我们经常会遇到需要登录的情况&#xff0c;有些页面只有登录之后才可以访问。在登录之后可以连续访问很多次网站&#xff0c;但是有时候过一段时间就需要重新登录。还有一些网站&#xff0c;在打开浏览器…

c语言归并排序(详解)

归并排序是一种分治算法&#xff0c;它将列表分割成较小的子列表&#xff0c;然后递归地对子列表进行排序&#xff0c;最后将这些子列表合并以产生已排序的列表。基本概念包括&#xff1a; 分割&#xff1a;将列表分割成较小的子列表&#xff0c;直到子列表的长度为1或0。排序…

Leetcode—219.存在重复元素II【简单】

2023每日刷题&#xff08;五十三&#xff09; Leetcode—219.存在重复元素II 实现代码 class Solution { public:bool containsNearbyDuplicate(vector<int>& nums, int k) {unordered_map<int, int> m;int n nums.size();for(int i 0; i < n; i) {if(m…

vs的生成事件error MSB3073

生成事件设置位于&#xff1a;项目-》属性-》生成事件&#xff1b; 生成事件有&#xff1a;生成前事件、链接前事件、生成后事件 以生成前事件为例&#xff1a;可以用于一些库文件的配置 COPY ..\dll\*.* .\bin\ MKDIR .\bin\libx COPY ..\dll\libx\*.* .\bin\libx这里是在开…

[Decipher@mailfence.com].faust勒索病毒数据怎么处理|数据解密恢复

导言&#xff1a; 在数字世界的边缘&#xff0c;[support2022cock.li].faust、[tsai.shenmailfence.com].faust、[Encrypteddmailfence.com].faust、[backupsairmail.cc].faust、[Deciphermailfence.com].faust勒索病毒如同黑暗的幽灵&#xff0c;威胁着我们珍贵的数字财产。本…

漏洞复现-大华dss struts2-045表达式注入漏洞(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…

【webpack】初始化

webpack 旧项目的问题下一代构建工具 Vite 主角 &#xff1a;webpack安装webpack1&#xff0c;mode的选项2&#xff0c;使用source map 精准定位错误行数3&#xff0c;使用watch mode(观察模式)&#xff0c;自动运行4&#xff0c;使用webpack-dev-server工具&#xff0c;自动刷…

Linux_CentOS_7.9配置oracle sqlplus、rman实现上下按键切换历史命令等便捷效率功能之简易记录

配置oracle sqlplus以及rman可以上下按键切换历史命令等便捷效率功能 设置前提是已经yum安装了rlwrap软件具体软件下载及配置参考文章http://t.csdnimg.cn/iXuVK su - oracleVim .bash_profile ## 文件中增加如下的别名设置 ---------------- alias sqlplusrlwrap sqlplus…

c++的算术生成算法

#include<numeric>//算术生成算法头文件 要加的头文件#include<numeric> accumulate 是 C 标准库中的一个算法函数&#xff0c;用于计算给定范围内的数值之和&#xff0c;它位于 <numeric> 头文件中。它的函数原型如下&#xff1a; template <class In…

Matlab之带时区的日期时间数据和不带时区的日期时间数据相互转换方法

使用datetime和datetimezone函数 通过使用datetime和datetimezone函数&#xff0c;可以将带时区的日期时间数据转换为不带时区的数据&#xff0c;或者将不带时区的日期时间数据转换为带时区的数据。这样可以满足坐标区的配置要求。 1、将带时区的日期时间数据转换为不带时区的…

理解IoC容器初始化

问题&#xff1a;当自己面试或者背诵八股文时&#xff0c;会背到各种各样的spring底层的东西&#xff0c;自己越看越迷糊。 OS&#xff1a;不知道兄弟们是不是也会这样&#xff1f;如果大家没有说明我太菜了。 原因&#xff1a;就是自己学的框架越来越多&#xff0c;很多框架…

​types --- 动态类型创建和内置类型名称​

目录 动态类型创建 标准解释器类型 附加工具类和函数 协程工具函数 源代码: Lib/types.py 此模块定义了一些工具函数&#xff0c;用于协助动态创建新的类型。 它还为某些对象类型定义了名称&#xff0c;这些名称由标准 Python 解释器所使用&#xff0c;但并不像内置的 int …

代码规范及开发工具

代码规范及开发工具&#xff1a; 前端&#xff08;vscode、idea&#xff09;: JavaScript规范&#xff1a; 1. 谷歌开源项目风格指南&#xff1a;JavaScript 、TypeScript篇 https://zh-google-styleguide.readthedocs.io/en/latest/google-typescript-…

P8625.生命之树

求最大的子树之和 维护包含当前节点的最大子树之和就好了 #include<bits/stdc.h> using namespace std; using ll long long; const int N 1e610; ll w[N]; vector<int>g[N]; ll f[N]; ll res;ll dfs(int u,int father){f[u] w[u];for(auto &t:g[u]){if(tf…

2023.12.10 homework

五年级一元一次方程

C语言作业6

1.联合体也会完全浪费空间 2.在结构体中 注意好偏移量和实际是第几个的区别 那个对齐数是和偏移量有关的 (就用我之前的那个就行了) 3. 字节序 才有大小端

参数占位符#{}和${}

#是预处理而$是直接替换 Mybatis在处理#{}时&#xff0c;会将SQL中的#{}替换成占位符&#xff1f;&#xff0c;再使用preparedStatement的set方法来赋值。而Mybatis在处理 时&#xff0c;是将 {}时&#xff0c;是将 时&#xff0c;是将{}直接替换成变量的值 我们分别使用#{}和…

Redis AOF源码解析

本文取3.0版本分析&#xff08;各个版本差异很大&#xff0c;4.0以上才有aof和rdb混合模式&#xff09; 触发时机 1、bgrewriteaofCommand函数触发&#xff0c;即在Redis server服务上运行bgrewriteaof命令。 1-1、当前已经有 AOF 重写的子进程正在执行&#xff0c;重复执行bg…

JavaScript-Window对象

Window对象 BOM&#xff1a;浏览器对象模型 定时器-延时函数 JavaScript内置的一个用来让代码延迟执行的函数&#xff0c;setTimeout setTimeout(回调函数&#xff0c;等待的毫秒数);setTimeout仅仅只执行依次&#xff0c;所以可以理解为就是把一段代码延迟执行&#xff0c…