生命周期

• 挂载阶段：

  • constructor：进行state和props的初始化
  • getDerivedStateFromProps：
  • render：
  • componentDidMount：第一次渲染后调用，可以访问dom，进行异步请求和定时器，消息订阅等

• 更新阶段：

  • getDerivedStateFromProps：
  • shouldComponentUpdate：返回一个布尔值，默认返回true，可以通过这个生命周期钩子进行性能优化，确认不需要更新组件时调用，prevstate，state
  • render
  • componentDidUpdate：在组件完成更新后调用

• 卸载阶段：

  • componentWillUnMount：组件从DOM中被移除的时候调用

• 错误捕获：

  • componentDidCatch

React事件机制

• React基于浏览器的事件机制实现了一套自身的事件机制，包括事件触发，事件冒泡，事件捕获，事件合成和事件派发等

• 作用：

  • 在底层磨平不同浏览器的差异，实现了统一的事件机制，向开发者提供了与原生事件相同的接口，并且统一
  • 实现了对所有事件的中心化管控

• 事件流：

  1. 事件捕获
  2. 处于目标
  3. 事件冒泡

• React事件处理为什么要手动绑定this react组件会被编译为React.createElement，在createElement中，它的this丢失了，并不是由组件实例调用的，因此需要手动绑定this。

• 为什么不能通过 return fasle阻止事件的默认行为？ 因为React基于浏览器的事件机制实现了自己的一套事件机制，和原生DOM事件不同，它采用了事件委托的思想，通过dispatch统一分发事件处理函数。

• React怎么阻止事件冒泡？

  • 阻止合成事件的冒泡用e.stopPropgation()
  • 阻止合成事件和除了最外层document事件冒泡，使用e.targrt避免

useEffect和useLayoutEffect区别？

• useEffect是在dom渲染之后调用
• useLayoutEffect在渲染之前调用，常用于页面布局，可能会阻塞页面渲染
• useInsertionEffect：css-in-js插入动态演示