Обновление состояния React Hooks во время рендеринга с использованием useMemo - PullRequest
Новая
       25

Обновление состояния React Hooks во время рендеринга с использованием useMemo

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

Можно ли использовать useMemo просто , чтобы избежать дополнительной проверки кода / переменных при проверке равенства при установке состояния во время рендеринга?

Пример: useMemo с setState во время рендеринга, взятого из этого редкого документированного варианта использования : 

function ScrollView({row}) {
  let [isScrolling, setIsScrolling] = useState(false);

  const lessCodeThanCheckingPrevRow = useMemo(
    () => {
      // Row changed since last render. Update isScrolling.
      setIsScrolling(true); // let's assume the simplest case where prevState isn't needed here
    },
    [row]
  );

  return `Scrolling down: ${isScrolling}`;
}

Выше значительно уменьшает код и только дополнительные переменныев противном случае используется для проверки на равенство, так почему же документы подразумевают, что проверки на равенство должны выполняться вручную?

Ответы [ 2 ]

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

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

const UnitUnderTest = ({prop}) => {
  let [someState, setSomeState] = useState(false);

  const lessCodeThanCheckingPrevRow = useMemo(
    () => setSomeState(current => !current), 
    [prop],
  );

  useEffect(() => console.log('update finished'), [prop])

  console.log('run component');

  return `State: ${someState}`;
}

const App = () => {
  const [prop, setProp] = useState(false);
  const handleClick = () => setProp(current => !current);

  return (
    <div>
      <button onClick={handleClick} >change prop</button>
      <UnitUnderTest prop={prop} />
    </div>
  )
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit recursing-hopper-4ynjm

Вывод при нажатии кнопки для изменения пропуска, передаваемого компоненту: 

> run component 
> run component 
> update finished

Как видите, компонент был запущен дважды до завершения цикла обновления.Это эквивалентно поведению getDerivedStateFromProps.

Я думаю, что нет более глубокой мысли о том, почему в документах предлагается немного другая техника.В некотором смысле это тоже ручная проверка, но аккуратно.+1 за идею.

0 голосов
/ 25 сентября 2019

Используйте ловушку useEffect для этого поведения.useMemo используется для хранения значения, которое может необязательно изменяться при каждом рендеринге, чтобы избежать бесполезного пересчета этого значения

...