在 React18 中使用 createRoot 代替 render，利用 ref 在组件渲染或更新后调用一个回调函数

React17中，旧的 API 的使用方式，第三个参数即回调函数

import * as ReactDOMClient from 'react-dom/client';
function App() { return ( <div> <h1>Hello World</h1> </div> ); }
const rootElement = document.getElementById("root");
ReactDOMClient.render(<App />, rootElement, () => console.log("renderered"));

React18 中，在新的 API 中，可利用 ref 调用机制解决这个问题

import * as ReactDOMClient from 'react-dom/client';
function App({ callback }) {
    // Callback will be called when the div is first created.
    return ( <div ref={callback}> <h1>Hello World</h1> </div> );
}
const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);
root.render(<App callback={() => console.log("renderered")} />);

了解更多：ref 调用时间

① componentDidMount 的时候会调用该函数 在 componentDidMount 事件中可以使用 ref

② 如果 ref 的值发生了变动（旧的函数被新的函数替代），分别调用旧的函数以及新的函数，时间点出现在 componentDidUpdate 之前

a.旧的函数被调用时，传递 null

b.新的函数被调用时，传递对象(dom 元素对象或者实例对象)

③ 如果 ref 所在的组件被卸载，会调用函数

相关文章:

• # 在React18中使用createRoot代替render
• # ref的三种使用方法