我最近一直在玩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 包装功能组件的情况？