import React, { useMemo, useState } from "react";

import ReactDOM from "react-dom";

import "./index.css";

// 　useMemo()的出现，避免渲染过程中重复渲染  类似 shouldComponentUpdate

// 一个组件重新重新渲染，一般三种情况：

// 要么是组件自己的状态改变

// 要么是父组件重新渲染，导致子组件重新渲染，但是父组件的 props 没有改变

// 要么是父组件重新渲染，导致子组件重新渲染，但是父组件传递的 props 改变

 

// 不管点多少次+1都只会输出一次result，也就是expensiveFn值计算一次。

// 通过useMemo缓存了expensiveFn的计算结果。

function App() {

    const [num, setNum] = useState(0)

    function expensiveFn() {

        let result = 0;

        for (let i = 0; i < 10; i++) {

            result += 1;

        }

        console.log(result)

        return result

    }

 

    const base = useMemo(expensiveFn, []);

 

    return (

        <div className="App">

            <h1>count：{num}</h1>

            <button onClick={() => setNum(num + base)}>+1</button>

        </div>

    );

}

 

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