Преобразование функции componentWillReceiveProps для реагирования на хуки

Question

Привет всем с учетом базового c реагирующего компонента, который имеет componentWillReceiveProps. Я хочу преобразовать это, чтобы использовать реагирующие крючки. Теперь я посмотрел на этот вопрос здесь , и хотя ответ прост, я чувствую, что что-то не понимаю. Например:

export class Example extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    console.log('HELLO WORLD') // Note this isn't called on initial render
    if (nextProps.match.params.id != this.props.match.params.id) {
      console.log('testing....')
    }
  }

  render() {
    return (
      <div>Cool</div>
    );
  }
}

Я знаю, что из приведенного выше примера мы не попадем в оператор if, если nextProps не изменился. Теперь преобразование вышеупомянутого в функциональный компонент выглядит следующим образом:

export const Example = ({ ...props }) => {
  useEffect(() => {
    console.log('TESTING')
  }, [props.match.params.id])

  return (
    <div>Cool</div>
  )
}

Я также подготовил короткий GIF-файл записи того, что я вижу. https://recordit.co/hPuwGey6WM

Answer 1

К сожалению, useEffect предназначен для запуска на первом рендере, и каждый раз, когда его зависимости меняются.

Чтобы избежать запуска на первом рендере, вам придется написать свой собственный маленький пользовательский хук.

const useComponentWillReceiveProps = (callback, dependencies) => {
  const [firstRender, setFirstRender] = useState(true);

  useEffect(() => {
     if(firstRender) {
        setFirstRender(false);
        return;
     }
     callback();
  }, dependencies);
}

Кроме того, вы также можете использовать ссылки, чтобы избежать первоначального повторного рендеринга, например:

const useComponentWillReceiveProps = (callback, dependencies) => {
   const firstRender = useRef(true);

  useEffect(() => {
     if(firstRender.current) {
        firstRender.current = false;
        return;
     }
     callback();
  }, dependencies);
}

Answer 2

useEffect всегда запускается после первого рендера. Если вы не хотите запускать useEffect при первом рендере, вы можете использовать его в сочетании с useRef

const Example = ({ ...props }) => {
  const initialRender = useRef(true)
  useEffect(() => {
    if (initialRender.current) {
      initialRender.current = false;
    } else {
      // write code here
      console.log("TESTING");
    }
  }, [props.match.params.id]);

  return <div>Cool</div>;
};