Question

我正在学习ReactJS，并且已经了解到有UI组件和容器组件。容器组件是使用classes扩展React.Component来实现的，并包含state和良好的旧render方法，而UI组件是使用functions创建的，它们涉及只能使用用户界面，因为它们仅从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>;
    }
}

所以我的问题是，为什么我们本来可以轻松完成与容器组件相同的工作，但为什么还要费心制作UI组件（不使用容器组件中使用的render方法）。

Answer 1

无状态功能性组件（错误地称为UI组件，所有组件都是有状态的和无状态的UI组件）只是一种简化方法，用于创建组件，这些组件仅基于传递和执行的道具来呈现某些内容不需要保持内部状态。

当然，人们总是可以使用扩展React.Component的基于类的组件。但是，如果可以的话，为什么不节省时间和空间并简化事情呢？没有什么强迫您创建功能组件，只有在需要简化并节省时间和空间的情况下，您才可以始终使用基于类的组件。

根据Functional vs Class-Components in React文章：

那我为什么要完全使用功能组件？

您可能会问自己为什么应该在以下位置使用功能组件   全部，如果它们删除了许多不错的功能。但是有一些好处   您可以通过在React中使用功能组件来获得：


功能组件更易于阅读和测试，因为它们是无状态或生命周期挂钩的普通JavaScript函数

您最终得到的代码更少

它们帮助您使用最佳实践。分离容器和演示组件将变得更加容易，因为您需要考虑更多   如果您无权访问setState（）来了解组件的状态   您的组件

React团队提到，未来的React版本中功能组件的性能可能会提高

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

在React v.16.8 + useState hooks中引入了功能，使功能组件处于全状态，同时仍然可以运行。

此外，通过引入React.memo higher-order component，我们可以使用备忘录来避免重新渲染功能组件，因为它可以为相同的道具渲染相同的内容（对差异进行浅浅的测试）

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

1 个答案: