为什么 React.useCallback 会触发重新渲染，它不应该?

Question

我有 redux 连接的组件，并绑定了 onClick 操作。每次我单击它时都会重新渲染，尽管我使用useCallback钩子。这是我的简化组件：

const Map = props => {
const dispatch = useDispatch(); // from react-redux
const coordinates = useSelector(state => state.track.coordinates); // from react-redux
const onClick = useCallback( // from react
data => {
return dispatch({type: 'ADD_COORDINATES', payload: data});
},
[dispatch]
);
return (
<div className="Map">
<GoogleMap
onClick={onClick}>
<Track
coordinates={coordinates}
/>
</GoogleMap>
</div>
);
};

Answer 1

如果不提供任何额外的上下文，并且组件确实"简化"(没有其他可能导致渲染的内容(，Map组件将仅在其父渲染上重新渲染：

const Parent = () => {
const coordinates = useSelector(coordinatesSelector);
return <Map />;
};

在调度addCoordinates操作时，您可能会触发其父级。

您应该尝试记住Map组件：

如果您的函数组件在给定相同的 props 的情况下呈现相同的结果，您可以将其包装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能。这意味着 React 将跳过渲染组件，并重用上次渲染的结果。

const Map = () => {
...
return ....;
};
export default React.memo(Map);

---

问题更新后编辑：

您的组件由于文档中所述的useSelector而重新渲染：

调度操作时，useSelector(( 将对以前的选择器结果值和当前结果值进行引用比较。如果它们不同，组件将被强制重新渲染。如果它们相同，则组件将不会重新渲染。

因此，您可能需要添加其他equalityFn：

const coordinates = useSelector(state => state.track.coordinates, areSameCoords)