关于react.js:重拾-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)

在 componentDidimount 和，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 联合吧办法裸露给父组件。