Как запоминать пользовательский крючок React - PullRequest
Новая
       43

Как запоминать пользовательский крючок React

2 голосов
/ 26 апреля 2020 
const useSomeHook = ({number}) => {
  const [newNumber, setNewNumber] = useState(0)

  useEffect(() => {
    setNewNumber(number + 1)
  }, [number])
}

const SomeComponent = ({number, value, ...restProps}) => {

  useSomeHook({number})


  return <div>{number}</div>
}

Давайте представим, у меня есть этот случай. Каждый раз, когда в SomeComponent появляется какая-то новая опора, она вызывает мой useSomeHook хук, но я хочу предотвратить это. Я хочу вызывать его, только когда number изменено (memoize это). В других случаях не трогайте это. Но я не нашел решения по этому делу. Не могли бы вы помочь мне решить эту проблему?

Ответы [ 3 ]

2 голосов
/ 26 апреля 2020

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

0 голосов
/ 26 апреля 2020

При использовании cutstomEffect без return ничего, каждый раз, когда он вызывается, он создает свой собственный newNumber как 0, присваивая ему number + 1 и уничтожая его впоследствии. 

  const useSomeHook = (number) => {
    const [newNumber, setNewNumber] = useState(0)

    useEffect(() => {
      setNewNumber(number + 1)
     }, [number])
     return newNumber
  }

    const SomeComponent = ({number, value, ...restProps}) => {

        let newNumber = useSomeHook(number)


        return <div>{newNumber}{value}</div>
      }

если value изменится, а не number, let newNumber = useSomeHook(number) не запустится снова

рабочий пример - https://codesandbox.io/s/agitated-rhodes-3rqkl?file= / src / App. js

0 голосов
/ 26 апреля 2020

Я думаю, что вы ищете useMemo : 

function SomeComponent({number}) {
    const expensiveValue = useMemo(() => {
         return doSomeExpensiveCalcolationWith(number)
    }, [number])
    return <div>{expensiveValue}</div>
}

В этом случае expensiveValue будет пересчитан только при изменении числа, в противном случае его значение останется неизменным для нескольких делает.

...