Hook UseCallBack

UseCallBack    子组件与父组件的数据不联动 手动更新子组件

父组件

import React, { useState } from 'react'
import Child3 from '../components/Child3'
export default function UseCallBack() {
    const [num, setnum] = useState(10)
    return (
        <div>
            {num}
            <button onClick={() => {
                setnum(num + 3)
            }}>修改num</button>
            <Child3 num={num}></Child3>
        </div>
    )
}

子组件  

引入 

import React, { useState, useCallback } from 'react'

import React, { useState, useCallback } from 'react'

export default function Child3({ num }: any) {
    const [n, setn] = useState(num)
    let fn = useCallback(
        () => {
            setn(num)
        },
        [num],
    )
    return (
        <div>
            从父组件传过来的
            {num}
            <div>
                不随着父组件的改变而改变{n}
                <br />
                自己手动更新<button onClick={() => {
                    fn()
                }}>更新</button>
            </div>
        </div>
    )
}