javascript - 如何使 React 组件更可重用？

Question

我一直在学习 React，并且在过去的一个月里一直在做一个项目，但我开始意识到我的组件不一定是“可重用的”。我知道可重用性是 React 的一个重要概念，但我不知道如何简化我的组件。

例如，我有一个使用 react-beautiful-dnd 的 To-Do 应用程序，它包含三个组件:DragDropContext、Droppable 和 Draggable。整个应用程序现在包含四个组件:主要的 App 组件，它将数据传递到三个 react-beautiful-dnd 组件。到目前为止，这是非常简单且可重用的。

现在，我想为每个任务添加一个信息按钮，当用户单击该按钮时，会弹出第五个组件 Info。为此，我需要向 Draggable 组件添加逻辑。接下来我想添加一个功能，允许我从列表中添加/删除任务。为此，我需要修改 DragDropContext 或 Droppable 组件以防止它呈现选定的 Draggable 任务。

在这一点上，曾经是可重用的组件现在是专门的。这是我目前项目的一个极其简化的版本。我有相同的待办事项列表，但有 10 多个组件需要相互通信，这使得它们在这个项目之外都不可重用，而无需为每次使用大量修改代码。是不是我遗漏了一些重要的概念，或者是这样吗？

Answer 1

如果不查看具体的设计决策，很难准确地说出问题是什么，但 React 哲学的基石是让组件不仅可以在一个团队拥有的特定项目中重用，而且甚至可以跨不同的团队重用不同的项目。

React 通过其声明式编程 风格实现了这一点，这基本上意味着 - 在 React 组件的范围内 - 组件的行为方式仅基于传递给它的 Prop 。这就是为什么 React 总是鼓励您远离访问组件内部的 dom。

话虽如此，React 为您提供了通过框架的语法 进行声明式编程，您仍然必须确保在与React 哲学 - 我的意思是你仍然可以拥有正确的语法，但还没有与 React 哲学保持一致。

要使某个组件可重用，需要做很多事情，从组件本身的名称到 props 的名称，还有许多其他事情超出了一个堆栈溢出答案的范围。但是为了制作可重用组件，要记住一件重要的事情，就是可重用组件是转储的，它们根本不与外界耦合，即使您的应用程序是它们的第一个消费者，也可能是唯一的消费者。换句话说，你必须创建两种类型的组件，smart 和 dump，smart 组件应该处理与业务逻辑、数据获取等相关的事情......而 dump 组件只是 ui 组件，它们的行为很容易被基于他们的 Prop 所期待。