Manual for Using React Functional Components
原文英文，约400词，阅读约需2分钟。
📝
内容提要
本文介绍了React函数式组件的使用，重点讲解了useEffect的生命周期管理和ref的正确使用。强调了当ref.current作为依赖时不会触发重新渲染，并提供了动态创建portal的示例代码。
🎯
关键要点
-
React函数式组件使用useEffect管理生命周期，分别对应componentDidMount、componentDidUpdate和componentWillUnmount。
-
当ref.current作为useEffect的依赖时，不会触发组件重新渲染，因为引用的变化不会导致渲染。
-
提供了一个示例，展示如何正确获取组件的ref实例，并在组件挂载时获取其矩形区域。
-
动态创建portal的示例代码展示了如何在组件中使用useRef和useEffect来管理DOM元素的生命周期。
❓
延伸问答
React函数式组件如何管理生命周期？
React函数式组件使用useEffect来管理生命周期，分别对应componentDidMount、componentDidUpdate和componentWillUnmount。
为什么ref.current作为useEffect的依赖不会触发重新渲染？
因为ref.current的变化不会导致组件重新渲染，所以将其作为依赖不会触发useEffect。
如何正确获取组件的ref实例？
可以使用useCallback来获取组件的ref实例，并在组件挂载时获取其矩形区域。
动态创建portal的示例代码是怎样的？
动态创建portal的示例代码使用useRef和useEffect来管理DOM元素的生命周期，并在组件中创建portal。
useEffect如何对应class组件的生命周期方法？
useEffect可以分别对应class组件的componentDidMount、componentDidUpdate和componentWillUnmount。
在React中，如何避免不必要的重新渲染？
通过将ref.current作为useEffect的依赖，可以避免不必要的重新渲染，因为引用的变化不会导致渲染。
🏷️
