React 其他 Hooks
其他 Hooks
useRef
可用于获取 DOM 元素
const ScrollRef = useRef(null)ScrollRef.currentuseContext
（先回顾一下之前的 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}/>