React 之 re-render的原理和优化

最新推荐文章于 2023-08-19 10:25:03 发布
最新推荐文章于 2023-08-19 10:25:03 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： hooks 文章标签： react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41718879/article/details/121862351
版权

今天看到一篇文章,关于react re-render的原理,这里记录并学习一下

对于函数组件的re-render，大致分为一下三种情况：

  • 组件本身使用useState 或者 useReducer 更新，引起的re-render;
  • 父组件更新引起子组件的re-render;
  • 组件本身使用了useContext,context更新引起的re-render;

1：组件本身使用useState 或者 useReducer 更新，引起的re-render

        1.1 常规使用

以基数组件为例，每次点击add，都会打印"re-render"，说明引起了re-render

import React, { useState } from 'react';
import './index.css';
export default function Counter() {
  console.log('re-render');

  const [count, addCount] = useState(0);
  return (
    <div className="counter">
      <div className="counter-num">{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
}

1.2 immutation state

 将上面的计数组件的state值改为引用类型，发现点击并不会引起re-render

import React, { useState } from 'react';
import './index.css';

export default function index() {
  console.log('counter render');

  const [count, addCount] = useState({ num: 0, time: Date.now() });
  const clickHandler = () => {
    count.num++;
    count.time = Date.now();
    addCount(count);
  };
  return (
    <div className="counter">
      <div className="counter-num">
        {count.num}, {count.time}
      </div>
      <button onClick={clickHandler}>add</button>
    </div>
  );
}

 这里能看到，只有在挂载阶段打印了re-render

再改一改:  setState的时候改用参数形式，也会引发re-render

import React, { useState } from 'react';
import './index.css';

export default function index() {
  console.log('counter render');

  const [count, addCount] = useState({ num: 0, time: Date.now() });
  const clickHandler = () => {
    addCount((param) => ({ num: param.num + 1, time: Date.now() }));
  };
  return (
    <div className="counter">
      <div className="counter-num">
        {count.num}, {count.time}
      </div>
      <button onClick={clickHandler}>add</button>
    </div>
  );
}

真实的原因在于，更新 state 的时候，会有一个新老 state 的比较，用的是 Object.is 进行比较，如果为 true 则直接返回不更新，源码如下（objectIs 会先判断 Object.is 是否支持，如果不支持则重新实现，eagerState 就是 oldState ）：

if (objectIs(eagerState, currentState)) {
  return;
}

所以更新 state 时候要注意，state 为不可变数据，每次需要一个新地址的值才会触发更新。

2：父组件更新引起子组件re-render 

2.1、常规使用

现在稍微改造上面计数的组件，添加一个子组件 Hello，如下点击会发现，每次都会输出 "hello render"，也就是说，每次更新都引起了 Hello 的 re-render，但是其实 Hello 组件的属性根本就没有改变：

import React, { useState } from 'react';
import './index.css';

export default function index() {
  const Hello = ({ name }) => {
    console.log('hello render');
    return <div style={{ color: 'green', fontSize: 24 }}>hello {name}</div>;
  };
  console.log('counter render');
  const [count, addCount] = useState({ num: 0, time: Date.now() });
  const clickHandler = () => {
    addCount((param) => ({ num: param.num + 1, time: Date.now() }));
  };
  return (
    <div className="counter">
      <Hello name="react" />
      <br />
      <div className="counter-num">
        {count.num}, {count.time}
      </div>
      <button onClick={clickHandler}>add</button>
    </div>
  );
}

 对于这种不必要的re-reder，是有手段进行优化的

2.2、优化组件设计

2.2.1、将更新部分抽离成单独组件

import React, { useState } from 'react';
import './index.css';

export default function index() {
  const Hello = ({ name }) => {
    console.log('hello render');
    return <div style={{ color: 'green', fontSize: 24 }}>hello {name}</div>;
  };
  return (
    <div className="counter">
      <Hello name="react" />
      <Counter />
    </div>
  );
}

// 单独抽离成组件
const Counter = () => {
  console.log('counter render');
  const [count, addCount] = useState({ num: 0, time: Date.now() });
  const clickHandler = () => {
    addCount((param) => ({ num: param.num + 1, time: Date.now() }));
  };
  return (
    <>
      <div className="counter-num">
        {count.num}, {count.time}
      </div>
      <button onClick={clickHandler}>add</button>
    </>
  );
};

 2.3、React.memo

对于是否需要 re-render，类组件提供了两种方法：PureComponent 组件和 shouldComponentUpdate 生命周期方法。

对于函数组件来说，有一个 React.memo 方法，可以用来决定是否需要 re-render，如下我们将 Hello 组件 memo 化，这样点击更新数字的时候， Hello 组件是不会 re-render 的。除非 Hello 组件的 props 更新：

import React, { useState } from 'react';
import './index.css';

//React.memo
const Hello = React.memo(({ name }) => {
  console.log('hello render');
  return <div style={{ color: 'green', fontSize: 24 }}>hello {name}</div>;
});

export default function index() {
  const [count, addCount] = useState(0);
  console.log('counter render');

  const clickHandler = () => {
    addCount(count + 1);
  };
  return (
    <div className="counter">
      <Hello name="react" />
      <div className="counter-num">{count}</div>
      <button onClick={clickHandler}>add</button>
    </div>
  );
}

 memo 方法的源码定义简略如下：

exportfunction memo<Props>(
  type: React$ElementType, // react 自定义组件
  compare?: (oldProps: Props, newProps: Props) => boolean, // 可选的比对函数，决定是否 re-render
) {
    ...
    const elementType = {
    $$typeof: REACT_MEMO_TYPE,
    type,
    compare: compare === undefined ? null : compare,
  };
    ...
  
  return elementType;
}

memo 的关键比对逻辑如下，如果有传入 compare 函数则使用 compare 函数决定是否需要 re-render，否则使用浅比较 shallowEqual 决定是否需要 re-render：

var compare = Component.compare;
compare = compare !== null ? compare : shallowEqual;

if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

既然默认不传 compare 时，用的是浅对比，那么对于引用类的 props，就要注意了，尤其是事件处理的函数，如下，我们给 Hello 组件添加一个点击事件，这时我们发现每次点击计数，Hello 组件又开始 re-render 了：

import React, { useState } from 'react';
import './index.css';

//React.memo
const Hello = React.memo(({ name }) => {
  console.log('hello render');
  return <div style={{ color: 'green', fontSize: 24 }}>hello {name}</div>;
});

export default function index() {
  const [count, addCount] = useState(0);
  console.log('counter render');

  const clickHandler = () => {
    addCount(count + 1);
  };
  // Hello组件添加点击事件
  const helloClick = () => {
    console.log('Hello组件点击回调~~~');
  };

  return (
    <div className="counter">
      <Hello name="react" onClick={helloClick} />
      <div className="counter-num">{count}</div>
      <button onClick={clickHandler}>add</button>
    </div>
  );
}

 这是因为每次点击计数，都会重新定义 clickHandler 处理函数，这样 shallowEqual 浅比较发现 onClick 属性值不同，于是将会进行 re-render。

2.3.1、useCallback

在上面的基础上，我们阔以用useCallback将定义的函数缓存起来，也不会触发re-render

import React, { useState } from 'react';
import './index.css';

//React.memo
const Hello = React.memo(({ name }) => {
  console.log('hello render');
  return <div style={{ color: 'green', fontSize: 24 }}>hello {name}</div>;
});

export default function index() {
  const [count, addCount] = useState(0);
  console.log('counter render');

  const clickHandler = () => {
    addCount(count + 1);
  };
  // 使用useCallback缓存
  const helloClick = React.useCallback(() => {
    console.log('Hello组件点击回调~~~');
  }, []);

  return (
    <div className="counter">
      <Hello name="react" onClick={helloClick} />
      <div className="counter-num">{count}</div>
      <button onClick={clickHandler}>add</button>
    </div>
  );
}

useCallback 的原理主要是在挂载的时候，将定义的 callback 函数及 deps 依赖挂载该 hook 的 memoizedState，当更新时，将依赖进行对比，如果依赖没变，则直接返回老的 callback 函数，否则则更新新的 callback 函数及依赖：

// 挂载时
function mountCallback(callback, deps) {
  var hook = mountWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

// 更新时
function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];

      // 如果依赖未变，则直接返回老的函数
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  // 否则更新新的 callback 函数
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

 看起来好像是没问题了，但是如果我们在刚才 callback 函数中使用了 count 这个 state 值呢？

  // 使用useCallback缓存 并且使用count
  const helloClick = React.useCallback(() => {
    console.log('Hello组件点击回调~~~', 'count: ', count);
  }, [count]);

当我们点击了几次计数，然后再点击 Hello 组件时，会发现我们打印的 count 还是挂载时候的值，而不是最新的 count 值。其实，这都是是闭包惹得祸（具体解释可参考：Be Aware of Stale Closures when Using React Hooks）。所以为了让 callback 函数中可以使用最新的 state，我们还要将该 state 放入 deps 依赖，但是这样依赖更新了，callback 函数也将会更新，于是 Hello 组件又将会 re-render，这又回到了从前。

 这样我们得出了一个结论：

当 callback 函数需要使用 state 值时，如果是 state 值更新引起的更新，useCallback 其实是没有任何效果的。

 其实react底层已经做了一些性能优化处理,就比如批量更新等等，但是我们在使用的时候也得注意下这些问题，

React和vue的另一个突出区别就是: vue底层已经最大限度的把性能优化给做了,不需要程序员去考虑性能问题,而React有一部分性能优化是留给了程序员,有没有这个感觉?

superTiger_y
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-schema-render:react-schema-render是一个通用型schema转React组件的工具组件
04-05
快速入门第1步：安装yarn add react-schema-render # npm install react-schema-render -S第2步：建立组件映射关系我们以ant-design的作为示例（只是为了好看，其和具体的UI库无关）。 # yarn add antd import { ...
react-native-render-html：iOSAndroid纯javascript react-native组件，可将HTML呈现为100％的本机视图
01-30
react-native-render-html 基于（ 的原始作品，为他提供了道具。 一个iOS / Android纯javascript react-native组件，可将您HTML呈现为100％本机视图。 它具有极高的可定制性和易用性，旨在能够渲染您扔给它的任何...
reRender属性的使用
周二也被占用
09-08 4765
我遇到了一个问题： 我在后台已经确定给一个变量赋值了，但是前台页面上仍显示初始化的值，而并不是我赋的值。 解决方法： 使用reRender属性。 比如 这个属性会把id为number的元素重新渲染一遍。 如果是一个会显示后台数据的元素，则会重新去后台取数据。 如： Reference： a4j（Ajax 4 jsf）的使用指南
React render方法的原理，在什么时候会触发
weixin_70238574的博客
08-19 481
状态变化：如果组件的状态（state）发生变化，React 会触发组件的 render 方法进行重新渲染。属性变化：如果组件的属性（props）发生变化，React 会调用组件的 render 方法进行重新渲染。这意味着父组件传递给子组件的属性发生变化时，子组件的 render 方法会被调用。在 React 中，当组件的状态或属性发生变化时，会触发组件的重新渲染过程。首次渲染：当组件被实例化并添加到 DOM 中时，React 会首次调用 render 方法，将返回的元素渲染到指定的位置上。
React学习1-2 render渲染原理
m0_37780367的博客
05-13 547
JSX语法糖转换成Javascript对象结构 import React from 'react' import ReactDOM from 'react-dom' let ele = <div><span> hello word </span></div> ; console.log(ele); //等价于 //标签类型 属性对象 子元素 let ele1 = React.createElement('div', null, [React.createEl
深入了解React组件重新渲染的条件和生命周期
weixin_30832351的博客
04-02 488
React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true，那么当前组件会rerender 组件的props中的任一属性的值有变化(即使这个任一属性的值是对象，变化的仅仅是该对象中的某属性的值，此刻也算props发生了变化)且当前组件的shouldcomponentupdate return true时且当期组件...
深入 React 函数组件的 re-render 原理及优化
趣谈前端
12-10 467
职业规划高级前端可视化低代码点击上方趣谈前端，关注公众号回复进群，加入前端交流群对于函数组件的 re-render，大致分为以下三种情况：组件本身使用useState或us...
react-emoji-render：规范化并渲染表情符号，这是用户期望的方式
02-04
React表情符号 规范化并渲染表情符号，这就是... npm install react-emoji-render --save yarn add react-emoji-render 基本用法 默认情况下，该组件会将所有不同的emoji表情符号标准化为本地unicode字符。 import Emo
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-lazily-render:延迟安装昂贵的组件，直到将占位符组件滚动到视图中为止
05-06
npm install --save react-lazily-render 用法 （） import React from 'react' ; import LazilyRender from 'react-lazily-render' ; ...lots of content... < LazilyRender xss=removed> } content = { ...
Salesforce中reRender和rendered控件的使用
qq_33657664的博客
03-01 597
导航： 1.reRender控件 2.rendered控件 3.代码演示 reRender控件 用途：局部刷新 这个属性的value值是组件的ID值，可以是一个或多个ID，多个ID用’,'隔开。 rendered控件 用途：可以控制一个控件在页面上是否能显示出来。 这个属性的value是一个Boolean值。如果是true，控件会在页面上显示，否则，不会在页面上显示。 代码演示 <apex:page standardController="ChannelPrice__c" extensions="Te
SF ：Salesforce中，reRender控件和rendered控件的使用
weixin_34396103的博客
07-25 277
reRender:用途：局部刷新 这个属性的value值是组件的ID，可以是一个或多个ID，多个ID用','隔开。rendered:用途：可以控制一个控件是页面上是否能显示出来。这个属性的value是一个Boolean值。如果是true，控件会在页面上显示，否则，不会在页面上显示。reRender与rendered的联合使用：不能在一个控...
React component re-render
weixin_33797791的博客
07-11 348
由列表优化谈起re-renderwhy re-render?这两天在看项目的渲染优化题，决定总结一下，发现不论是代码写法和组件规划以及列表之间的交互，都是有可能会引起性能问题的罪魁祸首。首先分析一下，组件何时更新？为何更新？how does React decide to re-render a componentcomponent state change举个栗子：class Test exte...
React 源码分析-调用ReactDOM.render后发生了什么
cao_dan的博客
08-16 4654
我们知道, 对于一般的React 应用, 浏览器会首先执行代码 ReactDOM.render来渲染顶层组件, 在这个过程中递归渲染嵌套的子组件, 最终所有组件被插入到DOM中. 我们来看看 调用ReactDOM.render 发生了什么 大致过程(只展示主要的函数调用): 1、创建元素 首先, 对于你写的jsx, Babel会把这种语法糖转义成这样: // jsx ReactDO...
react中ref使用方法解析
weixin_45745641的博客
03-17 1843
组件不是真实的DOM节点,在react开发中,官方也不建议直接去操作原生的DOM。组件的DOM节点是存在于内存中的一种数据结构,叫做虚拟DOM。如果需要从组件中获取真实的DOM节点,那就需要官方提供ref的属性。React提供了ref用于访问在render方法中创建的DOM元素或者是React的组件实例。 ref分为三种，我们这里先学两种。 string类型 看下面的小例子：点击按钮能够把输入框的值赋值给下面的p标签
彻底弄懂react ref
qq_43742385的博客
07-07 716
react refreact ref1. 前言2. 什么时候需要使用ref3. ref 的使用方式（三种）字符串形式ref回调函数的形式React.createRef()创建一个`ref`将一个`ref`赋值给某个组件或者`dom`节点使用这个`ref`useRef()ref转发（React.forwardRef） react ref 1. 前言 如果有这么一种情况，我们需要在一个组件获取另一个组件或者某个DOM元素，这个时候我们应该怎么做呢。react中的Refs 提供了一种方式，允许我们访问 DOM 节
react实现再调render时,子组件如何重新更新
weixin_34235135的博客
04-11 2929
通过给子组件添加不同的key即可,每次父组件执行rend方法时,发现key不同就会重新加载子组件 key=Math.random() 转载于:https://www.cnblogs.com/emma-zhao/p/10687393.html...
奇舞周刊第 465 期： 一份详尽的 React re-render 指南
奇舞周刊
09-23 567
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■一份详尽的 React re-render 指南本文是一篇比较详尽的 React re-render 指南，会着重介绍和解答以下问题：什么是 re-render、哪些是必要或非必要的 re-render、什么条件能够触发 React 组件 re-render。除此之外，还会介绍一些避免 re-rende...
React（五）：React在什么情况下会render
热门推荐
MR洁儿的博客
12-19 1万+
React中组件进行render的情况 1、初始化 React在应用初始化的时候，会渲染全部组件，组件的挂载过程见文章《React（三）：组件生命周期》中的介绍。 2、setState()在任何情况下都会导致组件的重新渲染，即使state未发生变化 当一个组件调用了setState()函数时，不论state是否发生了变化，该组件都将被重新渲染。 例如： import React fr...
react-router-dom5和react-router-dom6的区别
最新发布
03-30
1. 安装方式：React Router DOM 5使用npm包管理器进行安装，命令为`npm install react-router-dom`。而React Router DOM 6使用yarn进行安装，命令为`yarn add react-router-dom@next`。 2. 路由组件：在React ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

superTiger_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值