首页 > 资讯 > 前端开发 > JavaScript >减少react组件不必要的重新渲染实现方法

827

分享到

减少react组件不必要的重新渲染实现方法

减少react组件重新渲染 react 重新渲染 2023-01-09 12:01:19 827人浏览泡泡鱼

摘要

目录什么是重新渲染不必要的重新渲染React组件重新渲染情况state变化父组件的重新渲染context变化在组件内创建组件一些减少重新渲染的方法useState初始值使用函数形式重

什么是重新渲染

react重新渲染是当你的组件已经渲染在屏幕上，由于数据状态变化，又重新触发了组件的渲染。重新渲染是正常现象，但有时由于自身代码问题造成不必要的重新渲染。

不必要的重新渲染

由于错误的代码引发组件的重新渲染。例如：与react组件本身无关的状态变化引起的组件的重新渲染。虽然react组件重新渲染了，但由于渲染很快，通常用户并不会感知到。但如果重新渲染发生比较复杂的组件上，可能会导致界面卡顿，甚至造成长时间的卡死现象。

react组件重新渲染情况

组件的重新渲染分为以下几种情况：

state变化

count变化会引起组件的重新渲染。

const App = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count+1)
  }
  return <div onClick={handleClick}>{count}</div>
}

父组件的重新渲染

当组件的父组件重新渲染时，该组件必定重新渲染。一般情况下子组件的渲染不会触发父组件的渲染。

实际上props变化也是由于父组件状态变化引起的，只要父组件重新渲染，子组件不管props有没有变化都会重新渲染。（没有使用优化时）

import { useState } from "react";
const Child = () => {
  console.log("子组件重新渲染");
  const [childCount, setChildCount] = useState(0);
  const handleChildClick = () => {
    setChildCount(childCount + 1);
  };
  return (
    <>
      <div onClick={handleChildClick}>Child {childCount}</div>
    </>
  );
};
export default function StateChange() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  console.log("父组件重新渲染", count);
  return (
    <div>
      <div onClick={handleClick}>parent {count}</div>
      <Child />
    </div>
  );
}

context变化

当context的Provider提供的值放生变化，所有使用该context的组件都将重新渲染。

import { createContext, useState, useContext, useMemo } from "react";
const Context = createContext({ val: 0 });
const Provider = ({ children }) => {
  const [val, setVal] = useState(0);
  const handleClick = () => {
    setVal(val + 1);
  };
  const value = useMemo(() => {
    return {
      val: val
    };
  }, [val]);
  return (
    <Context.Provider value={value}>
      {children}
      <button onClick={handleClick}>context change</button>
    </Context.Provider>
  );
};
const useVal = () => useContext(Context);
const Child1 = () => {
  const { val } = useVal();
  console.log("Child1重新渲染", val);
  return <div>Child1</div>;
};
const Child2 = () => {
  const { val } = useVal();
  console.log("Child2重新渲染", val);
  return <div>Child2</div>;
};
export default function ContextChange() {
  return (
    <Provider>
      <Child1 />
      <Child2 />
    </Provider>
  );
}

在组件内创建组件

❌：这种做法非常消耗性能。当组件重新渲染，内部组件都会重新mount。这种做法容易导致很多bug出现。

import { useState, useEffect } from "react";
const Component = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  const InComponent = () => {
    console.log("内部组件重新渲染");
    useEffect(() => {
      console.log("内部组件重新mount");
    }, []);
    return <div>inComponent</div>;
  };
  return (
    <>
      <button onClick={onClick}>点我</button>
      <InComponent />
    </>
  );
};
export default function ComInComponent() {
  return (
    <>
      <Component />
    </>
  );
}

一些减少重新渲染的方法

useState初始值使用函数形式

看一个例子：useState的初始值经过a + 1计算得到: 此时的useState的参数是一个函数执行，也就是一个值

