Реагирует на обратный вызов с onClick не работает. Перенаправляет дочерний компонент

#reactjs #react-hooks

#reactjs #реагирует-перехваты

Вопрос:

TimeChild повторно отображается на изображении ниже даже после использования обратного вызова

1. Для меня это звучит правильно. Стандартное поведение react заключается в том, что если родительский компонент (Time) выполняет рендеринг, его дочерние элементы (div, кнопка, h2 и TimeChild) также выполняют рендеринг. Вы хотели использовать React.memo для TimeChild?

2. @NicholasTower Спасибо. Я хотел остановить повторный рендеринг дочернего компонента, т.е. TimeChild, поэтому я использовал обратный вызов. Нужно ли мне также использовать React memo?

Ответ №1:

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

 const TimeChild = React.memo(() => {
  // ...
});

Если вы сделаете это, то при рендеринге TimeChild он сначала выполнит === сравнение между каждым из своих старых реквизитов и каждым из своих новых реквизитов. Если все они одинаковы, TimeChild пропустит рендеринг.

Единственная роль, которая useCallback играет в этом, заключается в том, получает ли TimeChild функцию в качестве реквизита. Если это так, то вам нужно убедиться, что он получает одну и ту же функцию каждый раз, или Реагировать.Memo никогда не сможет пропустить рендеринг, потому что его реквизиты постоянно меняются. Но в вашем примере нет никаких реквизитов, которые передаются TimeChild, поэтому useCallback в этом нет необходимости.

Ответ №2:

Вы можете использовать ‘обратный вызов’ таким образом :

 
    import React, { useCallback, useState } from "react";
    
    const App = () => {
      const [count, setCount] = useState(0);
    
      const callBckValue = useCallback(() => {
        setCount((count) => count   1);
      }, []);
    
      return (
        <div>
          <h2>{count}</h2>
          <button type="button" onClick={callBckValue}>
            Click Me
          </button>
        </div>
      );
    };
    
    export default App;

Ответ №3:

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

Во-вторых, если вы уверены, что должны это сделать, используйте React.memo , использование примерно такое же, как componentShouldUpdate в компоненте класса