0

我计划在一个项目中使用 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 在这种情况下返回 a 的函数的示例是什么？

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

4

1 回答 1

0

回答您的问题：

  1. 您useEffect基本上说，每当pageRef更改时，请调用此函数。如果在外部完成，它将在每次渲染时调用执行您的任务，而不是在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 元素并进行处理。

于 2020-07-18T19:16:06.420 回答