React Hook面试题

useState

  • 可以使函数组件像类组件一样拥有state
  • 函数组件通过useState可以让组件重新渲染,更新视图
  • const [v, setV] = useState()
  • state目的提供给UI,作为渲染视图的数据源
  • dispatch改变state的函数,可以理解为推动函数组件渲染的渲染函数
  • initData有两种情况,第一情况是非函数作为state初始化的值,第二是函数的返回值作为useState初始化的值
  • 在函数组件一次执行上下文中,state的值是固定不变的
  • 如果两次dispatchAction传入相同的state值,那么组件就不会更新
  • 当触发dispatchAction在当前执行上下文中获取不到最新的state,只有再下一次组件rerender中才能获取到

useReducer

  • 无状态组件中运行的类似redux的功能api
  • const [state, dispatch] = useReducer(reducer)
  • 更新之后的state值
  • 派发更新的dispatchAction函数,本质上和useState的dispatchAction一样
  • 一个函数reducer,我们可以认为它就是一个redux中reducer,参数就是常规reducer里面的state和action,返回改变后的state,这里有一个需要注意的点就是如果返回的state和之前的state,内存指向相同,那么组件将不会更新

useSyncExternalStore

useTransition

useDeferredValue

hooks执行副作用

useEffect

  • 用于弥补函数组件没有生命周期的缺陷,其本质主要是运用了hooks里面的useEffect、useLayoutEffect还有useInsertionEffect
  • useEffect参数
    • 第一个参数callback,返回destroy作为下一次callback执行之前调用,用于清除上一次callback产生的副作用
    • 第二个参数作为依赖项,是一个数组,可以有多个依赖,依赖改变执行上一次callback返回的destroy,和执行新的Effect第一个参数callback
  • 对于useEffect执行,React处理逻辑是采用异步调用,对于每一个Effect和callback,react会向setTimeout回调函数一样,放入任务队列,等主线程任务完成,DOM更新,js执行完成,视图绘制完毕才执行。所以Effect回调函数不会阻塞浏览器绘制视图

useLayoutEffect

你可能感兴趣的:(javascript)