为什么使用无状态功能组件而不是基于类的组件？

Question

我正在学习 ReactJS，并且了解到有 UI 组件和容器组件。容器组件是使用classes扩展React.Component和包含state以及很好的旧render方法实现的，而 UI 组件是使用创建的functions，它们只关心 UI，因为它们只从props.

示例无状态功能组件：

const Ninjas = (props) => {
    const { ninjas } = props;

    const ninjalist = ninjas.map((x) => {
        var divStyle = {
            color: getRandomColor(),
        };

        return (
            <div className="ninja" key={x.key} style={divStyle}>
                <p>Name: {x.name}</p>
                <p>Age: {x.age}</p>
                <p>Belt: {x.belt}</p>
            </div>
        );
    });
    return <div className="ninja-list">{ninjalist}</div>;
};

export default Ninjas;

与容器组件相同的示例

export default class Ninjas extends Component {
    getRandomColor = () => {
        ....
        return color;
    };

    render() {
        const { ninjas } = this.props;

        const ninjalist = ninjas.map((x) => {
            var divStyle = {
                color: this.getRandomColor(),
            };

            return (
                <div className="ninja" key={x.key} style={divStyle}>
                    <p>Name: {x.name}</p>
                    <p>Age: {x.age}</p>
                    <p>Belt: {x.belt}</p>
                </div>
            );
        });
        return <div className="ninja-list">{ninjalist}</div>;
    }
}

所以我的问题是，render当我们可以轻松地完成与容器组件相同的事情时，为什么我们还要费心去制作 UI 组件（而不是使用容器组件中使用的方法）。

Answer 1

功能性无状态组件（您错误地称为 UI 组件，所有组件都是有状态和无状态的 UI 组件）只是一种创建组件的简写方法，这些组件仅根据传递的 props 渲染某些内容，不需要保持内部状态.

当然，我们总是可以使用基于类的组件，这些组件扩展了React.Component. 但是，如果可以的话，为什么不使用速记来节省时间和空间并简化事情呢？没有什么强迫您创建功能性组件，您始终可以使用基于类的组件，仅当您需要简化并节省时间和空间时。

根据React文章中的Functional vs Class-Components：

那么我为什么要使用函数式组件呢？

您可能会问自己，如果功能组件删除了这么多好的特性，为什么还要使用它们。但是在 React 中使用函数式组件有一些好处：

1. 函数式组件更易于阅读和测试，因为它们是没有状态或生命周期挂钩的纯 JavaScript 函数
2. 你最终得到的代码更少
3. 它们帮助您使用最佳实践。分离容器组件和展示组件会变得更容易，因为如果您无法访问组件中的 setState()，您需要更多地考虑组件的状态
4. React 团队提到在未来的 React 版本中可能会有功能组件的性能提升

我要添加第 5 点，即React 引用（使用 React 16.3+）提供直接访问 DOM 节点的功能不能与功能组件一起使用。

在 React v.16.8+中引入了useState钩子，它使功能组件在保持功能的同时保持状态完整。

此外，随着React.memo 高阶组件的引入，我们可以使用记忆化来避免重新渲染功能组件，因为它为相同的 props 渲染相同的东西（对差异进行浅层测试）