为什么你React

为什么你React

如在开发设计 React 应用软件时，提升特性是一个重要的参考标准。React 提供了一些优化软件与技术，其中之一便是 React.memo。React.memo 是一个高阶组件（Higher-Order Component，HOC），用以优化函数元件的3D渲染特性。

什么叫 React.memo

React.memo 是 React 所提供的一个函数，用以优化函数元件的3D渲染特性。它类似 React.PureComponent，但适用函数公式部件而非类部件。React.memo 函数公式接受一个部件做为主要参数，并回到一个通过改善的新部件。

改善的工作原理是 React.memo 对元件的键入 props 开展浅较为。他会较为现阶段3D渲染后的 props 与前一次3D渲染后的 props 是不是相同。只有在 props 变化时，React.memo 才能再次3D渲染部件；不然，他会使用时一次3D渲染得到的结果，进而减少不必要的重3D渲染。

怎么使用

import React from 'react';

const UserProfile = React.memo(({ name, age, avatar }) => {
  console.log('Rendering UserProfile');
  return (
    <div>
      <img src={avatar} alt="User Avatar" />
      <div>Name: {name}</div>
      <div>Age: {age}</div>
    </div>
  );
});

在这样一个实例中，UserProfile 是一个纯展现部件，它接受客户的名字、年龄头像图片做为 props。因为它的3D渲染结论只取决于传到的 props，我们可以用 React.memo 来提升它。那样，只有在 name、age 或 avatar 变化时，才能再次3D渲染 UserProfile 部件。

为什么你React.memo并没有起效

1. 直接从函数式部件高层界定引用类型：

如下所示代码中，每一次count被升级，App都是会再次3D渲染，obj主体和onChanged函数公式就会被再次申明，因此对于 MyComponent 而言 obj一直在产生变化，造成子组件一直在反复3D渲染

import React from 'react';

const MyComponent = React.memo((props) => {
  console.log('Rendering MyComponent');
  return <div>{props.name}</div>;
});

function App() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(count   1);
  };

  const onChanged = ()=>{}

  const obj = { value: count };

  return (
    <div>
      <button onClick={handleClick}>Increment Count</button>
      <MyComponent name="John" obj={obj} onChanged={onChanged}/>
    </div>
  );
}

如果想防止重复3D渲染，需始终保持引入不会改变：

// 缓存文件目标
const obj = useMemo(() => ({ value: 1 }), []);

// 缓存文件函数公式
const onChanged = useCallback(() => {}, []);

2. 立即setState一个新的目标：

如下所示代码中，每一次实行setObj方式都能被传到一个新目标，它引入详细地址出现了改变，因此子组件会再次3D渲染

import React from 'react';

const MyComponent = React.memo((props) => {
  console.log('Rendering MyComponent');
  return <div>{props.name}</div>;
});

function App() {
  const [obj, setObj] = React.useState({});

  const handleClick = () => {
    setObj({ a: 3 });
  };

  return (
    <div>
      <button onClick={handleClick}>Increment Count</button>
      <MyComponent name="John" obj={obj} />
    </div>
  );
}

如果你不想再次3D渲染，要保持引入详细地址不会改变：

    // 立即变更旧值
    setObj((old) => {
      old.a = 3;
      return old;
    });
    // 缓存文件目标，仅仅在变化时再次建立新目标，即开启再次3D渲染
    const newObj = useMemo(() => ({ value: count }), [count]);
    setObj(newObj)

一定要注意，React.memo 得比较是浅较为，只较为 props 对象第一层特性是不是产生变化。假如 props 包括繁杂的算法设计（如目标或二维数组），而且其引入并没有产生变化，那样 React.memo 没法检测出深层次的转变。在这样的情况下，需要用到其他方式来保证元件的恰当升级。

总而言之，除开基本数据类型转变外，我们还需要关心你传达的引用类型数据信息是不是出现了改变，进而来判断你部件是否会被再次3D渲染。

结果

根据使用 React.memo，我们能优化函数元件的3D渲染特性，减少不必要的重3D渲染。主要是通过浅较为 props 目标的方式去再决定是否再次3D渲染部件。但是，需注意，React.memo 得比较是浅较为，只查验第一层特性是不是产生变化。

在具体设计中，大家需要根据元件的特点与需求，选择合适的应用 React.memo 进行改善。针对纯展现部件以及具有很多子组件的部件树，应用 React.memo 可以有效的提高性能和减少不必要的3D渲染。

期待文中可以帮助你认知和运用 React.memo，提升你 React 应用软件性能！

本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。 此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。 在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!