Question

我打算在项目中使用useRef.current.values，而我正在从useEffect内部读取建议的返回值的指南。该指南显示了设置，但没有使用值的示例。

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

这是我正在使用的Nav组件（Nav是应用程序的入口点，页面以PageContainer的底部显示，为钩路由器样式）：

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;

所以我的问题是：

为什么要从useEffect内部检索useRef值，而不是直接访问pageRef.current.value？它不是从返回信息吗 DOM，不是直接更新DOM？返回current.value 有副作用吗？
pageRef的useEffect内的值在以下情况下未更新调整窗口大小，即使pageRef在数组中 useEffect应该观看（？）。
返回pageRef.current.value的函数的示例是什么在这种情况下？
是否有更好的方法来解决我要完成的工作在这里？

Answer 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

由于未将任何resize事件侦听器附加到DOM元素上，因此在调整窗口大小时pageRef内的值不会更改
您只能在useEffect中返回一个函数，该函数基本上说在下次运行相同函数之前，请先运行此函数。因此，它非常有助于清理或取消订阅事件。
您可以用自己的方式实现要实现的目标，只需将resize事件侦听器附加到所需的DOM元素上并进行处理即可。

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

1 个答案: