重拾 React

React hooks

hooks 的主要作用

1. 方便状态逻辑的复用
2. 函数组件功能增强

useState

const [state, setState]=useState(initState)
定义组件的state, 接受一个初始state的值，返回一个元组，一个是state 另一个是修改state的方法。

export default function Test() {
    const [count, setCount] = useState(0)
    function add() {
        setCount(count + 1)
    }
    return <div>
        {count}
        <button onClick={add} >+1</button>
    </div>
}

useEffect

用来处理React的生命周期钩子
useEffect(callbackFn, deps)

在componentDidMount 和 deps 中的值发生改变的时候执行回调函数，deps 应该包含回调中所有的依赖
当 deps 为 [] 空数组的时，只有在 componentDidMounte 的时候执行一次
当 callbackFn 返回一个函数的时候，函数会在组件销毁前执行。

useReducer

当state 有比较复杂的逻辑时，可以使用useReducer进行状态管理，他返回两个参数一个是状态另一个是状态对应的 dispatch 方法，他类似redux中的reducer。

如

export default function TestReducer() {

    const [count, dispatch] = useReducer((state, action) => {
        if (action === '+1') {
            state = state + 1
        } else if (action === '-1') {
            state = state - 1
        }
        return state
    }, 0)

    return <div>
        count:{count}
        <button onClick={()=>{dispatch('+1')}}>+1</button>
        <button onClick={()=>{dispatch('-1')}}>-1</button>
    </div>
}

useCallback

首先不得不吐槽一下 react 的官方文档，这部分看了好几遍愣是没看明白 useCallback 的使用场景。

使用场景：

父组件嵌套子组件，子组件在某一时机需要调用父组件的回调函数，为了避免父组件每次渲染，子组件都渲染，此事就需要使用 useCallback 方法将回调函数包起来，这里需要注意子组件必须使用 React.memo 高阶组件包起来才有效。

使用方法

const memoCbfn = useCllback(cbFn,[...deps])

第一个参数为回调函数，第二个参数为回调函数依赖的state或props，返回的是被缓存的方法。
只有当第二个参数依赖的内容改变的时候才会重新生成新的缓存方法

useMemo

const xxx = useMemo(cbFn,[...deps])
用来实现缓存内容，当依赖项改变的时候才重新计算，避免每次渲染都计算。

父子组件交互

父传子 （Props）

通过props的方式把，父组件的内容传递给子组件，当props 发生改变的实时触发子组件的更新。

子调父

在vue中 使用 emit 的方法，想父组件发送一个事件，父组件通过监听 emit 的方式，实现子组件回调父组件的方法。

在react 中是将子组件需要的回调函数以 props 的方式传入，子组件在适当的位置进行调用。

父调子

在vue3中 父调子是子组件通过 defineExpose 定义暴露的方法，父组件通过 ref 的方式进行调用

在 React中 父调子也是通过ref 的方式获取组件的引用，再进行调用。
需要注意的是函数组件由于没有实例需要通过 useImperativeHandle 和 forwardRef 结合吧方法暴露给父组件。