什么时候不应该使用 React 备忘录?
我最近一直在玩 React,我喜欢 React Memo 的想法,但是我一直找不到任何最适合实现它的场景。16.6.0
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
但是,如果道具经常更换,情况又如何呢?
如果我添加了另一个按钮,该按钮更改了状态中的其他内容并触发了重新呈现,那么即使此组件的设计意味着经常更新,包装在备忘录中是否有意义?CountComponent
我想我的主要问题是,只要一切都保持纯洁,有没有一种情况不用React Memo包装一个功能组件?