依赖项更改后 ReactJS useEffect 未呈现

Question

所以我目前正在使用 React Hooks，我正在尝试使用 useEffect。 它假设每当依赖关系发生变化时，useEffect 就会重新渲染，对吗？ 但这对我不起作用。 这是我的代码：

const [slidesPerView, setSlidesPerView] = React.useState(0)

  React.useEffect(() => {
    setSlidesPerView(() => (window.innerWidth <= 375 ? 1 : 2))
    console.log("rerender?", slidesPerView)
  }, [window.innerWidth])

每次更改屏幕尺寸时，useEffect 都不会重新渲染。 我想知道我做错了什么？

Answer 1

useEffect将响应props更改或state更改。

每次屏幕大小改变组件都不知道window.innerWidth是否改变，因为它不在state或props 。

要使其工作，您需要将window.innerWidth存储到 state 中，并将事件侦听器附加到您的window ，每当window大小更改时，它将获取window.innerWidth并将其存储到state ，并且随着state更改，您的useEffect将重新获得-run，最后你的组件将被重新渲染。

const [size, setSize] = React.useState(window.innerWidth)


React.useEffect(() => {
    //Attach event on window which will track window size changes and store the width in state
    window.addEventListener("resize", updateWidth);

    setSlidesPerView(() => (size <= 375 ? 1 : 2));
    console.log("rerender?", slidesPerView);

    //It is important to remove EventListener attached on window.   
    return () => window.removeEventListener("resize", updateWidth);
}, [size])

const updateWidth = () => {
    setSize(window.innerWidth)
}

演示