Question

我已经在初始组件加载时实现了窗口调整大小事件。该事件检测到窗口的内部宽度并将该值保存在一个钩子中。基于宽度钩子，还有第二个useEffect函数，该函数在宽度变化时触发：

export const AppRouter = (props) => {

    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    useEffect(() => {
        setAppLayoutForViewportWidth();
    }, [width]);
}

由于出现了意外的行为：整个组件在宽度钩子上重新渲染，而不仅仅是基于宽度钩子的useEffect。

有人可以说出原因，为什么整个组件都重新出售？我只能重新渲染基于宽度的useEffect吗？

Answer 1

为什么？

setState（{}）始终强制重新渲染。（除非您在以下情况中返回false：shouldComponentUpdate（nextProps，nextState））您可以通过在控制台中输入

来进行检查

componentDidUpdate(prevProps, prevState) {
    console.log("Component did update")
}

您的setWidth(window.innerWidth);将由于以下原因而更改状态：useState(window.innerWidth);将强制重新渲染。

如何预防：

如果您想控制何时重新渲染，请在shouldComponentUpdate中创建逻辑以在您希望防止重新渲染时返回false。

如果您使用的是功能组件，请查看React.Memo。有关该线程的更多信息：How can I prevent my functional component from re-rendering with React memo or React hooks?

React.Memo的功能类似于纯组件。但是，您可以还通过向它传递一个定义了什么的函数来调整其行为相等。基本上，此功能为shouldComponentUpdate，除非您希望不渲染，否则返回true。
const areEqual = (prevProps, nextProps) => true;

const MyComponent = React.memo(props => {
  return /*whatever jsx you like */
}, areEqual);

功能组件在状态更改时重新呈现

1 个答案:

为什么？

如何预防：