Как сделать компоненты React более пригодными для повторного использования?

Question

Я изучал React и работал над проектом в прошлом месяце, но я начинаю понимать, что мои компоненты не обязательно «повторно использовать». Я знаю, что повторное использование - важная концепция React, но я не могу понять, как упростить мои компоненты, чтобы они были такими.

Например, у меня есть приложение To-Do, использующее response-beautiful-dnd, которое содержит три компоненты: DragDropContext, Droppable и Draggable. Общее приложение теперь содержит четыре компонента: основной компонент приложения, который передает данные в три компонента react-beautiful-dnd. Пока это невероятно просто и можно использовать повторно.

Теперь я хочу добавить информационную кнопку для каждой задачи, которая, когда пользователь щелкает, вызывает пятый компонент, Info. Для этого мне нужно добавить logi c в компонент Draggable. Затем я хочу добавить функцию, позволяющую мне добавлять / удалять задачи из списка. Для этого мне нужно изменить компоненты DragDropContext или Droppable, чтобы предотвратить рендеринг выбранной задачи Draggable.

На этом этапе то, что когда-то было повторно используемым компонентом, теперь специализировано. На данный момент это чрезвычайно упрощенная версия моего проекта. У меня тот же список дел, но более 10 компонентов, которые должны взаимодействовать друг с другом, поэтому ни один из них не может быть повторно использован за пределами этого проекта без значительного изменения кода для каждого использования. Есть ли какая-то важная концепция, которую мне не хватает, или это так?

Answer 1

Трудно точно сказать, в чем проблема, не глядя на конкретные c проектные решения, но краеугольный камень философии реакции - сделать компоненты повторно используемыми не только в конкретном c проекте, которым владеет одна команда, но даже в разных командах, которые работают над разными проектами.

React достигает этого благодаря своему стилю declarative programming, что в основном означает - в контексте компонентов реакции - то, как компонент ведет себя, зависит только от свойств, которые передается ему. Вот почему response всегда поощряет вас держаться подальше от доступа к dom внутри ваших компонентов.

При этом response дает вам syntax through framework выполнения этого декларативного программирования, вам все равно нужно убедиться, что вы используете это syntax, как и предполагалось при согласовании с философией реагирования - я имею в виду, что вы все еще можете иметь правильный синтаксис, но еще не согласовывать с философией реагирования.

Есть много вещей, которые необходимо сделать, чтобы сделать определенный компонент можно повторно использовать, от имени самого компонента до имени реквизита, и многие другие вещи, которые выходят за рамки одного ответа о переполнении стека. Но одна важная вещь, о которой следует помнить, чтобы создавать повторно используемые компоненты, заключается в том, что повторно используемые компоненты представляют собой дамп, они вообще не связаны с внешним миром, даже если ваше приложение является первым потребителем и, возможно, единственным потребителем их. Другими словами, вам нужно создать два типа компонентов, интеллектуальный и дамп, интеллектуальные компоненты должны обрабатывать вещи, связанные с бизнес-логикой c, выборкой данных и т. Д. c ... а компоненты дампа - это просто компоненты пользовательского интерфейса. , что их поведение можно легко ожидать от основанных на них реквизита.