useEffect для обновления только определенных ключей

Question

У меня есть сценарий, в котором наше приложение имеет несколько функций, которые находятся в пределах componentDidUpdate. В каждой из функций они проверяют, обновляются ли их конкретные данные. Например:

componentDidUpdate(prevProps) {
 this.handleFoo(prevProps)
 this.handleMoreFoo(prevProps)
}

handleFoo(prevProps){
  if(this.props.foo != prevProps.foo){
    //Do Something
 }
}

handleMoreFoo(prevProps){
  if(this.props.moreFoo != prevProps.moreFoo){
    //Do Something
 }
}

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

useEffect(() => {
   if(fooKey){ handleFoo() }
   if(moreFoo) { handleMoreFoo() }
 }, [fooKey, moreFooKey])

Возможно ли это? Это желательно?

Answer 1

Вот как вы можете сделать то, что у вас было раньше, используя хуки в функциональном компоненте.

Я бы определил пользовательский хук для имитации componentDidUpdate(), основываясь на ответе на Make ReactХук useEffect не запускается при начальном рендеринге :

function useUpdate (effect, deps) {
  const firstUpdate = useRef(true);
  const update = useCallback(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
    } else {
      return effect();
    }
  }, [firstUpdate, effect]);

  useLayoutEffect(update, deps);
}

...

useUpdate(handleFoo, [fooKey]);
useUpdate(handleMoreFoo, [moreFooKey]);

useLayoutEffect() гарантирует, что обратные вызовы handleX() вызываются на той же фазе каждого рендера, что и аналогичный жизненный цикл componentDidMount() и componentDidUpdate()методы. Если вас не волнует точная фаза их вызова, вы можете заменить useLayoutEffect() на useEffect().

. Остальная часть пользовательского хука гарантирует, что он пропускает вызовы handleX() callbacks. после первоначального рендера. Если ваши handleX() обратные вызовы могут быть вызваны после первоначального рендеринга, то вы можете просто вызвать useEffect() непосредственно в вашем функциональном компоненте вместо этого useUpdate() пользовательского перехвата.