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 开发,构建高效、可维护的函数组件。
