Pulse Of The Blogosphere » ReactJS – 7.1. Kỹ thuật Memoization: React.memo()

HOME / Javascript / ReactJS old / ReactJS – 7.1. Kỹ thuật Memoization: React.memo()

ReactJS – 7.1. Kỹ thuật Memoization: React.memo()

Author: admin - Posted: 01/05/21 - Update: 20/05/22

*** Kỹ thuật Memoization là gì

/languages/ecmascript/es6-ky-thuat-memoization/

1. React.memo()

- React.memo() là một HOC, chứ ko phải hooks.
- React.memo() dùng cho functional component.
- Chỉ render lại component nếu props thay đổi.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReactJS</title>
</head>

<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        const { useState, memo } = React;

        // Header không sử dụng React.memo ==> luôn bị render lại khi thằng cha nó render lại
        // Thực tế, ReactJS dùng Virtual Dom, nên khi re-render cũng ko quá ảnh hưởng đến hiệu suất
        const Header = (props) => {
            console.log("Header render");
            return <p>Header - Hello: {props.name}</p>
        }

        // Footer sử dụng React.memo, props không thay đổi sẽ không bị render lại
        // React.memo chỉ thực sự có ý nghĩa với những Component rất nặng
        const Footer = (props) => {
            console.log("Footer render");
            return <p>Footer - Goodbye: {props.name}</p>
        }
        const MemoFooter = React.memo(Footer);

        const App = () => {
            const [count, setCount] = useState(0);
            return (
                <div>
                    <Header name="Jack" />
                    <p>Current: {count}</p>
                    <button onClick={() => { setCount(count + 1) }}>Increase</button><br />
                    <MemoFooter name="Jack" />
                </div>
            )
        }

        ReactDOM.render(
            <App />,
            document.getElementById('root')
        );

    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>ReactJS</title>

</head>

<body>

const { useState, memo } = React;

// Header không sử dụng React.memo ==> luôn bị render lại khi thằng cha nó render lại

// Thực tế, ReactJS dùng Virtual Dom, nên khi re-render cũng ko quá ảnh hưởng đến hiệu suất

const Header = (props) => {

console.log("Header render");

return <p>Header - Hello: {props.name}</p>

}

// Footer sử dụng React.memo, props không thay đổi sẽ không bị render lại

// React.memo chỉ thực sự có ý nghĩa với những Component rất nặng

const Footer = (props) => {

console.log("Footer render");

return <p>Footer - Goodbye: {props.name}</p>

}

const MemoFooter = React.memo(Footer);

const App = () => {

const [count, setCount] = useState(0);

return (

<div>

<p>Current: {count}</p>

<button onClick={() => { setCount(count + 1) }}>Increase</button><br />

</div>

)

}

ReactDOM.render(

<App />,

document.getElementById('root')

);

</script>

</body>

</html>

1. React.memo()

ReactJS old

ReactJS – 7.2. Kỹ thuật Memoization: useMemo()