Как оптимизировать код в React Hooks с помощью memo - PullRequest
Новая
       46

Как оптимизировать код в React Hooks с помощью memo

1 голос
/ 26 сентября 2019

У меня есть код .

, а вот фрагмент кода 

  const [indicators, setIndicators] = useState([]);
  const [curText, setCurText] = useState('');
  const refIndicator = useRef()

  useEffect(() => {
    console.log(indicators)
  }, [indicators]);

  const onSubmit = (e) => {
    e.preventDefault();
    setIndicators([...indicators, curText]);
    setCurText('')
  }

  const onChange = (e) => {
    setCurText(e.target.value);
  }


  const MemoInput = memo((props)=>{
    console.log(props)
    return(
      <ShowIndicator name={props.name}/>
    )
  },(prev, next) => console.log('prev',prev, next)
  );

Он показывает каждый индикатор каждый раз, когда я добавляю в форму.

Проблема в том, что ShowIndicator обновляется каждый раз, когда я что-то добавляю.

Есть ли способ ограничить время рендеринга моего приложения, потому что, например, я создал 3 ShowIndicators, тогда оно будеттакже рендеринг 3 раза, что я считаю очень дорогостоящим в долгосрочной перспективе.

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

Ответы [ 3 ]

1 голос
/ 26 сентября 2019

Ссылка на песочницу:

https://codesandbox.io/s/musing-kapitsa-n8gtj

App.js 

  // const MemoInput = memo(
  //   props => {
  //     console.log(props);
  //     return <ShowIndicator name={props.name} />;
  //   },
  //   (prev, next) => console.log("prev", prev, next)
  // );

  const renderList = () => {
    return indicators.map((data,index) => {
      return <ShowIndicator key={index} name={data} />;
    });
  };

ShowIndicator.js 

import React from "react";

const ShowIndicator = ({ name }) => {
  console.log("rendering showIndicator");
  const renderDatas = () => {
    return <div key={name}>{name}</div>;
  };

  return <>{renderDatas()}</>;
};

export default React.memo(ShowIndicator);    // EXPORT React.memo
1 голос
/ 26 сентября 2019

Наблюдая за поведением данного приложения-песочницы, кажется, что все приложение рендерится n раз, когда имеется n индикаторов .

Я раздвоил песочницу и переместил список в другой функциональный компонент(и memo 'редактировал его, основываясь на реквизитах prev и next.

Это обеспечит отображение моего «Списка» при каждом добавлении нового индикатора. Все приложение будет отображатьсятолько когда новый индикатор добавлен в список.

Оформить заказ этой песочнице, раздвоенной от вашей - https://codesandbox.io/embed/avoid-re-renders-react-l4rm2

1 голос
/ 26 сентября 2019

React.memo остановит рендеринг вашего дочернего компонента, если родительский рендеринг (и если реквизиты одинаковы), но это не помогает в вашем случае, потому что вы определили компонент внутри компонента App.Каждый раз, когда приложение рендерится, вы создаете новую ссылку на MemoInput.

Обновленный пример: https://codesandbox.io/s/currying-tdd-mikck

...