React hooks要点

董俊豪
2022-02-25 / 0 评论 / 0 点赞 / 634 阅读 / 1,083 字
温馨提示:
本文最后更新于 2022-05-03,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Hooks

在函数组件使用state,类组件特性加入到函数组件,代码简洁,上手简单
react难点:1.生命周期难理解难熟练 2.redux状态管理概念多 3.高阶组件不容易理解(必须掌握高阶组件)
hooks不用生命周期,不用高阶组件,不用redux mobx上手容易,函数组件维护内部状态
hooks 钩子/回调

1.useState

每次渲染都会重新执行,内部通过useReducer实现
let [count,setCount] = useState(10)
state改变都是异步,覆盖原值,任意类型 可以接受回调函数进行逻辑运算
const num = 2; useState(()=>{ return 10*num })
setCount(count=>{ return ++count })

2.useEffect/useLayoutEffect

dom渲染完成之后执行,处理副作用
固定输入得到固定输出,和componentDidMount相同作用,如果改变state props引发重新渲染,重新执行useEffect,在第二参数传入[]监听依赖 执行时机,不依赖props state,只执行一次
onClick={()=>{setRefresh(!refresh)}}

3.useContext

爷孙组件传值 const context = createContext({}); 定义共同父级函数组件
reutrn <context.provider value=
></context.provider>
子组件中

4.useReducer

类似redux useState的替代方案

5.useRef

访问dom节点 dom渲染完成之后执行,useEffect中操作dom
const ref = useRef(null)

6.useMemo & useCallback

值缓存,callBack 函数体,memo 值,闭包创建内存
useMemo 把创建数组和创建函数作为依赖参数,通过memorized 调用
useCallback 接受一个内联回调函数和一个数组,通过memorized()调用

7.自定义hook

抽离公共代码,逻辑功能服用单独函数,封装成单独函数,每次Hook都有一个独立的state
使用useState useEffect,只复用逻辑
export function useNumber(){
let xxxx = useState(0);
useEffect(()=>{
});
return [number,setNumber]
}

8.注意

1.只能在顶层使用hook,不再循环条件判断中使用
2.只在函数中调用hook

0

评论区