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

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({}) 总是强制重新渲染。 （除非你在： shouldComponentUpdate(nextProps, nextState) 中返回 false ）你可以通过在控制台登录来检查这一点

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);