📄React 实现 ComponentWillMount
type
status
date
slug
summary
tags
category
icon
password
Status
ComponentWillMout钩子
众所周知，React 生命周期中有一个
componentWillMount，不过目前已经被 React 标记为过时了（它在 React 中仍然可以用，但官方不建议使用）。该钩子是在 DOM 挂载之前调用，我们可以利用它在组件初始化渲染之前做一些事情。But，
componentWillMount 有一个很明显的缺陷，就是此钩子在页面初始化渲染之前会执行一次或多次，这并不是我们想要的，并且，我们可以利用 constructor() 来替代 componentWillMount。因此，目前该钩子正慢慢被 React 移除，官方表示，
componentWillMount 只能继续使用至 React 17，这就是说到了 React18 就不能用了。为什么不是useLayoutEffect
useLayoutEffect 的出现是为了解决 useEffect 的页面闪烁问题。useEffect 是在组件挂载后异步执行的，并且执行事件会更加往后，如果我们在 useEffect 里面改变 state 状态，那么页面会出现闪烁（state 可见性变化导致的）。而 useLayoutEffect 是在渲染之前同步执行的（准确的说，uselayout在渲染之前是其在commit阶段之前执行，因为当前的DOM树在内存中还没有挂载到root上面），在这里执行修改 DOM 相关操作，就会避免页面闪烁的情况。
一般的渲染流程：
- React 前面的步骤：渲染虚拟 Dom，调度 effects，更新真实DOM
- 调用
useLayoutEffect
- React 让权给浏览器重绘最新的 DOM
- 调用
useEffect
在 React Hook 中，函数组件并没有
constructor 的概念，我们大多数是通过 useEffect 来模拟组件的生命周期，比如componentDidMount 和 componentWillUnMountcomponentDidMount：当组件挂载完成之后调用，一般用来监听浏览器事件、请求接口加载数据
componentWillUnMount：在组件销毁之前调用，通常是用来做一些清除动作，比如移除事件监听、清除定时器等等
我们可以利用 useEffect 来这么实现这两个生命周期：
值得注意的是，这并不能完全等同于
componentWillMount，因为存在代码顺序带来的问题，比如：在这里，
111 会在 useComponentWillMount 之前执行，而 class 的 componentWillMount 中，是优先其他代码执行的。- Twikoo