javascript - 什么时候不应该使用 React 备忘录？

Question

我最近一直在玩 React 16.6.0，我喜欢 React Memo 的想法，但我一直无法找到任何有关最适合实现它的场景的信息。

React 文档 ( https://reactjs.org/docs/react-api.html#reactmemo ) 似乎并没有暗示将它扔到所有功能组件上有任何影响。

因为它会进行浅层比较来确定是否需要重新渲染，所以是否会出现对性能产生负面影响的情况？

像这样的情况似乎是一个显而易见的实现选择:

// NameComponent.js
import React from "react";
const NameComponent = ({ name }) => <div>{name}</div>;
export default React.memo(NameComponent);

// CountComponent.js
import React from "react";
const CountComponent = ({ count }) => <div>{count}</div>;
export default CountComponent;

// App.js
import React from "react";
import NameComponent from "./NameComponent";
import CountComponent from "./CountComponent";

class App extends Component {
  state = {
    name: "Keith",
    count: 0
  };

  handleClick = e => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <NameComponent name={this.state.name} />
        <CountComponent count={this.state.count} />
        <button onClick={this.handleClick}>Add Count</button>
      </div>
    );
  }
}

因为name在这种情况下永远不会改变，所以内存是有意义的。

但是如果 props 频繁变化怎么办？
如果我添加另一个按钮来更改状态中的其他内容并触发重新渲染，那么将 CountComponent 包装在 memo 中是否有意义，即使该组件是按设计设计的是不是要经常更新？

我想我的主要问题是只要一切保持纯粹，是否存在不使用 React Memo 包装功能组件的情况？

Answer 1

您应该始终从字面上使用React.memo，因为比较组件返回的树总是比比较一对props属性更昂贵

所以不要听任何人的，将所有功能组件包装在 React.memo 中。 React.memo 原本是打算内置到功能组件的核心中，但由于失去了向后兼容性，默认情况下并未使用。 (因为它从表面上比较对象，并且您可能正在使用组件中子对象的嵌套属性)=)

就是这样，这是 React 不自动使用 memo 的唯一原因。 =)

事实上，他们可以制作版本 17.0.0，这会破坏向后兼容性，并使 React.memo 成为默认值，并制作某种函数来取消此行为，例如 React.deepProps =)

别再听理论家的话了，伙计们=)规则很简单:

如果你的组件使用DEEP COMPARING PROPS，那么就不要使用memo，否则总是使用它，比较两个对象总是比调用React.createElement()并比较两棵树、创建FiberNodes便宜，等等。

理论家谈论他们自己不知道的东西，他们没有分析过react代码，他们不理解FRP，他们不明白他们的建议=)

附注如果您的组件使用 children 属性，则 React.memo 将不起作用，因为 children 属性始终会创建一个新数组。但最好不要为此烦恼，即使这样的组件也应该包装在 React.memo 中，因为计算资源可以忽略不计。