React 的函数知识点

React 的函数知识点主要围绕‌函数组件‌和 ‌Hooks‌ 展开，它们构成了现代 React 开发的核心。

🎯 核心 Hooks 函数

‌useState()‌ - 状态管理

用于在函数组件中添加状态，返回状态值和更新状态的函数

‌useEffect()‌ - 副作用处理

处理组件中的副作用操作，如数据获取、订阅等

❌ 错误用法：useEffect(async () => { ... })

✅ 正确用法：在回调内定义异步函数

需要注意‌竞态条件‌问题，避免过时数据覆盖新数据

‌useContext()‌ - 跨组件数据共享

无需逐层传递 props 即可在组件树中共享数据

🔧 其他重要 Hooks

‌useRef()‌ - DOM 引用和可变值

访问 DOM 元素或在组件的整个生命周期中保存可变值

‌useMemo() / useCallback()‌ - 性能优化

缓存计算结果和回调函数，避免不必要的重新计算

⚡ 函数组件特点

‌纯函数特性‌

相同的 props 输入应该始终返回相同的 JSX 输出

不修改外部状态，避免副作用

‌JSX 语法‌

使用 {} 进行变量插值和表达式计算

支持条件渲染和列表渲染

💡 生命周期对应

函数组件通过 Hooks 模拟类组件的生命周期：

useEffect(() => {}, []) 对应 componentDidMount

useEffect(() => {}) 对应 componentDidUpdate

useEffect(() => () => {}) 对应 componentWillUnmount

🚀 实践建议

‌立即尝试‌：创建一个简单的计数器函数组件，使用 useState 管理计数状态，

useEffect 添加日志功能，快速体验 React Hooks 的编程模式。

掌握这些函数知识点，你就能熟练运用现代 React 开发，构建高效、可维护的函数组件。