reactjs - 功能组件的主体与 componentDidMount

Question

componentDidMount在同一组件的以下两个版本中，一个是函数式的，另一个是基于类的，如果有的话，函数体中的代码和类案例中的体中的代码有什么区别？：

function Foo(props) {

  // some code goes here ...

  return <h1>Foo</h1>;
}


class Foo extends React.Component {
  componentDidMount() {  
    // code goes here ...
  }

  render() {
    return <h1>Foo</h1>;
  }
}

我仍然对安装与渲染之间的区别有些困惑，所以如果它是相关的，对此的评论也可能会有所帮助。

标签： reactjsmount

Answer 1

componentDidMount 函数中的代码可以预期该组件已添加到树中。在组件尚未安装时，外部代码至少会被调用一次。这对于函数组件以及在类组件中返回之前的渲染函数中的代码都是如此。

componentDidMount() 在组件安装后立即调用（插入到树中）。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是实例化网络请求的好地方。

为什么需要这个？在某些情况下，您只想在组件安装后触发某些功能。举个例子，在一个元素上使用一个 ref 来改变它的颜色。ref 只会在安装/渲染后设置。

对于功能组件，您可以使用 useEffect 挂钩来替换 componentDidMount 功能。

请参阅：https ://reactjs.org/docs/react-component.html#componentdidmount和https://reactjs.org/docs/hooks-effect.html

了解 React 类组件的生命周期也很有帮助：

见：https ://busypeoples.github.io/post/react-component-lifecycle/