Reactjs:功能组件和类组件之间有什么区别

Question

任何人都可以详细解释Reacjts中功能组件和类组件之间的区别吗？当我们使用功能组件时和使用类组件时.

Answer 1

这是一篇很棒的文章,"演示和容器组件",作者Dan Abramov可以帮助你.

这是一个人;博士; 我理解这个的方式:

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

   • 你需要访问组件的生命周期方法(即:componentWillMount或componentDidMount) - 注意:自从React 16.8开始,这不再是真的了,我强烈建议你阅读React Hooks,因为一旦你对它们感到满意,它们会让事情变得更简单;
   • 您的组件可以直接访问您的商店,从而保持状态(有些人也称这种组件,智能组件或容器).

2. 当你的组件只接收道具并将它们呈现给页面时,你就会有一个"无状态组件"(有些人将这些组件称为哑组件或表示组件)并且可以使用纯函数来表示它,它可以像这样简单

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

希望这可以帮助.

Answer 2

看到这张图片。我来得太晚了，但我会帮助其他人。

图片来源是Udemy 课程