React 应用程序开发的正确方法

Question

我正在尝试学习 React，并希望获得有关如何最好地使用 React 创建应用程序的明智意见。

我了解到可重用性是 React.js 开发的一个重要方面。这意味着能够在应用程序中的多个位置甚至不同的项目中使用相同的组件。我想更详细地了解这一点。

为了便于理解，假设我的应用程序管理员工。

我创建了一个功能组件，其中包含员工姓名、地址、部门、经理等的输入字段。

这个功能组件可以像这样在AddEmployee页面和UpdateEmployee页面中使用

export default function AddEmployee () {
    .
    .
    return (
        <Employee data={null} display={toDisplay} />
    );
}

export default function UpdateEmployee () {
    .
    .
    return (
        <Employee data={myData} display={toDisplay} />
    );
}

同样，我可以为表格创建一个功能组件，在应用程序中需要表格的地方进行排序、分页、编辑和删除，就像这样

<Table columns={columns} data={data} flag={isActive} sortBy={sortBy} />

我对可重用性的理解是否正确，或者可重用性还有更多内容吗？

此外，如果在创建与 Angular 不同的 React 应用程序时我应该记住其他事情，请告诉我。

谢谢

Answer 1

是的，你的理解是正确的。抽象一点来说，可重用性就是使用相同的模板（组件）并根据上下文进行配置。您提供的示例 - 使用 props 配置组件，正是这一原则的示例。

还有一些高级概念，例如 react hooks，它允许您在组件之间共享数据（不仅仅是将 props 从父级传递到子级）。您可以找到许多关于该主题的优秀视频和文章，但它们可能没有明确提及其背后的可重用性概念。记住这一点将有助于您更好地理解。

此外，如果您刚刚开始学习 React，您可能需要熟悉重要的概念，例如状态管理（如

useState

）和副作用（如

useEffect

）

编码快乐！