Reactjs 自定义挂钩正在更新父组件或子组件，但不能同时更新两者

我的目标是使用钩子来获取应用程序任何部分的当前状态。我知道我们可以使用

useContext

来实现它，但我见过许多库使用自定义钩子做同样的事情，比如

useHook

。对于下面的一个简单钩子，当屏幕宽度改变时，子组件或父组件都会使用新的屏幕宽度大小进行更新，但不能同时使用两者！以下是有关以下内容的详细信息，演示位于：

import React，{useState}来自“React”；
常量useHook=（）=>{
const[screenWidth，setScreenWidth]=useState（window.screen.width）；
window.onresize=（）=>设置屏幕宽度（window.screen.width）；
返回{screenWidth}；
};
函数子（）{
const{screenWidth}=useHook（）；
返回子屏幕宽度：{ScreenWidth}；
}
函数App（）{
const{screenWidth}=useHook（）；
返回(
父屏幕宽度：{screenWidth}
);
}
导出默认应用程序；

这就是输出的样子。理想情况下，我希望两者的宽度相同

---

谢谢你的帮助！如果有人能帮我澄清这个概念，我将不胜感激，谢谢！：）

因为子组件或父组件将

重写（重新声明）

调用

window.onresize

。我建议您使用事件侦听器重新调整回调大小：

const useHook = () => {
    const [screenWidth, setScreenWidth] = useState(window.screen.width);

    useEffect(() => {
        function updateSize() {
            setScreenWidth(window.screen.width);
        }
        
        window.addEventListener('resize', updateSize);
        updateSize();
        return () => window.removeEventListener('resize', updateSize);
    }, []);

    return { screenWidth };
};

---

谢谢你的解释！现在工作得很好。：）

const useHook = () => {
    const [screenWidth, setScreenWidth] = useState(window.screen.width);

    useEffect(() => {
        function updateSize() {
            setScreenWidth(window.screen.width);
        }
        
        window.addEventListener('resize', updateSize);
        updateSize();
        return () => window.removeEventListener('resize', updateSize);
    }, []);

    return { screenWidth };
};