106.react hooks 中如何模拟 componentDidMount

nanslee commented 4 years ago

import React, {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    console.log('as ComponentDidMount');
  }, [])

  return (
    <>hello world</>
  )
}

zlx362211854 commented 4 years ago

hooks 中的 useEffect 可以处理副作用，用法为：

useEffect(() => {
    // 在props.name改变后执行
  }, [props.name])

数组中的参数为需要监听的对象，也就是说只有对象改变，才执行useEffect内部函数,如果数组为空，则在组件加载后执行一次

useEffect(() => {
    // 只在加载后执行一次
  }, [])

goldEli commented 4 years ago

在 react class 组件中 componentDidMount 用来处理真实 dom 第一次渲染完成后的副作用。

在 react function 组件中，用 react hooks 的 Effect 来处理真实 dom 渲染完成后的副作用。Effect 也涵盖了 componentDidUpdate，componentWillReceiveProps 的功能。即状态发生改变，页面更新后处理副作用。

useEffect(() => {
    // 1. 当第一页面渲染完成处理副作用
    // 2. 当 state 发生改变，触发页面渲染，渲染完成后处理副作用
}, [state])

zlx362211854 / daily-study

106.react hooks 中如何模拟 componentDidMount #162