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

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。

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

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。在此线程中对此进行了更多介绍：如何防止我的功能组件使用 React 备忘录或 React 钩子重新渲染？

React.Memo的功能类似于纯组件。但是，您可以 还可以通过向它传递一个定义什么的函数来调整它的行为 算作相等。基本上，这个函数是应该组件更新， 除非你希望它不呈现，则返回 true。

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