React：如何从 useEffect 内部返回 useRef.current.value？

Question

我计划在一个项目中使用 useRef.current.values，并且我正在阅读一份指南，推荐从 useEffect 内部返回值。该指南显示了设置，但没有使用值的示例。

我不知道如何从 useEffect 中获取 useRef 值。我通过 console.log 看到 pageRef.current 对象中的值，这些值在页面渲染后填充。当我尝试返回值时，useEffect 抱怨 - 错误消息说你只能返回一个函数。

这是我正在使用的 Nav 组件（Nav 是 App 入口点，页面在底部以 PageContainer 呈现，hookrouter 样式）：

const Nav = () => {
    const pageRef = useRef({});
    const [isOpen, setIsOpen] = useState(true);
    const routeResult = useRoutes(directions);

    useEffect(() => {
        if (pageRef.current) {
            let pageHeight = pageRef.current.currentHeight;
            let pageWidth = pageRef.current.currentWidth; // etc.
            console.log(pageRef.current.currentWidth); // example
            return pageWidth; // error, can only return a function
        }
    }, [pageRef]);

    console.log(pageRef.current.clientWidth);

    const backgroundClickHandler = () => {
        if (isOpen) {
            setIsOpen(!isOpen);
        }
  };
  
  const toggleClickHandler = () => setIsOpen(!isOpen);
  
    return (
        <div>
            <ToggleContainer>
                <button
                    className='fas fa-bars fa-2x'
                    onClick={toggleClickHandler}
                ></button>
            </ToggleContainer>
            {isOpen && <NavWrapper>{NavList()}</NavWrapper>}
            <ClickContainer onClick={backgroundClickHandler} isOpen={isOpen}>
                <PageContainer ref={pageRef}>
                    {routeResult || <NotFoundPage />}
                </PageContainer>
            </ClickContainer>
        </div>
    );
};

export default Nav;

所以我的问题是：

1. 为什么从 useEffect 内部检索 useRef 值，而不是 直接访问pageRef.current.value?它不是从返回信息吗 DOM，不直接更新 DOM？返回current.value 有副作用吗？

2. pageRef 的 useEffect 中的值不会在以下情况下更新 调整窗口大小，即使 pageRef 在数组中 useEffect 应该监视 (?)。

3. 什么是返回pageRef.current.value 的函数示例 在这种情况下？

4. 有没有更好的方法来完成我想要完成的事情 在这里？

Answer 1

回答您的问题：

1. 你的useEffect 基本上是说每当pageRef 改变时，调用这个函数。如果在外部完成，它将在每次渲染时调用 do your tasks，而不是在 pageRef 值更改时调用。此外，在初始渲染中，它可能会给出 undefined 值。

 useEffect(() => { // called whenever pageRef is changed
        if (pageRef.current) {
            let pageHeight = pageRef.current.currentHeight;
            let pageWidth = pageRef.current.currentWidth; // etc.
            console.log(pageRef.current.currentWidth); // example
        }
    }, [pageRef]);

    console.log(pageRef.current.clientWidth); // called on every render, be it because of pageRef change or not

1. pageRef 内的值不会在调整窗口大小时改变，因为您没有将任何 resize 事件侦听器附加到 DOM 元素

2. 你只能在useEffect 中返回一个函数，它基本上说在下次运行之前，先运行这个函数。因此，它非常有助于清理或取消订阅事件。

3. 您可以通过自己的方式实现您想要完成的任务，您只需将resize 事件侦听器附加到所需的 DOM 元素并进行处理即可。