如何在React中设置和取消主体缩放级别

Question

我正在编写一个React应用程序，其中需要将特定页面的缩放级别设置为90％。我知道我可以使用document.body.style.zoom = '90％'如下所示：

useEffect(() => {
    document.body.style.zoom = "90%";
  }, []);

这是使用useEffect进行响应的基本componentDidMount函数。但是问题是如何使用componentDidUnmount将缩放级别恢复为默认值，就像在加载页面之前一样？

Answer 1

添加cleanup effect作为从useEffect返回的回调。

清理功能在从UI删除组件之前运行，以防止内存泄漏。

const Zoom = () => {
  // Safe the current zoom value on initial render
  const zoomValueOnComponentRender = useRef(document.body.style.zoom);

  useEffect(() => {
    // Change zoom level on mount
    document.body.style.zoom = "90%";

    return () => {
      // Restore default value
      document.body.style.zoom = zoomValueOnComponentRender.current;
    };
  }, []);
  return <></>;
};

此类回调的行为类似于componentWillUnmount。

为了通过useRef保存默认值使用参考，它保证了稳定的值在整个组件的生命周期内。