时间戳

首页 > 解决方案 > 这个组件是什么以及它与其他组件有何不同

reactjs - 这个组件是什么以及它与其他组件有何不同

问题描述

我正在自学 React，只是想知道是否有人可以为我解决问题。

我有这个组件，它似乎正在做我需要它做的一切：

const Projects = ({ projectData }) => {

  const { url } = useRouteMatch();

  return (

    {projectData.map((project) => (

          <div className="project-container" key={project.id}>
            <div className="project-image">
            </div>
            <div>
              <h2>{project.name}</h2>
              <p>{project.description}</p>
              <div>
                <Button class="button link_right relative" linkTo={`${url}/${project.id}`} btnText="Explore" />
              </div>
            </div>
          </div>

        ))}

  );
};

export default Projects;

在观看教程和阅读文档时，我通常会看到函数和类组件，但不会看到：

const ComponentName = () => {

所以，我的问题是：

谢谢！

标签： reactjscomponents

解决方案

由于调用构造函数和继承，创建类的实例太慢了。功能组件只是功能，没有这样的开销。

此外，还有如何治疗this。在课堂上，实体this往往是不清楚的，这让我们感到困惑。箭头函数减少它，但是使用类，我们必须使用this. this也造成了复杂的状态管理。而类对象本身就有状态，所以很麻烦。

功能，仔细定义，很容易保持纯净。它本身没有状态。这意味着状态管理不会打扰我们。数据流被清除。

推荐阅读