react hooks 实现生命周期

class 组件	Hooks 组件
constructor	useState
getDerivedStateFromProps	useState 里面 update 函数
componentWillMount	useLayoutEffect
shouldComponentUpdate	useMemo
render	函数本身
componentDidMount	useEffect
componentDidUpdate	useEffect
componentWillUnmount	useEffect 里面返回的函数
componentDidCatch	useEffect 无
getDerivedStateFromError	useEffect 无

// constructor：函数组件不需要构造函数，我们可以通过调用 useState 来初始化 state。如果计算的代价比较昂贵，也可以传一个函数给 useState。
const [num, UpdateNum] = useState(0)


// getDerivedStateFromProps：一般情况下，我们不需要使用它，我们可以在渲染过程中更新 state，以达到实现 getDerivedStateFromProps 的目的。
function ScrollView({row}) {
  let [isScrollingDown, setIsScrollingDown] = useState(false);
  let [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // Row 自上次渲染以来发生过改变。更新 isScrollingDown。
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}
React 会立即退出第一次渲染并用更新后的 state 重新运行组件以避免耗费太多性能。
// componentWillMount useLayoutEffect 相当于componentWillMount
useLayoutEffect(() => {
  console.log("useLayoutEffect：相当于componentWillMount");
  return () => {
    console.log("useLayoutEffect-返回函数", new Date());
  };
}, [number]);

// shouldComponentUpdate：可以用 React.memo 包裹一个组件来对它的 props 进行浅比较
const Button = React.memo((props) => {
  // 具体的组件
});
// useMemo 相当于vue中computed， useMemo返回值：值 useCallBack 返回值：函数
const getDoubleNum = useMemo(() => {
    console.log("useMemo", "获取双倍的num");
    return 2 * number;
}, [number]);
复制代码注意：React.memo 等效于 PureComponent，它只浅比较 props。这里也可以使用 useMemo 优化每一个节点。


render：这是函数组件体本身。


componentDidMount, componentDidUpdate： 。
// componentDidMount
useEffect(()=>{
  // 需要在 componentDidMount 执行的内容
}, [])

useEffect(() => { 
  // 在 componentDidMount，以及 count 更改时 componentDidUpdate 执行的内容
  document.title = `You clicked ${count} times`; 
  return () => {
    // 需要在 count 更改时 componentDidUpdate（先于 document.title = ... 执行，遵守先清理后更新）
    // 以及 componentWillUnmount 执行的内容       
  } // 当函数中 Cleanup 函数会按照在代码中定义的顺序先后执行，与函数本身的特性无关
}, [count]); // 仅在 count 更改时更新
复制代码请记得 React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，因此会使得额外操作很方便


componentWillUnmount：相当于 useEffect 里面返回的 cleanup 函数
// componentDidMount/componentWillUnmount
useEffect(()=>{
  // 需要在 componentDidMount 执行的内容
  return function cleanup() {
    // 需要在 componentWillUnmount 执行的内容      
  }
}, [])
复制代码

componentDidCatch and getDerivedStateFromError：目前还没有这些方法的 Hook 等价写法，但很快会加上。

参考文章：juejin.cn/post/684490…