问题描述
我最近一直在玩 React 16.6.0 ，我喜欢 React Memo 的想法，但我一直无法找到最适合实施的方案.
I've been playing around with React 16.6.0 recently and I love the idea of React Memo, but I've been unable to find anything regarding scenarios best suited to implement it.
React docs( https://reactjs.org/docs/react-api.html#reactmemo )似乎并没有暗示将其扔到所有功能组件上的任何暗示.
The React docs (https://reactjs.org/docs/react-api.html#reactmemo) don't seem to suggest any implications from just throwing it on all of your functional components.
由于进行了比较，以找出是否需要重新渲染，是否会出现对性能产生负面影响的情况?
Because it does a shallow comparison to figure out if it needs to re-render, is there ever going to be a situation that negatively impacts performance?
这种情况似乎是实现的明显选择:
A situation like this seems like an obvious choice for implementation:
// 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 很有意义.
Because name will never change in this context, it makes sense to memoize.
但是，道具频繁更换的情况又如何呢?
如果我添加了另一个按钮，该按钮会改变其他状态并触发重新渲染，即使将 CountComponent 包装在 memo 中，也有意义，即使此组件是设计使然.打算经常更新?
But what about a situation where props change frequently?
What if I added another button that changed something else in state and triggered a re-render, would it make sense to wrap CountComponent in memo, even though this component by design is meant to update frequently?
我想我的主要问题是只要所有内容都保持纯净，是否存在不使用React Memo包装功能组件的情况?
推荐答案
所有react组件均实现 shouldComponentUpdate()方法.默认情况下(扩展了 React.Component 的组件)，始终返回true.记忆组件(通过对功能组件使用 React.memo 或对类组件扩展 React.PureComponent )来实现的更改是 shouldComponentUpdate()方法-对状态和道具进行浅层比较.
All react components implement the shouldComponentUpdate() method. By default (components extending React.Component), this returns true, always. The change that memoizing a component (through React.memo for functional components or extending React.PureComponent for class components) introduces is an implementation of the shouldComponentUpdate() method - which does the shallow comparison of the state and props.
查看有关组件生命周期方法 shouldComponentUpdate的文档()总是在渲染发生之前被调用，这意味着在每次更新时记忆组件将包括此额外的浅表比较.
Looking at the documentation on the component lifecycle methods, shouldComponentUpdate() is always called before the render happens, this means that memoizing a component will include this additional shallow comparison on every update.
考虑到这一点，记忆组件确实会对性能产生影响，这些影响的程度应通过对应用程序进行性能分析并确定其在使用或不使用记忆功能的情况下是否更好来确定.
Taking this into consideration, memoizing a component does have performance effects, and the magnitude of these effects should be determined through profiling your application and determining whether it works better with or without the memoizing.
要回答您的问题，我不认为应该或不应该记住组件没有明确的规则，但是我认为应采用与确定是否应覆盖 shouldComponentUpdate()时相同的原则.:通过建议的配置工具，并确定是否需要优化组件.
To answer your question, I don't think there's an explicit rule when you should or should not memoize components, however I think the same principle should be applied as when deciding whether or not you should override shouldComponentUpdate(): find performance issues through the suggested profiling tools and identify whether or not you need to optimise a component.
这篇关于什么时候不应该使用React备忘录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！