React hooks render行为实验

最新推荐文章于 2022-10-17 13:16:44 发布
最新推荐文章于 2022-10-17 13:16:44 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 前端 文章标签： react hooks render
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/time1812/article/details/105337986
版权

在这里插入图片描述
今天放假有点空，对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 又触发了一次渲染，有点意外。

时间1812
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React hooks中节流的处理
qq_37473645的博客
11-17 3497
背景：采用React hooks来进行开发，确认自己写的节流函数没有问题后，在获取取手机验证码的操作中，快速多次点击按钮“获取手机验证码”，仍然造成多次发送请求。 如图，快速连续点击获取验证码按钮，发送了三个getcode的请求 解决此问题一般采用节流解决 节流 节流：在规定时间内，函数只执行一次。例如，2秒内点击同一按钮多次，但按钮所绑定的事件只执行一次。2秒后，按钮又被点击的话，函数在点击后的2秒内又只执行一次，不点击就不执行。 原理：闭包。节流一般有两种实现方式，时间戳和定时器。 用时
React Hooks实践应用
阳光、男孩
06-08 529
React16.8 发布已经很长世间, 这段时间项目不忙, 正好准备使用 React Hooks 进行重构升级。React Hooks 的特性是它可以让你在不编写 class 的情况下使用 state 以及其他的 React 的特性,下面来让我们一起进入 React Hooks的新特性实践吧！ React Hook 特性 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。 100% 向后兼容的。 Hook 不包含任何破坏性改动。 现.
关于React Hooks使用时函数render的问题
wdhxs的博客
04-01 1751
React Hooks 文章目录React Hooks前言一、有可能造成re-renders问题二、函数组件中父组件如何获取子组件的实例或者DOM元素1.父组件2.子组件 前言 在使用函数组件时，当组件的state（使用hook获得的）或者props发生变化时会引起函数组件的重新执行和渲染。 一、有可能造成re-renders问题 App.js function App() { const [total, setTotal] = useState(1); console.log("app rende
React Hooks详解
duansamve的博客
10-14 4465
React的函数式组件式本身是没有状态的和其他类似于class组件的功能，所以一开始，函数组件一般只作为容器组件存在，用来展示父级组件传入的值。而16.8之后出现的 hooks(钩子)，打开了函数式组件的新大门。 useState 作用：用来记录函数式组件的状态。 使用方式： import React, { useState } from 'react' const [n, setN] = React.useState(0) 例子： import React, {useState} from
React中高阶组件、Render props、hooks
weixin_57541666的博客
10-24 2267
这三者都是react中解决代码复用的主要方式： 1、HOC 在官方解释中： 高阶组件（HOC）是 React 中复用组件逻辑的一种高级技巧。HOC自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的一种设计模式。 简而言之，HOC 是一种组件的设计模式，HOC 接收一个组件和额外的参数，返回一个新的组件。HOC 是纯函数，没有副作用。 function withSubscription(WrappedComponent, selectData) { re
React Hook 笔记总结
qq_19266669的博客
06-02 138
原文地址: https://zh-hans.reactjs.org/blog/2020/05/22/react-hooks.html 在本文中，我们给函数式组件的函数起个简单一点的名字：render 函数。 在本文中，为了方便描述，对于 render 函数的每次调用，我想称它为一帧。 每一帧拥有独立的变量 function Example(props) { const { count } = props; const handleClick = () => { setT
react hook 机制
TinaSprunt的开发笔记
03-14 400
react hook 机制 本来没怎么用react，因为之前在改一些开源项目bug的时候，发现很多地方力不从心，特别是当一些组件变得越来越复杂到处是状态逻辑和副作用，每个生命周期包含一些不相关的逻辑，为了符合生命周期不得不将业务逻辑相关的代码拆分，这样搞起来很烦还容易出bug，于是请教前辈的时候前辈建议我了解下hook的原理，hook 的存在就是为了处理组建内部状态问题（当然也有可能不止） 一个 usestate hook 实例 这里useState就是一个最简的 hook，初始 state 就是 0。不同
react-render-time:React钩子检查渲染组件所需的时间
04-24
React渲染时间React钩子检查渲染所需的时间演示版安装yarn add react-render-time用法import React from "react"import useRenderTime from "react-render-time"const App = ( ) => { useRenderTime ( "App" ) ...
react-modal-hook:使用React Hooks来处理模态的语法糖
05-02
使用React Hooks处理模态窗口的语法糖。 该库不提供任何UI，但是提供了一种方便的方法来呈现在其他地方定义的模式组件。 对于简单的模态组件，请查看 ，它与该库配合使用。 目录 安装 npm install --save react-...
react-react-redux：使用React Hooks和Proxy的React Redux绑定
02-05
react-react-redux v5-alpha（此存储库）：具有useMutableSource的实验性react-redux绑定。 它提供了useTrackedState，它可以跟踪render中状态的使用，它最初是在此repo中提出的。 ：该项目将为useTrackedState...
do-react:一个小型的React实验
05-02
欢迎！ 这是一个小项目，可让您使用React。 如果您以前没有使用过React，请不要担心-文档很棒，样板工作已经为您完成。 通过编辑Child.jsx和styles.css ，创建一个React组件来展示您的个性和/或兴趣。 可以是任何东西！ 子组件具有三个道具。 您可以使用它们的任何组合，也可以完全不使用！ 这完全取决于您。 道具： color ：包含十六进制颜色值的字符串 blink ：一个布尔值，它会在一定间隔内在true和false之间转换 changeColor ：一个函数，当被调用时，它会改变颜色值 目标： 建立一些有趣的东西 显示您的编码风格 彰显你的个性 讨论您所做的选择 限制条件： 仅编辑src/components/Child.jsx和src/styles.css 不要编辑其他文件或安装其他依赖项 不要创建其他文件 脚步： 转到 单击顶部工具栏中
react-class-hooks:对类组件的React Hooks实现。支持React> = 15.3.2
03-19
对类组件的React Hooks实现。支持React> = 15.3.2 安装 使用 ： $ npm install --save react-class-hooks 或： $ yarn add react-class-hooks React15.3.2-需要15.6.2 polyfill 对于React版本15.3.2至15.6.2，您...
React Hooks 实现和由来以及解决的问题详解
01-19
与React类组件相比，React函数式组件究竟有何不同？ 一般的回答都是： 类组件比函数式组件多了更多的特性，比如 state，那如果有 Hooks 之后呢？ 函数组件性能比类组件好，但是在现代浏览器中，闭包和类的原始性能...
React-Hook最佳实践
xiaofeng123aazz的博客
10-17 354
HookuseState可以实现类似state和setState的效果useEffect可以实现这几个生命周期的功能，并且写法更加简单，在每次渲染后都会触发，触发的条件是依赖项有改变useRef返回一个引用，每次渲染都返回同一个对象，和类组件this属性一致返回一个记忆化的回调函数，在依赖项改变的时候，回调函数会修改，否则返回之前的回调函数，对于一些需要传给子组件的函数，可以使用这个，避免子组件因为回调函数改变而改变useMemo返回一个记忆化的值，依赖项改变，返回的值才会变，可用来记忆化值，和Vue。
React 高阶组件、Render props、hooks 有什么区别
qq_45715615的博客
03-19 2124
这三者是目前react解决代码复用的主要方式： 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。 render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，更具体的说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。 通常，render props 和高
React 父子组件数据变化实时更新
Cupid
02-24 4235
父组件数据变化，子组件数据更新方法： 利用componentWillReceiveProps方法 componentWillReceiveProps(nextProps){ this.setState({ isLogin: nextProps.isLogin, userInfo: nextProps.userInfo, }); } 子组件数据变化，通知父组件 // 父组件： <FromCom demo={this.demo} /> //子组件：利用se
React源码解析————ReactHooks（一）
m0_51744158的博客
11-07 530
React源码解析————ReactHooks.js2021SC@SDUSC 2021SC@SDUSC 2021SC@SDUSC
React Hooks各种函数介绍
weixin_50337713的博客
05-21 477
useState: useState 是用于声明一个状态变量的，用于为函数组件引入状态. useState 只接收一个参数，这个参数可以是数字、字符串、对象等任意值，用于初始化声明的状态 变量。也可以是一个返回初始值的函数，最好是函数，可在渲染时减少不必要的计算。 返回一个长度为2的读写数组，数组的第一项是定义的状态变量本身，第二项是一个用来更新该状 态变量的函数，约定是 set 前缀加上状态的变量名. useState Hook 中返回的 setState 并不会帮我们自动合并对象状态的属性; setSt
HTML5小游戏动手做（一）：简单的连连看
热门推荐
time1812的专栏
03-11 2万+
从本篇起，我将在此展示制作一些HTML5小游戏的过程和经验。本文描述的是一个经典又简单的小游戏，连连看。 1. 计划 1.1 目标 快速建立一个连连看游戏原形。 能玩就行。 1.2 游戏特性介绍 游戏展示一个m * n大小的表格 表格每个格子里面有一个图标/符号 每个图标都是成对出现 玩家需要找到每对匹配的图标/符号 如果玩家选中的两个图标/符号匹配并且其连线转折次数小...
react native和reacthooks
最新发布
08-28
通过减少不必要的render，React Hooks可以提供更高效的应用程序。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [React Native API变成了React Hooks，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值