Как максимизировать производительность в React при получении контролируемого ввода от нескольких компонентов? - PullRequest
Новая
       11

Как максимизировать производительность в React при получении контролируемого ввода от нескольких компонентов?

0 голосов
/ 18 марта 2020

Я создал родительский компонент, который имеет несколько дочерних компонентов. Каждый из этих дочерних компонентов имеет данные, которые передаются родительскому компоненту, который отправляет эти данные в вызов API. Структура выглядит следующим образом: 

const ParentComponent = () => {
  const [child1input, setChild1Input] = useState("");
  const [child2input, setChild2Input] = useState("");
  const [child3input, setChild3Input] = useState("");
  const [child4input, setChild4Input] = useState("");

  const submitData = async () => {
    const payload = {
      input1: child1input,
      input2: child2input,
      input3: child3input,
      input4: child4input
    };

    await axios.post('route', {...payload});
  }

  return (
    <Fragment>
      <Child1 input={child1input} setInput={setChild1Input} />
      <Child2 input={child2input} setInput={setChild2Input} />
      <Child3 input={child3input} setInput={setChild3Input} />
      <Child4 input={child4input} setInput={setChild4Input} />
      <Button onClick={submitData}>Submit</Button>
    </Fragment>
  );
};

Теперь, очевидно, каждый раз, когда каждый компонент обновляет состояние родителя (каждое нажатие клавиши для полей ввода), он обновляет родительский компонент и, следовательно, каждый дочерний компонент. Это оказывает ОГРОМНОЕ влияние на производительность и приводит к тому, что поведение текстового поля становится очень медленным.

Я хотел бы знать, как бы я обработал изменение ввода из одного текстового поля в каком-либо дочернем компоненте, не вызывая повторную визуализацию все

1 Ответ

1 голос
/ 18 марта 2020

Вы можете использовать React.memo для Child компонента и useCallback для Parent one 

const handleInput1 = useCallback(
    (e) => {
        setChild1Input(e.target.value)
    },[setChild1Input],
)
<Child1 input={child1input} setInput={handleInput1} />

------------------------------------------------------

export default React.memo(Child1);
...