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