Redux 的 React.memo 问题

Question

我有两个组成部分。

function Parent(props){

  const handleClick = () => {
   console.log(props.stateA);
  };

  return <div><Child text={stateB} handleClick={handleClick} /></div>
}

const mapStateToProps = (state) => {
  return {
    stateA: state.stateA // stateA will be changed somewhere else
    stateB: state.stateB
  }
};

export default connect(mapStateToProps)(Parent);

function Child(props) {
   return <div onClick={props.handleClick}>{props.text}</div>
}

export default React.memo(Child,(prev, next) => {
   return prev.text === next.text
});

我的问题是当 stateA 在某处更改时，单击Child将记录以前的 stateA。 我无法访问最新的 stateA。

您可以看到，我不想在 stateA 更改时重新渲染Child ，它应该仅在 stateB 更改时重新渲染。 但是我想在单击Child时访问Parent中的最新 stateA 。

有什么方法可以解决这个问题吗？

Answer 1

如果Parent组件是一个功能组件，那么你可以像这样使用

 const [valueA, setValueA] = useState('')
 useEffect(() => {
      setValueA(props.stateA)
 },[props.stateA])

 console.log(valueA) // latest Value of stateA
 return <div><Child text={stateB} handleClick={handleClick} /></div>

我希望它对你有用。

Answer 2

你应该可以访问props.stateA没问题

const handleClick = () => {
   console.log(props.stateA);
};

因为您在handleClick访问了父母的道具。 因此，如果props.stateA是陈旧的，那么合乎逻辑的结论是父级没有收到最新的道具。 我们可以看看你如何更新道具/状态吗？

Answer 3

您可以保留对stateA的ref ，这样它就是您调用handleClick时记录的内容。 useRef确保使用最后一个值。

function Parent(props){
  const stateARef = useRef(props.stateA);

  useEffect(() => {
    stateARef.current = props.stateA;
  }, [props.stateA])

  const handleClick = () => {
   console.log(stateARef.current);
  };

  return <div><Child text={stateB} handleClick={handleClick} /></div>
}

Answer 4

您遇到的问题与Redux无关。

Parent 组件将 2 个 props 传递给子组件：需要时更改的文本和每次Parent 组件渲染时更改的handleClick - 每次都会创建一个新的 function。

但是 React.memo 只检查文本属性，所以孩子经常收到一个陈旧的handleClick 。

正确的解决方案是用useCallback包装handleClick并检查React.memo中的所有道具（默认情况下反应会这样做）。

function Parent(props){

  const handleClick = useCallback(() => {
   console.log(props.stateA);
  }, []);

  return <div><Child text={stateB} handleClick={handleClick} /></div>
}

const mapStateToProps = (state) => {
  return {
    stateA: state.stateA // stateA will be changed somewhere else
    stateB: state.stateB
  }
};

export default connect(mapStateToProps)(Parent);

function Child(props) {
   return <div onClick={props.handleClick}>{props.text}</div>
}

export default React.memo(Child);