在基于函数的组件中完成所有渲染后，React运行javascript代码

Question

我有一个包含以下内容的表单组件

function Form() {
return (
<div className="form-container">
<div className="form-control">
<label id="text-input">Text </label>
<input type="text"></input>
</div>
<div className="form-control">
<label>Time </label>
<input type="text"></input>
</div>
<div className="form-control" style={{alignItems:"center"}}>
<button className="add-but">Add</button>
</div>
</div>
)
}

我想在渲染组件后聚焦文本元素。
我第一次尝试把{document.querySelector("#txt-in").focus()}，它没有工作，搜索后我发现我可以使用标签autoFocus。一切都会很美好。

但我想知道，如果我想在渲染后实际执行javascript代码怎么办?还是用javascript呢?我找到了基于class的组件的答案，但找不到像我使用的基于function的组件。

我如何执行代码，我想在元素被渲染后执行，在基于函数的组件?

Answer 1

你可以使用React HooksuseEffect。

只需将代码

放在下面

import React, {useEffect} from "react";
function Form() {
useEffect(() => {
// Do whatever you want after first render
// Put your code here
}, [])
}

Answer 2

与组件编写的内容类似，以前会使用componentDidUpdate&componentDidMount在渲染之后/之前操作组件。功能组件意识到，我们可以为此使用一个名为useEffect的"钩子"，它可以在组件的状态改变的基础上触发特定的动作。

这里是useEffect文档的链接- https://reactjs.org/docs/hooks-effect.html