Как реализовать производное состояние в перехватчиках реакции

Question

function ScrollView(props) {
  const [isScrollingDown, setIsScrollingDown] = useState(false);

  useEffect(() => {
    setIsScrollingDown(props.row)
  }, [props.row])

  // this is a fake function to show its own logic to change the state,
  // and this function could be called in somewhere to make the isScrollingDown
  // state to be a derived state
  const handleClick = () => {
    setIsScrollingDown(false)
  }

  return `Scrolling down: ${isScrollingDown}`;
}

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

Answer 1

Как правило, с вашей реализацией проблем нет, так как isScrollingDown просто реагирует на изменения значения row props.

Однако я чувствую, что нет необходимости использовать производное состояние в вашем сценарии, так как logi c довольно прост.

Будет гораздо более интуитивно понятным избавиться от необходимости поддерживать состояние компонента и удалить любые другие источники ненужного повторного рендеринга.

function ScrollView({ row }) {
  return `Scrolling down: ${row}`;
}

---

Изменить: учитывая, что на самом деле существует необходимость во внутреннем состоянии, я бы предложил некоторые другие оптимизации, которые заключались бы в выполнении проверки в хуке useEffect, так что вы только обновляете состояние, когда значения props и state различаются:

useEffect(() => { 
  if (props.row === isScrollingDown {
    return;
  }
  setIsScrollingDown(props.row);
}, [props.row]);