import { useState } from "react";
function getInitState() {
  console.count("获取初始化的值");
  const a = 1;
  return a + 1;
}
const App = () => {
  const [value, setValue] = useState(getInitState());
  const onChange = (event) => setValue(event.target.value);
  return <input type="text" value={value} onChange={onChange} />;
};
export default App;

当我们在input中继续输入，可以看到getInitState的console次数：

当我们把useState第一个参数改为函数时：（该函数会自动调用）

import { useState } from "react";
function getInitState() {
  console.count("获取初始化的值");
  const a = 1;
  return a + 1;
}
const App = () => {
  const [value, setValue] = useState(getInitState);
  const onChange = (event) => setValue(event.target.value);
  return <input type="text" value={value} onChange={onChange} />;
};
export default App;

该函数只会在初始化的时候调用一次：

重新组织组件结构

提取单独的组件，独自维护自己的状态，防止发生不必要的渲染。

import { useState } from "react";
const BiGComponent = () => {
  console.log("一个非常复杂的大组件：渲染了");
  return <div>BigComponent</div>;
};
const AllComponent = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次数: {state}</p>
      <button onClick={onClick}>点我</button>
      <BigComponent />
    </>
  );
};
const ButtonComponent = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次数: {state}</p>
      <button onClick={onClick}>点我</button>
    </>
  );
};
const SplitComponent = () => {
  return (
    <>
      <ButtonComponent />
      <BigComponent />
    </>
  );
};
const App = () => {
  return (
    <>
      <p>AllComponent是没有重新组织的组件</p>
      <AllComponent />
      <hr />
      <p>SplitComponent是重新组织划分的组件, 不会触发大组件BigComponent的渲染</p>
      <SplitComponent />
    </>
  );
};
export default App;

巧用props.children

利用props.children 来减少不必要的重复渲染。

import { useState } from "react";
const BigComponent = () => {
  console.log("一个非常复杂的大组件：渲染了");
  return <div>BigComponent</div>;
};
const AllComponent = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次数: {state}</p>
      <button onClick={onClick}>点我</button>
      <BigComponent />
    </>
  );
};
const ComponentWithChildren = ({ children }) => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次数: {state}</p>
      <button onClick={onClick}>点我</button>
      {children}
    </>
  );
};
const SplitComponent = () => {
  return (
    <ComponentWithChildren>
      <BigComponent />
    </ComponentWithChildren>
  );
};
const App = () => {
  return (
    <>
      <p>AllComponent是没有重新组织的组件</p>
      <AllComponent />
      <hr />
      <p>
        SplitComponent是巧用了children的组件, 不会触发大组件BigComponent的渲染
      </p>
      <SplitComponent />
    </>
  );
};
export default App;

把组件当成props传递

把组件当成props传递给其他组件，也可以减少渲染。(与children类似)

import { useState } from "react";
const BigComponent = () => {
  console.log("一个非常复杂的大组件：渲染了");
  return <div>BigComponent</div>;
};
const AllComponent = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次数: {state}</p>
      <button onClick={onClick}>点我</button>
      <BigComponent />
    </>
  );
};
const ComponentWithProps = ({ comp }) => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次数: {state}</p>
      <button onClick={onClick}>点我</button>
      {comp}
    </>
  );
};
const comp = <BigComponent />;
const SplitComponent = () => {
  return (
    <>
      <ComponentWithProps comp={comp} />
    </>
  );
};
const App = () => {
  return (
    <>
      <p>AllComponent是没有重新组织的组件</p>
      <AllComponent />
      <hr />
      <p>
        SplitComponent是把组件当成props传递, 不会触发大组件BigComponent的渲染
      </p>
      <SplitComponent />
    </>
  );
};
export default App;

React.memo

memo 减少重复渲染，只要子组件的props没有改变（浅比较）。

