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

【问题标题】：React run javascript code after all render is completed in function based component在基于函数的组件中完成所有渲染后 React 运行 javascript 代码
【发布时间】：2021-02-19 09:23:44
【问题描述】：

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

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 的组件。

如何在基于函数的组件中执行我想要在渲染元素后执行的代码？

【问题讨论】：

如果你正在使用反应钩子或反应类中的lifecycle methods，你可以使用useEffect函数来做到这一点。
为此你需要一个 useRef 钩子reactjs.org/docs/hooks-reference.html#useref

标签： javascript reactjs frontend jsx

【解决方案1】：

你可以使用 React Hooks useEffect 来达到你的目的。

简单写下代码

import React, {useEffect} from "react";

function Form() {

 useEffect(() => {
    // Do whatever you want after first render
    // Put your code here
 }, [])

}

【讨论】：

【解决方案2】：

与组件编写的内容类似，以前人们会使用componentDidUpdate 和componentDidMount 之类的函数在渲染之后/之前操作组件。功能组件意识到我们可以为此使用一个称为 useEffect 的“挂钩”，其中可以根据组件的状态更改触发特定操作。

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

【讨论】：