Как установить постоянную переменную состояния с помощью хуков? - PullRequest
Новая
       14

Как установить постоянную переменную состояния с помощью хуков?

0 голосов
/ 24 мая 2019

Допустим, у меня есть некоторая переменная состояния width, и я знаю, что она никогда не изменится, но мне нужно выполнить некоторые вычисления на ней, основываясь на пропе, который я получаю. Я не хочу делать это в теле функции, так как она будет выполняться при каждом повторном рендеринге. Итак: 

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const [width, setWidth] = useState(SOME_CONSTANT_NUMBER * multiplier);

  return (
    <div>
      {width}
    </div>
  );
}

Теперь я также создал функцию setWidth, которую никогда не буду использовать.

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

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const [width, setWidth] = useState(0);

  useHook(() => {
    const updatedWidth = SOME_CONSTANT_NUMBER * multiplier;
    setWidth(updatedWidth);
  }, []);

  return (
    <div>
      {width}
    </div>
  );
}

Я думаю, что худший подход будет ниже, так как он будет рассчитывать его при каждом повторном обращении: 

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const width = SOME_CONSTANT_NUMBER * multiplier;
  return (
    <div>
      {width}
    </div>
  );
}

* Обратите внимание, что этот пример прост, но предположим, что реквизитов намного больше, и что вычисления для этого width вычислительно тяжелые.

Ответы [ 3 ]

4 голосов
/ 24 мая 2019

Для этого сценария есть useMemo. 

 const width = useMemo(() => SOME_CONSTANT_NUMBER * multiplier, [multiplier]);

Обратите внимание, что useMemo само по себе имеет стоимость (это еще одна функция), поэтому вы должны использовать ее, только если вы знаете, что вычисление значения действительно дорого означает: вызывает лаги (если нет, вы должны действительно проверьте производительность, и не увеличится ли useMemo)

2 голосов
/ 24 мая 2019

Похоже, вы должны использовать крючок useMemo https://reactjs.org/docs/hooks-reference.html#usememo

    const width = useMemo(() => SOME_CONSTANT_NUMBER * multiplier , [multiplier])
1 голос
/ 24 мая 2019

На самом деле вам не нужно разбирать его по штатам, но давайте следовать вашему подходу: 

const MY_RATIO = 3
const SomeComponent = ({value}) =>{
    const [state, setter] = useState(value * MY_RATIO)
    useEffect(() =>{
        setter(value * MY_RATIO)
    }, [value, MY_RATIO])
}

Теперь вы обновляете состояние только тогда, когда меняется ваш реквизит value. Но лучшим подходом было бы использовать useMemo

const memoizedValue = useMemo(() => MY_RATIO * value, [MY_RATIO, value])
...