【发布时间】：2019-04-04 02:23:38
【问题描述】：
我最近一直在玩 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 在这种情况下永远不会改变，所以memoize 是有意义的。
但是道具经常更换的情况呢？
如果我添加了另一个按钮来更改状态中的其他内容并触发重新渲染，那么将 CountComponent 包装在 memo 中是否有意义，即使此组件的设计目的是要经常更新？
我想我的主要问题是只要一切都保持纯净，是否存在不使用 React Memo 包装功能组件的情况？
【问题讨论】：
-
如果你的组件总是重新渲染，它每次都会做一个不必要的浅 prop 检查。和 PureComponent 一样。
-
@AndyRay 我想我对收益递减的阈值在哪里感兴趣。如果我的功能组件理论上需要准确地重新渲染 95% 的时间，那么重新渲染的成本是否需要使用备忘录？我知道这是一个超级具体的场景，我并不是在寻找确切的基准，我只是更好奇是否有一条可以在沙子上画的线。
-
我怀疑是否有人研究过该指标，如果 memoization 调用是您的瓶颈，那么可能有一些非常特定于您的应用需求的东西很难给出一般性建议。
-
也许一个更尖锐的问题是：“你什么时候不应该使用 React 备忘录？”。或者“你是否应该一直使用 React 备忘录并仅在出现性能问题时才选择退出？”。
-
@protoEvangelion 好建议，我要更新问题标题
标签： javascript reactjs