Если я повторяюсь в React, должен ли я создать компонент?

Question

Я создаю простое приложение SPA, которое имеет LoginForm и Сбросить форму формуляра.

Оба эти компонента разделяют методы getInputFields() и handleSubmit()

Вот пример моего кода:

import React from 'react'; 

import InputField from './InputField'; 
import SubmitButton from './SubmitButton'; 

class ResetForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.getInputFields = this.getInputFields.bind(this); 
    } 
    handleSubmit(e) { 
    e.preventDefault(); 
    console.log('submitted'); 
    } 
    getInputFields() { 
    return [ 
     { type: 'email', placeholder: 'Email' } 
    ] 
    } 
    render() { 
    return (
    <form onSubmit={ this.handleSubmit }> 
     { 
      this.getInputFields() 
      .map((field) => <InputField type={ field.type } placeholder={ field.placeholder } />) 
     } 
     <SubmitButton /> 
     </form> 
    ) 
    } 
} 

export default ResetForm; 

И мой LoginForm имеет только различные данные (в пределах getInputFields())

If Повторяю, должен ли я автоматически думать о создании нового компонента?, например. в этом случае компонент <Form> и передать значения getInputFields() в форму в качестве опоры?

Answer 1

В целом, будь то создание webapp с помощью React или написание программы на Java или любом программном обеспечении, если вы повторяете код, часто бывает неплохо увидеть, как вы можете собрать все это в один источник. Это может не улучшить эффективность вашего программного обеспечения, но оно более чистое и удобнее в организации, а также меньше подверженности ошибкам, поскольку есть только одно место, где могут возникать ошибки.

Одной из приятных вещей в React является возможность создания многоразовых компонентов, и это может сделать упрощение создания и отладки приложений. Тем не менее, не все должно быть компонентом, если вы возьмете простую группу элементов, которые не используются повторно и превращают их в 3 разных компонента React только потому, что вы можете, это вроде как преждевременная оптимизация. Вы должны остановиться и подумать: «Я собираюсь многократно использовать эту группу HTML и какие преимущества получаю, если она в форме компонента?»

Для реактивов, в частности, для вашего примера, если поля ввода, данные о которых вы получаете, различаются по типу и номеру, а действия (действия), которые вы выполняете при представлении, различаются между двумя типами форм (которые Я предполагаю, что они есть), тогда вполне нормально иметь два разных компонента (например, вы делаете). У вас может быть дополнительный компонент, как вы сказали, компонент <Form />, который принимает значения getInputFields(), если вы хотите, но похоже, что HTML для вашей формы очень минимален. Просто элемент формы, с некоторыми динамическими компонентами и одной кнопкой отправки. Поэтому, поскольку это не так много HTML, и есть только два экземпляра, вы можете поместить его в компонентную форму, но это не то, что отчаянно нуждается в этом, и я уверен, что есть проблемы, о которых стоит беспокоиться. Там, как правило, две ситуации, я считаю, где я делаю компоненты:

1. Пучок HTML и связанных с ними функций используются много и много раз
2. Пучок HTML и связанных с ними функций используются несколько раз, но это LOT HTML или LOT функций, поэтому их повторение в каждом компоненте, который в них нуждается, - это раздувание вашего кода и затруднение для его чтения или отладки.

Что я обычно делаю, просто создаю компоненты, когда и когда вижу вещи повторное использование много раз, то время от времени (и в конце) я просматриваю и вижу, есть ли какие-то маленькие ngs здесь и там, которые потенциально могут быть сконденсированы до одного компонента React, чтобы сделать вещи немного чище.

В конце концов, полезно сделать компоненты по двум причинам, описанным выше, но если дело доходит до крошечных мелочей (например, 1 или два элемента HTML, которые повторяются, возможно, 2-3 раза), то я буду беспокоиться о более крупных сначала, прежде чем подчеркнуть мелочи.