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
评论区