javascript ReactJS -在组件装载时但在返回之前运行一次

k2fxgqgv 于 2022-10-30 发布在 Java

关注(0)|答案(2)|浏览(140)

我希望在react应用程序首次加载时运行一次，而且只能运行一次。一开始，人们倾向于使用useEffect钩子：

useEffect(() => {
    console.log("Effect hook.");
  }, []);

这种方法的问题是，当我把它放到我的App组件中时，useEffect钩子会在AFTER挂载后运行。随后，下面的代码将失败，因为在呈现子组件时不会定义内容：

function App() {

  let stuff;

  // Define the supported configs on mount. This will only run at mount time.
  useEffect(() => {
    console.log("Effect hook.");
    stuff = getSomeStuff();
  }, []); 

  //

  console.log("About to return.");
  return (
    <div>
      <ComponentThatNeedsStuff stuff={stuff} />
    </div>
  );
}

您将看到以下打印内容：

About to return.
Effect hook.

如果您只想让函数getSomeStuff运行一次，但您需要子组件所需的内容，最好的处理方法是什么？

JavaScript

来源：https://stackoverflow.com/questions/74245335/reactjs-run-once-on-component-mount-but-before-return

2条答案

按热度按时间

rfbsl7qr1#

在渲染之前**运行代码通常表明您违背了React的工作方式。

const App = () => {
  const [stuff, setStuff] = useState();

  useEffect(() => {
    console.log("Effect hook.");
    setStuff(getSomeStuff());
  }, []); 

  return (
    <div>
      {stuff && <ComponentThatNeedsStuff stuff={stuff} />}
    </div>
  );
}

赞(0）回复(0）举报 2022-10-30

dly7yett2#

这听起来像是useMemo的工作。它允许您在渲染期间进行计算，但在稍后的渲染中，它可以跳过计算并重用先前的值：

function App() {
  const stuff = useMemo(() => {
    return getSomeStuff();
  }, []);

  return (
    <div>
      <ComponentThatNeedsStuff stuff={stuff} />
    </div>
  );
}

赞(0）回复(0）举报 2022-10-30

我来回答

javascript ReactJS -在组件装载时但在返回之前运行一次

2条答案

相关问题

热门标签

最新问答