reactjs中函数方式和分类方式的区别

Question

我在探索 reactjs 并注意到定义元素/组件的两种方式。

class Welcome extends React.Component {
  render() {
      return <h1>Hello, {this.props.name}</h1>;    
  };
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

以及功能方法：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

它们在结果方面是相同的。但至少对我来说，功能性 appracoh 更干净。

什么带来了分类方法：来自 reactjs 文档：

这让我们可以使用其他功能，例如本地状态和生命周期挂钩。

除了状态，分类的生命周期钩子与纯函数方法相比，还有其他优势吗？

什么时候用哪一个？

Answer 1

除了状态，分类的生命周期钩子与纯函数方法相比，还有其他优势吗？

没有。

什么时候用哪一个？

如果您需要类提供的附加功能，则必须使用类 (*)。否则更多的是个人喜好问题。

---

*：例如，生命周期方法可让您实现逻辑以避免重新渲染对性能很重要的组件。