当前位置：首页 > news >正文

React进阶：React Hooks的使命是分离规整，不是杂糅

news 2026/7/2 10:16:42

如果你刚接触React Hooks，你可能会觉得学了很多useXxx() API但还是写不出好代码。

原因很简单：网上大多数教程都在教你怎么调用一个Hook，而不是教你在真实场景中应该用哪个、为什么用它。

本文直接用真实场景说话。

一、useState vs useReducer：不是复杂度的区别

你可能看过这种说法：“简单状态用useState，复杂状态用useReducer”。

这个建议害了很多人。实际上，判断标准不是"复杂度"，而是"逻辑关联性"。

什么时候用useState

const[count,setCount]=useState(0)const[name,setName]=useState('')const[isOpen,setIsOpen]=useState(false)

这些状态之间互不依赖，每个独立变化。用useState足够。

什么时候用useReducer

// 表单状态：多个字段需要同时更新const[form,dispatch]=useReducer(formReducer,{name:'',email:'',phone:'',address:'',errors:{}})functionformReducer(state,action){switch(action.type){case'SET_FIELD':return{...state,[action.field]:action.value}case'SET_ERRORS':return{...state,errors:action.errors}case'RESET':returninitialStatedefault:returnstate}}

判断标准很简单：如果更新一个状态时需要同时知道其他状态的值，就用useReducer。

二、useEffect：80%的人用错了依赖数组

useEffect是React Hooks里最容易出错的地方。

规则1：依赖数组应该包含所有你用到的东西

// ❌ 错误：用了count但没在依赖里声明useEffect(()=>{document.title=`点击了${count}次`},[])// ✅ 正确useEffect(()=>{document.title=`点击了${count}次`},[count])

规则2：不要在useEffect里更新它依赖的值（除非有条件）

// ❌ 无限循环useEffect(()=>{setCount(count+1)},[count])// ✅ 有条件useEffect(()=>{if(count<10){setCount(count+1)}},[count])

规则3：数据请求应该在useEffect里做，但要避免竞态

useEffect(()=>{letcancelled=falsefetch(`/api/user/${userId}`).then(res=>res.json()).then(data=>{if(!cancelled){setUser(data)}})return()=>{cancelled=true// 组件卸载或userId变化时取消旧请求}},[userId])

三、自定义Hook：把逻辑从组件中抽出来

这是Hooks最大的价值所在，也是大多数人没有充分利用的功能。

不好的写法：逻辑和UI混在一起

functionUserList(){const[users,setUsers]=useState([])const[loading,setLoading]=useState(true)const[error,setError]=useState(null)useEffect(()=>{fetch('/api/users').then(res=>res.json()).then(data=>{setUsers(data)setLoading(false)}).catch(err=>{setError(err.message)setLoading(false)})},[])if(loading)return<div>加载中...</div>if(error)return<div>错误：{error}</div>return(<ul>{users.map(u=><li key={u.id}>{u.name}</li>)}</ul>)}

好的写法：逻辑抽成自定义Hook

functionuseUsers(){const[users,setUsers]=useState([])const[loading,setLoading]=useState(true)const[error,setError]=useState(null)useEffect(()=>{fetch('/api/users').then(res=>res.json()).then(data=>{setUsers(data)setLoading(false)}).catch(err=>{setError(err.message)setLoading(false)})},[])return{users,loading,error}}functionUserList(){const{users,loading,error}=useUsers()if(loading)return<div>加载中...</div>if(error)return<div>错误：{error}</div>return(<ul>{users.map(u=><li key={u.id}>{u.name}</li>)}</ul>)}

抽出来之后，useUsers可以在任何组件中复用，测试也更方便。

常用自定义Hook示例

// 监听窗口大小functionuseWindowSize(){const[size,setSize]=useState({width:window.innerWidth,height:window.innerHeight})useEffect(()=>{consthandle=()=>setSize({width:window.innerWidth,height:window.innerHeight})window.addEventListener('resize',handle)return()=>window.removeEventListener('resize',handle)},[])returnsize}// 本地存储functionuseLocalStorage(key,initialValue){const[value,setValue]=useState(()=>{conststored=localStorage.getItem(key)returnstored?JSON.parse(stored):initialValue})useEffect(()=>{localStorage.setItem(key,JSON.stringify(value))},[key,value])return[value,setValue]}

四、useMemo和useCallback：不要过早优化

大部分人用这两个Hook的时机是错的。

什么时候真的需要用

// ❌ 不需要：计算很简单constdoubled=useMemo(()=>count*2,[count])// ✅ 需要：计算代价很大constsortedUsers=useMemo(()=>{returnusers.sort((a,b)=>expensiveCompare(a,b))},[users])

黄金法则：先不用useMemo和useCallback，等真的出现性能问题（在React DevTools Profiler里能测出来）再添加。

五、常见模式和反模式

不要写复杂的useEffect

// ❌ 反模式：一个useEffect做太多事useEffect(()=>{fetchUser()fetchPosts()setupWebSocket()trackPageView()},[userId])

// ✅ 拆成多个useEffect(()=>{fetchUser()},[userId])useEffect(()=>{fetchPosts()},[userId])useEffect(()=>{setupWebSocket();returncleanup},[userId])useEffect(()=>{trackPageView()},[])

每个useEffect只做一件事。

不要滥用状态

// ❌ 可以从已有数据计算出来的就不要存const[firstName,setFirstName]=useState('')const[lastName,setLastName]=useState('')const[fullName,setFullName]=useState('')// ✅ 直接用constfullName=firstName+' '+lastName