import { useState, memo } from "react";
const Child = () => {
  console.log("子组件重新渲染");
  return (
    <>
      <div>Child</div>
    </>
  );
};
const MemoChild = memo(Child);
export default function ReactMemo() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <div onClick={handleClick}>parent {count}</div>
      <MemoChild />
    </div>
  );
}

如果props是一个object， array 或者 function，memo必须配合useMemo来缓存，单独使用都不起作用。

当然也可以单独使用useMemo缓存整个组件。

import React, { useState, useMemo } from "react";
const Child = ({ value }) => {
  console.log("Child重新渲染", value.value);
  return <>{value.value}</>;
};
const values = [1, 2, 3];
const UseMemp = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  // 使用useMemo缓存组件
  const items = useMemo(() => {
    return values.map((val) => <Child key={val} value={{ value: val }} />);
  }, []);
  return (
    <>
      <button onClick={onClick}>点我 {state}</button>
      <br />
      {items}
    </>
  );
};
export default UseMemp;

useCallback

函数传递可以使用useCallback来缓存函数。

key值

在循环数组时，有人使用index作为key，可以这样做，但是你要保证你的数组是静态的，没有新增，删除，插入，排序等情况，否则不能使用index作为key。

完整的代码：

codesandbox.io/s/hidden-me…

参考

reactjs.org/docs/hooks-…

medium.com/@guptagarud…

以上就是减少react组件不必要的重新渲染实现方法的详细内容，更多关于减少react组件重新渲染的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 减少react组件不必要的重新渲染实现方法

本文链接: https://www.lsjlt.com/news/177154.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

减少react组件不必要的重新渲染实现方法

目录什么是重新渲染不必要的重新渲染react组件重新渲染情况state变化父组件的重新渲染context变化在组件内创建组件一些减少重新渲染的方法useState初始值使用函数形式重...

99+

2023-01-09

减少react组件重新渲染 react 重新渲染
React实现控制减少useContext导致非必要的渲染详解

目录前言1.拆分context2.使用useMemo包裹函数前言在我们使用useContext来进行数据流管理时，每当context更新时，所有使用到该context的组件都会重新...

99+

2022-11-13

React useContext React useContext渲染
React中的重新渲染实现

目录缘起类组件React 合成事件定时器回调后触发 setState异步函数后调触发 setState原生事件触发setState 修改不参与渲染的属性只是调用 setState，页...

99+

2023-01-31

React 重新渲染
提高网页渲染：减少HTML回流和重绘的方法

优化网页渲染：如何最小化HTML回流和重绘，需要具体代码示例在Web开发中，网页的渲染性能是一个非常关键的问题。当用户访问一个网页时，浏览器需要将HTML、CSS和JavaScript解析后渲染出来，呈现给用户。不过，渲染过程...

99+

2024-01-26

渲染优化 HTML回流重绘最小化
Vue中关于重新渲染组件的方法及总结

目录重新渲染组件的方法总结重新加载整个页面使用forceUpdate总结重新渲染组件的方法总结有时Vue的反应性系统还不够，您只需要重新渲染组件即可。重新渲染组件有以下...

99+

2022-12-03

Vue重新渲染组件 Vue重新渲染 Vue渲染组件
父组件中vuex方法更新state子组件不能及时更新并渲染怎么办

这篇文章主要为大家展示了“父组件中vuex方法更新state子组件不能及时更新并渲染怎么办”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“父组件中vuex方法更新...

99+

2024-04-02
Vue3将组件手动渲染到指定元素中的方法实现

目录将组件转换为自定义元素Vue 的多应用实例一些第三方库内部创建的元素，并不是由 Vue 管理的。比如 ECharts，Antv 等图表库中的自定义图形节点。这些库或许支持使用 H...

99+

2023-05-17

Vue3 渲染组件 Vue3 组件渲染到指定元素
vue实现动态表单动态渲染组件的方式(1)

vue 实现动态表单/动态渲染组件的方式（一），供大家参考，具体内容如下思路先写好各个可能会出现的表单或者自定义的组件，引入。此时后端可能会给到一个对象型数组，每个对象有要渲染组...

