24 react memo, useMemo, useCallback

import React, { useState, memo, useEffect, useMemo, useCallback } from 'react'
//memo 解决函数组件重复渲染 配合useMemo ，useCallback使用
const Child = memo((props) => {
    console.log(123);
    useEffect(() => {

    }, []);
    return (
        <>
            <div>我是子组件{props.num}</div>
            <button onClick={() => props.addclick()}>累加</button>
        </>

    )
})

export default function Comp19() {
    let [num, setnum] = useState(10)
    let [arr, setarr] = useState([1, 2, 3, 3, 21, 321])
    // useMemo缓存计算值 适合大量计算是使用 
    const addclick = useCallback(() => {
        setnum(num = num + 1)
    }, [])
    const sunnum = useMemo(() => {
        let count = 0
        arr.forEach(x => {
            count = count + x
        });
        console.log(23132123);
        return count
    }, arr)
    return (
        <>
            <div>{sunnum}</div>
            <div>{sunnum}</div>
            <div>{sunnum}</div>
            <Child addclick={addclick} num={num} />
        </>

    )
}