React hooks render行为实验

2024-04-09 10:38
文章标签 javascript react 行为 实验 frontend render hooks

本文主要是介绍React hooks render行为实验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述
今天放假有点空，对React的渲染(render)和hooks的行为作了几个简单的小实验，记录如下。

1. 实验准备

1.1 环境

  • Node 12.14
  • List item
  • Yarn 1.21.1
  • Chrome 80.0.3987.149

1.2 测试项目

1.2.1 项目初始化

通过 yarn create react-app test生成项目脚手架。

  • react： 16.13.0

1.2.2 组件准备

  • 根组件 APP
const App = () => {
console.log('Rendering B1...');return (<div id="app"></div>);
};
  • 组件C1
const C1 = () => {console.log('Rendering C1...');return (<div className="C1"><div>This is C1!</div></div>);
};
  • 组件C2
const C2 = () => {console.log('Rendering C2...');return (<div className="C2">This is C2!</div>);
};
  • 受控按钮组件B1, 显示的数字会根据点击次数变化
const B1 = () => {const [count, setCount] = useState(0);console.log('Rendering B1...');return (<div className="B1"><button onClick={() => setCount(count + 1)} >{count}</button></div>);
};
  • Context TestContext

2. 测试用例及结果

2.1 静态测试

步骤：

  1. 把C1 放入App,
  2. C2 放入C1
  3. 观察console输出。

结果：

Rendering App...
Rendering C1...
Rendering C2...

结论：
静态无变化，只执行渲染一次

2.2 组件状态（state）的影响

2.2.1 对组件本身及父组件

步骤：

  1. 把B1 放入App
  2. 点击B1按钮2次
  3. 观察console输出

结果：

Rendering App...
Rendering B1...
Rendering B1...
Rendering B1...

结论：
对于B1来说初始化执行渲染一次，每点击一次，本身state变化导致渲染一次。
父组件App不受B1变化影响

2.2.2 对子组件的影响

步骤：

  1. 把B1 放入App
  2. 把C1放入B1
  3. 点击B1按钮
  4. 观察console输出

结果：

Rendering App...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering C1...

结论：
对于B1的子组件C1来说初始化执行渲染一次，每点击一次，父组件state变化导致渲染一次。

2.2.4.对孙组件的影响

步骤：

  1. 把B1 放入App
  2. 把C1放入B1
  3. 把C2放入C1
  4. 点击B1按钮
  5. 观察console输出

结果：

Rendering App...
Rendering B1...
Rendering C1...
Rendering C2...
Rendering B1...
Rendering C1...
Rendering C2...

结论：
对于B1的孙组件C2来说初始化执行渲染一次，每点击一次，祖父组件state变化导致渲染一次。

2.2.4 对兄弟组件的影响

步骤：

  1. 把B1 放入App
  2. 把C1放入App
  3. 把C2放入C1
  4. 点击B1按钮
  5. 观察console输出

结果：

Rendering App...
Rendering B1...
Rendering C1...
Rendering C2...
Rendering B1...

结论：
对于B1的兄弟组件C2来说B1的State变化对它没有影响。

2.2.5 React.memo()包装

步骤：

  1. 把B1 放入App
  2. 把C1用React.memo()包装成C1m
const C1m = React.memo(C1);
  1. 把C1m放入B1
  2. 把C2放入C1
  3. 点击B1按钮
  4. 观察console输出

结果：

Rendering App...
Rendering B1...
Rendering C1...
Rendering C2...
Rendering B1...

结论：
React.memo()的包装保护了子组件，使其避免无关渲染

2.3 组件属性（props）变化的影响

2.3.1 对组件本身及父组件

步骤：

  1. 为C1增加属性p1
const C1 = ({p1}) => {console.log('Rendering C1...');return (<div className="C1"><div>This is C1! {p1}</div></div>);
};
  1. 把C1放入B1并设置其属性p1的值为B1的state “count”
<C1 p1={count} />
  1. 把B1 放入App
  2. 点击B1按钮2次
  3. 观察console输出

结果：

Rendering App...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering C1...

结论：
C1的属性变化导致其重新渲染。祖父组件不会受影响。其父组件B1因为需要渲染C1的属性变化必然也要渲染。