99+

2024-04-02
vue实现动态表单动态渲染组件的方式(2)

本文实例为大家分享了vue实现动态表单动态渲染组件的方式，供大家参考，具体内容如下思路先把所有可能出现的表单/组件写在主页面每个表单/组件的slot 属性值要与后端返回的表单/组...

99+

2024-04-02
React父子组件传值(组件通信)的实现方法

目录1、父组件传值子组件2、子组件传值父组件3、兄弟组件传值1、父组件传值子组件在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个para...

99+

2024-04-02
React实现组件全屏化的操作方法

介绍本文基于React+antd，给大家演示一个完整的全屏demo。起因是开发今天给我提了一个sql编辑器输入框比较小，不支持放大，不太方便。希望能够全屏显示，联想到自己以后可能...

99+

2024-04-02
React中如何传入组件的props改变时更新组件的几种实现方法

这篇文章将为大家详细讲解有关React中如何传入组件的props改变时更新组件的几种实现方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。何时使用派生状态咱们先来看一个比...

99+

2024-04-02
React组件创建与事件绑定的实现方法

目录1、组件创建方式方式一-函数创建组件方式二-使用类创建组件2、事件绑定方式一-类组件绑定事件方式二-函数组件绑定事件周末在家，练习React，记录下来，方便查看。本期学习Rea...

99+

2022-12-26

React组件创建 React事件绑定
React Native自定义标题栏组件的实现方法

大家好，今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实提高了开发效率。标题栏是大多数应用界面必不可少的一部分，将标题栏剥离出来做成一个组件很有必...

99+

2023-05-31

react native 标题栏
react中ref获取dom或者组件的实现方法

目录react中ref获取dom或者组件方法使用ref获取DOM的引用使用ref获取组件的引用react中的三种ref获取DOM节点第一种 ref字符串方式获取Dom节点方式第二种 ...

99+

2023-05-20

react中的ref react中ref获取dom react中ref获取组件
React中实现keepalive组件缓存效果的方法详解

目录背景结构代码背景由于react官方并没有提供缓存组件相关的api（类似vue中的keepalive），在某些场景，会使得页面交互性变的很差，比如在有搜索条件的表格页面，点击某一...

99+

2023-01-14

React keepalive组件缓存效果 React keepalive组件缓存 React keepalive缓存 React keepalive
函数重写与抽象方法：理解子类实现父类抽象方法的必要性

函数重写允许子类重新定义父类方法，而抽象方法强制子类实现父类的未实现方法。子类实现父类抽象方法至关重要，因为它：提高代码的灵活性和可扩展性；减少代码冗余并促进重用；增强可测试性，允许轻松...

99+

2024-05-03

抽象方法函数重写 python
vue父子组件传值不能实时更新的解决方法

最近做项目，遇到个大坑，这会爬出来了，写个总结，避免下次掉坑。 vue父子组件传值不能实时更新问题，父组件将值传给了子组件，但子组件显示的值还是原来的初始值，并没有实时更新，为什么会...

99+

2023-05-20

父子组件传值 vue vue父传子值实时更新 vue 组件之间传值
Vue实现父子组件页面刷新的几种常用方法

目录1、原地页面重新加载（不推荐）2、空白页面作为过渡3、使用Provide / Inject组合控制显示4、v-on:param父组件监听子组件事件参考文档：很多时候我们在操作过页...

99+

2024-04-02
Win10通过命令实现自动关机不需要其他软件的方法

　　Win10上能够实现自动关机的方法有不少，包括使用一些小软件来进行。其实不用这么麻烦，通过运行命令就可以完成。下面小编就向大家介绍这一方法。　　一、定时关机操做方法　　按下Win+R组合键，在运行命令中输入&ld...

99+

2023-06-13

Win10 命令自动关机方法