useLayoutEffect和useEffect的回调函数执行优先级是不同的，主要是因为它们的执行时机和执行方式的不同。

1. useEffect：

   • 它的回调函数会在React组件渲染后异步执行。
   • 回调函数执行时，DOM更新已经完成。
   • 这意味着在useEffect的回调函数中执行的DOM操作可能会导致页面的闪烁或性能问题。

2. useLayoutEffect：

   • 它的回调函数会在React组件渲染后同步执行。
   • 回调函数执行时，DOM更新还没有完成。
   • 这意味着在useLayoutEffect的回调函数中执行的DOM操作可以确保在DOM更新完成后执行，从而可以避免页面的闪烁或性能问题。

因此，当你需要在DOM更新完成后执行某些操作时，可以使用useLayoutEffect，以确保操作能够及时执行并避免页面的闪烁或性能问题。如果你只是需要在组件渲染后执行一些异步操作，或者不需要在DOM更新完成后执行某些操作，可以使用useEffect。

useRef 是一个引用 常量，用于指向

如果

useEffect(()=>{
  let ref.current =   setTimout(()=>{
    setCount(count+1);
    },2)
return ()=>{
clearTimeout(ref.current);
//这是因为每次useEffect创建时，setTimout都会重新创建，用ref来指向他可以避免出现常量被重新赋值，导致计时器无法正确清除的操作
}
},[count])

函数式和class组件

为神马函数式更好

1. 函数式不涉及类的实例化和继承，渲染性能更高
2. 没有this指向问题，hooks 函数式组件本质上都是函数，它通过参数来传递状态和props,而不是this
3. 不需要编写生命周期函数，减少样板代码
4. 更容易复用，可以通过自定义hooks将组件逻辑抽象出来，实现复用

react 合成事件 事件委托

1. 性能优化，事件委托可以减少dom事件操作的数量，从而减少内存占用和优化性能，如果你在每一个子组件中添加事件，可能会导致项目中存在很多个事件，通过事件委托的形式可以将事件统一添加到父元素上，避免额外的事件数量。
2. react 事件委托是通过事件处理器挂载到虚拟dom上，有变化时两颗虚拟dom进行比较，然后只更新发生变更的部分，如果直接添加到真实dom上，当虚拟dom发生变更时，真实dom的事件会失效。
3. 便于统一管理，做一些浏览器兼容处理的操作。

泛型

1. 范型函数
2. 范型约束，比方说你知道一个类型中肯定包含length的一个属性，此时可以使用泛型