想想react会怎么做（8）之 render主流程

前言

做了这么久的铺垫，现在我们终于可以进入正式的react渲染流程了

主流程：一张图

对于图中一些的补充

useEffect

最常用的，不加赘述了，它允许你通过它连接外部系统

1. 与网络、某些浏览器 API 或第三方库保持连接
2. 请求数据

useLayoutEffect

useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发

比如：调用 useLayoutEffect 在浏览器重新绘制屏幕之前进行布局测量：

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
  }, []);
  // ...

注意：

useInsertionEffect

useInsertionEffect 是React 18 中引入的新特性

useInsertionEffect 可以在布局副作用触发之前将元素插入到 DOM 中

比如：调用 useInsertionEffect 在任何可能需要读取布局的副作用启动之前插入样式

import { useInsertionEffect } from 'react';

// 在你的 CSS-in-JS 库中
function useCSS(rule) {
  useInsertionEffect(() => {
    // ... 在此注入 <style> 标签 ...
  });
  return rule;
}

注意：