脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 组件状态下移

React 组件的状态下移和内容提升的操作方法

 更新时间：2022年11月26日 15:06:41   作者：前端小二哥  
这篇文章主要介绍了React 组件的状态下移和内容提升,通过代码讲解了渲染性能的组件问题结合实例代码给大家讲解的非常详细，需要的朋友可以参考下

前言

本专栏的另一篇文章，讲到了 useMemo 有一定的开销，不能滥用，本篇文章讲解两个简单实用的优化组件渲染性能的方法：

  • 状态下移
  • 内容提升

在讲解这两种方法之前，我们需要先手动创建一个有严重渲染性能的组件，如下所示：

import { useState } from 'react';

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

function ExpensiveTree() {
  let now = performance.now();
  while (performance.now() - now < 100) {
    // Artificial delay -- do nothing for 100ms
  }
  return <p>I am a very slow component tree.</p>;
}

很显然，当 App 组件内的状态发生了改变，ExpensiveTree 组件会 re-render， 事实上 ExpensiveTree 组件的 props、state 并未发生改变，这并不是我们期望的结果，下面将提供两种简单的方法，提升组件渲染的性能；

状态下移

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

我们可以看到以上 ExpensiveTree 组件并不依赖 App 组件内部的状态，因此我们是否可以考虑，将依赖 color 的元素抽离到一个依赖 color 的组件中呢？
下面是实践后的代码：

export default function App() {
  return (
    <>
      <Form />
      <ExpensiveTree />
    </>
  );
}

function Form() {
  let [color, setColor] = useState('red');
  return (
    <>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
    </>
  );
}

此时，将依赖 color 的元素提取到了 Form 组件中，Form 组件内部的状态不再影响 ExpensiveTree 组件的渲染，问题便得到了解决

内容提升

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

以上情况是高开销组件 ExpensiveTree 的父节点依赖 color，此时显然状态下移是行不通的，但是还有另外一种办法：

export default function App() {
  return (
    <ColorPicker>
      <p>Hello, world!</p>
      <ExpensiveTree />
    </ColorPicker>
  );
}

function ColorPicker({ children }) {
  let [color, setColor] = useState("red");
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children}
    </div>
  );
}

此时和状态提升是完全相反的，将依赖 color 的元素提升到了 ColorPicker 组件中，而不依赖 color 的元素以 children prop 的形式传入了 ColorPicker ，当组件内部的状态改变时：

  • ColorPicker 会重新渲染但是它仍然保存着
  • ColorPicker 的 children 属性未变化 React 并不会访问那棵子树。 因此，ExpensiveTree不会重新渲染。

本文提供的方法并不是新的创意，大家一定都有所实践，但是我想表达的是，相比于滥用 useMemo，我们需要首先考虑使用这两种提高组件渲染性能的方法；

到此这篇关于React 组件的状态下移和内容提升的文章就介绍到这了,更多相关React 组件状态下移内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React commit源码分析详解

    React commit源码分析详解

    前两章讲到了，react 在 render 阶段的 completeUnitWork 执行完毕后，就执行 commitRoot 进入到了 commit 阶段，本章将讲解 commit 阶段执行过程源码
    2022-11-11
  • Webpack 4.x搭建react开发环境的方法步骤

    Webpack 4.x搭建react开发环境的方法步骤

    这篇文章主要介绍了Webpack 4.x搭建react开发环境的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React手稿之 React-Saga的详解

    React手稿之 React-Saga的详解

    这篇文章主要介绍了React手稿之 React-Saga的详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 关于React动态修改元素样式的三种方式

    关于React动态修改元素样式的三种方式

    这篇文章主要介绍了关于React动态修改元素样式的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • react hooks d3实现企查查股权穿透图结构图效果详解

    react hooks d3实现企查查股权穿透图结构图效果详解

    这篇文章主要为大家介绍了react hooks d3实现企查查股权穿透图结构图效果详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 前端开发使用Ant Design项目评价

    前端开发使用Ant Design项目评价

    这篇文章主要为大家介绍了前端开发使用Ant Design项目评价，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 详解使用create-react-app快速构建React开发环境

    详解使用create-react-app快速构建React开发环境

    这篇文章主要介绍了详解使用create-react-app快速构建React开发环境,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React生命周期方法之componentDidMount的使用

    React生命周期方法之componentDidMount的使用

    这篇文章主要介绍了React生命周期方法之componentDidMount的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • react通过组件拆分实现购物车界面详解

    react通过组件拆分实现购物车界面详解

    这篇文章主要介绍了react通过组件拆分来实现购物车页面的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • React项目中应用TypeScript的实现

    React项目中应用TypeScript的实现

    TypeScript通常都会依赖于框架，例如和vue、react 这些框架结合，本文就主要介绍了React项目中应用TypeScript的实现，分享给大家，具体如下：
    2021-09-09

最新评论