1. 为什么需要React.memo？
2. React.memo的作用？
组件渲染的情况有2种
1. 组件自身的state发生变化
2. 父组件发生变化
父组件发生变化但是传递给子元素的内容没有改变，对于子元素来说对它重复渲染的话是没有必要的
React.memo用来给组件观察父组件传递的props有没有变化，如果 父组件发生重新渲染但是传递的props没有变化的话，子组件是不会渲染的
React组件会在两种情况下发生重新渲染。
第一种，当组件自身的state发生变化时。
第二种，当组件的父组件重新渲染时。
第一种情况下的重新渲染无可厚非，state都变了，组件自身自然应该重新进行渲染。
但是第二种情况似乎并不是总那么的必要。
我们来看一个demo，现有如下三个组件，分别为App组件、A组件和B组件：
App.js
?const App = () => {
? ? const [count, setCount] = useState(1);
??
? ? const clickHandler = () => {
? ? ? ? setCount(prevState => prevState + 1);
? ? };
??
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <h2>App -- {count}</h2>
? ? ? ? ? ? <button onClick={clickHandler}>增加</button>
??
? ? ? ? ? ? <A/>
? ? ? ? </div>
? ? );
?};
A.js
?const A = () => {
? ? const [count, setCount] = useState(1);
??
? ? const clickHandler = () => {
? ? ? setCount(prevState => prevState + 1);
? ? };
??
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <h2>组件A -- {count}</h2>
? ? ? ? ? ? <button onClick={clickHandler}>增加</button>
? ? ? ? ? ? <B/>
? ? ? ? </div>
? ? );
?};
??
?export default A;
B.js
?const B = () => {
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <h2>组件B</h2>
? ? ? ? </div>
? ? );
?};
??
?export default B;
三个组件的引用关系为，A组件是App的子组件、B组件是A组件的子组件：App –> A –> B
调试代码，观察以下几种情况。
1. 当App组件发生重新渲染时，A和B组件都会发生重渲染。
2. 当A组件重新渲染时，B组件也会重新渲染。
B组件中没有state，甚至连props都没有设置。
B组件无论如何渲染，每次渲染的结果都是相同的，这种渲染结果是没有必要的。虽然重渲染并不会应用到真实DOM上
为了减少像B组件这样组件的渲染，React为我们提供了一个方法React.memo()。该方法是一个高阶函数，可以用来根据组件的props对组件进行缓存，当一个组件的父组件发生重新渲染，而子组件的props没有发生变化时，它会直接将缓存中的组件渲染结果返回而不是再次触发子组件的重新渲染，这样一来就大大的降低了子组件重新渲染的次数。
现在对上述案例中的B组件进行如下修改：
?const B = () => {
? ? console.log('B渲染');
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <h2>组件B</h2>
? ? ? ? </div>
? ? );
?};
??
?export default React.memo(B);
修改后的代码中，并没有直接将B组件向外导出，而是在B组件外层套了一层函数React.memo()，这样一来，返回的B组件就增加了缓存功能，只有当B组件的props属性发生变化时，才会触发组件的重新渲染。memo只会根据props判断是否需要重新渲染，和state和context无关，state或context发生变化时，组件依然会正常的进行重新渲染。
|