功能组件的主体与 componentDidMount

Question

在同一组件的以下两个版本中，一个是功能性的，另一个是基于 class 的，如果有的话，函数体中的代码与主体中的代码有什么区别componentDidMount 在 class 的情况下？：

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>;
  }
}

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

Answer 1

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

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

为什么需要这个？在某些情况下，您希望仅在组件挂载后才触发某些功能。以在元素上使用 ref 来更改其颜色为例。 ref 只会在安装/渲染后设置。

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

参见：https://reactjs.org/docs/react-component.html#componentdidmount and https://reactjs.org/docs/hooks-effect.html

对理解 React class 组件生命周期也很有帮助：

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

功能组件的主体与 componentDidMount

Body of a functional compnent vs componentDidMount

mount

reactjs