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