React 其他 Hooks

其他 Hooks

useRef

可用于获取 DOM 元素

 const ScrollRef = useRef(null)ScrollRef.current

useContext

（先回顾一下之前的 Context 知识，借用之前 ppt 和源码）

Hooks 中使用 useContext 来获取 context 的值

 // 父组件创建 contextexport const MenuContext = createContext<IMenuContext>({ index: 0 })    // 初始值​// context 传递的数据const passedContext: IMenuContext = {index: currentActive ? currentActive : 0,onSelect: handleClick,}​<MenuContext.Provider value={passedContext}>{renderChildren()}</MenuContext.Provider>​// 子组件使用const context = useContext(MenuContext)context.onSelect(index)

useReducer

useReducer 和 redux 不同

• useReducer 是 useState 的代替方案，用于更复杂的 state 变化逻辑

• useReducer 是单组件的状态管理，多组件通讯还是需要 props 传递数据

• redux 是全局的状态管理，多组件可共享数据

useMemo

（先回顾一下之前的性能优化部分的知识，借用之前 ppt 和源码）

• React 默认更新所有子组件

• Class 组件使用 SCU 或者 PureComponent 进行优化

• Hooks 里使用 useMemo 缓存数据（和 PureComponent 原理是一样的）

 // 子组件使用 memo()包裹  (对props浅层对比)const Child = memo(({ userInfo }) => {console.log('Child render ...', userInfo)return <></>})​// 父组件 用 useMemo 缓存传递的数据, 有依赖const userInfo = useMemo(() => {return { name, age = 21 }}, [name])​<Child userInfo={userInfo}/>

useCallback

在 useMemo 的基础上继续，如果是函数传递给子组件，怎么办？

• useMemo 缓存数据

• useCallback 缓存函数

 // 子组件const Child = ({ onChange }) => {console.log('Child render ...', onChange)return <></>}​// 父组件 用 useCallback 缓存传递的函数, 依赖 []const onChange = useCallback(e => {console.log(e.target.value)}, [])​<Child onChange={onChange}/>