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道具价值的变化做出反应。

但是，我确实认为您的场景中不需要使用派生状态，因为逻辑很简单。

更加直观地消除了维护组件状态的需要，并消除了其他不必要的重新渲染来源。

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

编辑：鉴于实际上确实需要内部状态，因此我建议进行一些其他优化：在useEffect钩子内进行检查，以使您仅在道具和道具出现时更新状态。状态值不同：

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

如何在React挂钩中实现派生状态

1 个答案: