React.Meno

第二章 React.Meno使用

---

---

一、React.memo()是什么？

React.memo() 是一个高阶组件,它接收另一个组件作为参数，并且会返回一个包装过的新组件,包装过的新组件就会具有缓存功能，包装过后，只有组件的props发生变化,才会触发组件的重新的渲染，否则总是返回缓存中结果。

二、使用步骤

组件A
代码如下：

import React, {useState} from 'react';
import B from "./B";

const A = () => {
    console.log('A渲染');
    const [count, setCount] = useState(1);

    const clickHandler = () => {
      setCount(prevState => prevState + 1);
    };

    const test = count % 4 === 0;

    return (
        <div>
            <h2>组件A -- {count}</h2>
            <button onClick={clickHandler}>增加</button>
            <B test={test}/>
        </div>
    );
};

export default A;

B组件：

import React from 'react';

const B = (props) => {
    console.log('B渲染');
    return (
        <div>
            <h2>组件B</h2>
            <p>{props.test && '哈哈'}</p>
        </div>
    );
};
export default React.memo(B);