javascript - ReactJS:功能组件和类组件有什么区别

Question

谁能详细解释一下ReactJS中函数组件和类组件的区别？

什么时候用函数式组件，什么时候用类组件？

Answer 1

这是一个 great article, "Presentational and Container Components" ，由 Dan Abramov 撰写，可以帮助您。

这是我理解这一点的tl;dr;:

1. 你必须使用 class CreatePostForm extends Component {}或 React.createClass()如果:

   • 您需要访问您的component's lifecycle methods (即:componentWillMount 或 componentDidMount)——注意:自React 16.8 ，这不再一定是真的，我强烈建议阅读 React Hooks因为一旦您熟悉了它们，它们就可以让事情变得更简单；
   • 您的组件可以直接访问您的商店，因此可以保持状态(有些人也称这些组件为:智能组件或容器)。

2. 当您的组件只接收 props 并将它们呈现到页面时，您就有了一个“无状态组件”(有些人称这些组件为dumb组件或展示组件)并且可以使用纯函数来表示它可以这么简单

   import React from 'react';
export default () => <p>Hello from React!</p>;

现在，重要的是要记住纯函数可以变得比这更复杂，如果您熟悉一些 ESNext 语法以及解构和传播属性，您可以拥有一个如下所示的展示组件:

import React from 'react';
import AnotherComponent from './AnotherComponent';

export default ({ children, ...rest }) =>
    <AnotherComponent extraProp="anExtraProp" { ...rest }>
        { children }
    </AnotherComponent>;

希望这对您有所帮助。