2.3.2 React.memo()包装

步骤：

  1. 在上一实验基础上将C1用React.memo()包装成C1m
<C1m p1={count} />
  1. 点击B1按钮2次
  2. 观察console输出

结果：

Rendering App...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering C1...

结论：
用memo包装后的C1的属性变化仍然触发了渲染。

2.3.2 React.memo()包装但不改变属性

步骤：

  1. 在上一实验基础上的C1m属性设置成不随B1的count state变化
<C1m p1={999} />
  1. 点击B1按钮2次
  2. 观察console输出

结果：

Rendering App...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering B1...

结论：
用memo包装后的C1的属性不变不会触发渲染。

2.4 useState初始化行为

2.4.1 重新渲染

步骤：

  1. 为B1的useState设置一个初始化函数
  const [count, setCount] = useState(() => {console.log('Init B1 state count.');return 0;});
  1. 把B1 放入App
  2. 点击B1按钮
  3. 观察console输出

结果：

Rendering App...
Init B1 state count.
Rendering B1...
Rendering B1...
Rendering B1...

结论：
useState的初始化函数确实只调用一次，state变化导致的重新渲染不会再次执行。

2.4.2 挂载卸载

步骤：

  1. 为C1 加个state, 设置一个初始化函数
  const [count, setCount] = useState(() => {console.log('Init C1 state count.');return 0;});
  1. 把C1放入B1， 并且让它按B1 state状态的变化而挂载/卸载
    <div className="B1"><button onClick={() => setCount(count + 1)} >{count}</button>{(count%2 === 1) && <C1 />}</div>
  1. 把B1 放入App
  2. 为B1的useState设置一个初始化函数
  const [count, setCount] = useState(() => {console.log('Init B1 state count.');return 0;});
  1. 点击B1按钮
  2. 观察console输出

结果：

Rendering App...
Init B1 state count.
Rendering B1...
Rendering B1...
Init C1 state count.
Rendering C1...
Rendering B1...Init C1 state count.
Rendering C1...

结论：
useState的初始化函数会在挂载组件时调用，每次挂载都调用一次。

2.5 useEffect行为

2.5.1 不设触发条件

步骤：

  1. 为B1设置一个effect但不加触发条件（第二个参数）
  useEffect(() => {console.log('Calling B1 effect, count='+count);});
  1. 点击B1按钮2次
  2. 观察console输出

结果：

Rendering App...
Rendering B1...
Calling B1 effect, count=0
Rendering B1...
Calling B1 effect, count=1
Rendering B1...
Calling B1 effect, count=2

结论：
不加触发条件的话每次渲染都会触发effect。

2.5.2 设触发条件为空数组

步骤：

  1. 为B1设置一个effect， 设触发条件为空数组
  useEffect(() => {console.log('Calling B1 effect, count='+count);}, []);
  1. 将B1加入App
  2. 点击B1按钮2次
  3. 观察console输出

结果：

Rendering App...
Rendering B1...
Calling B1 effect, count=0
Rendering B1...
Rendering B1...

结论：
设触发条件为空数组的话初始化时会触发effect。

2.5.2 设触发条件为属性

步骤：

  1. 为B1设置一个属性p2
  2. 为B1设置一个effect， 设触发条件为空数组
  useEffect(() => {console.log('Calling B1 effect, count='+count);}, []);
  1. 将B1加入App, 设置定时器更改属性p2
const App = () => {const [p, setP] = useState(0);console.log('Rendering App...');setTimeout(() => {setP(3)}, 3000);return (<div id="app"><B1 p2={p}/></div>);
};
  1. 点击B1按钮2次
  2. 等待定时器触发
  3. 观察console输出

结果：

Rendering App...
Rendering B1...
Calling B1 effect, p2=0
Rendering B1...
Rendering B1...
Rendering App...
Rendering B1...
Calling B1 effect, p2=3
Rendering App...

结论：
设触发条件为属性的话不仅初始化时而且属性变化时也会触发effect。
又及：最后父组件App 又触发了一次渲染，有点意外。

这篇关于React hooks render行为实验的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/887931。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...
Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果： 解密后的数据就是正常数据： 后端：使用的是spring-cloud框架，在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2