react hooks 额外的钩子函数
useMemo 性能优化
减少渲染耗时
记忆值
对象深拷贝
const momoizedValue = useMemo(callback,array)
1.callback 函数 处理计算逻辑
2.array 数组发生改变的时候 useMemo 才会重新执行
返回值是一个记忆值 是callback的返回值
数组变化 记忆值才会返回
const obj1 = {id:"12",name:"jack"}
const obj2 = {id:"14",name:"ben",age:23}
const memoizedValue =useMemo(()=>Object.assign(obj1,obj2),[obj1,obj2])
// 第二个参数是数组 代码obj1改变 或者obj2改变的时候 记忆值才会返回
类似immutable优化
不要在useMemo处理副作用的逻辑
useCallback . 性能优化
const momoizedValue = useCallback(callback,array)
//和useMemo 返回值不同 返回值不是callback返回值 是函数本身
得到的是一个函数
useCallback(fn,inputs) 等价于 useMemo(()=>fn,inputs)
const memoizedValue =useCallback(()=>Object.assign(obj1,obj2),[obj1,obj2])
// 调用 memoizedFn().name
等价于 useMemo(()=>()=>Object.assign(obj1,obj2),[obj1,obj2]);
useRef 使用ref对象 返回一个可变的ref对象 current属性被初始化为传递的参数
通过ref对象访问dom
const inputE1 = useRef(null)
// useRef()
const onInput=()=>{
console.log(inputE1.current.value)
}
return(
<div>
<input ref = {inputE1} type='text' / >
<button onClick={onInput}>获取input的值</button>
</div>
)
// 后面两个钩子用的少
useImperativeMethods
//扩展ref 方便ref 和父组件交互
useLayoutEffect 阻止页面渲染
所有dom变化后同步触发
浏览器绘制前 做一些事情
多数情况用useEffect