Я недавно играл с 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
никогда не изменится в этом контексте, имеет смысл запомнить.
Но как насчет ситуации, когда реквизит часто меняется?
Что, если бы я добавил еще одну кнопку, которая изменила что-то еще в состоянии и запустила повторный рендеринг, имеет ли смысл обернуть CountComponent
в памятку, даже если этот компонент по замыслу предназначен для частого обновления?
Я предполагаю, что мой главный вопрос - пока все остается чистым, была ли когда-нибудь ситуация, чтобы не обернуть функциональный компонент React Memo?