如何在第一次呈现之前在React函数组件中运行代码，例如在类组件的构造函数中？
如何在第一次呈现之前在React函数组件中运行代码，例如在类组件的构造函数中？
提问于 2021-06-19 11:42:09
我有一段代码在Reactinative目前运行在应用程序启动。在类组件构造函数中。它使用React导航状态检查一系列条件，然后导航到某个地方。
class MyComponent<Props> {
constructor(props: Props) {
super(props);
// Some initialization code
}
}我将其重构为使用useEffect和useLayoutEffect的钩子，但是现在的代码运行似乎只发生在初始呈现之后，导致导航发生前另一个屏幕的闪烁。
function MyComponent() {
useEffect(() => {
// Do some stuff
}, []);
return null;
}是否与在函数组件中呈现之前运行的类构造函数等效？
回答 1
Stack Overflow用户
发布于 2021-06-19 12:39:03
啊，我想出了一个解决办法。
以前，我是这样写代码的：
function MyComponent() {
useEffect(() => {
// Do some stuff
}, []);
return null;
}结果是，等效的只是在函数本身中运行代码，因为它在实际的呈现到屏幕之前运行。
function MyComponent() {
const initializedRef = useRef(false);
if (!initializedRef.current) {
initializedRef.current = true;
// Do some stuff
}
return null;
}这似乎与我以前的运行构造函数代码一样快。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68050183
复制相关文章
点击加载更多
相似问题
在呈现之前调用React组件的函数
主组件构造函数中的React类
构造函数和呈现方法在react组件中运行两次。
组件在调用构造函数或ngOnInit之前呈现。
如何在react js中呈现函数组件之前获取数据
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
