react hooks

常用的hooks钩子:

1、useState:保存组件内部状态的函数,setState改变组件状态

2、uesEffect:在函数组件中执行副作用操作,

相当于componentDidMount，componentDidUpdate 和 componentWillUnmount。

清除事件监听

//清除事件监听
useEffect(()=>{
 const mouseMoveHandler=(e:MouseEvent)=>{
  setPosition({x:e.clientX,y:e.clientY})
 }
 window.addEventListener('mousemove',mouseMoveHandler)
 return ()=>window.removeEventListener('mousemove',mouseMoveHandler)
},[])

清除定时器

3、useContext： 跨组件传值

3.1以非侵入的方式使用context

4、useReducer：useState的加强版，在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等

useReducer(fn,初始数据，对初始数据进行处理的fn)

***更新数据用dispatch***
dispatch({type:'UPDATE_NAME',payload:'张三'})

***useReducer的简便写法是使用：useImmerReducer
//npm i immer use-immer -S
 import {useImmerReducer} from 'use-immer'

5、useCallback ：和useEffect类似，把函数做为第一个参数，把函数的依赖项作为第二个参数传入，该回调函数只有在函数的依赖项发生改变时才会调用，返回的是一个回调函数。 相当于computed

• usecallback缓存函数
• react.memo缓存组件
• usememo缓存值

6、useMemo：和uesCallback类似.，返回的是一个值，而不是函数。

7、useRef const refContainer = useRef(initialValue);

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。

8、useImperativeHandle useImperativeHandle(ref, createHandle, [deps])

9、useLayoutEffect：其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。

在组件被重新渲染之前执行

10、useTranistion

• 在startTransition里的函数只能是同步的
• transition不能控制文本输入

• 11、useDeferredValue适合文本框的频繁输入

•