我最近一直在玩 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 包装功能组件的情况?
最佳答案
您应该始终从字面上使用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
中,因为计算资源可以忽略不计。
关于javascript - 什么时候不应该使用 React 备忘录?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53074551/