前端状态管理：如何避免组件间传递的混乱
在 React 开发中，随着应用复杂度提升，状态管理往往成为维护的痛点。如果还在依赖层层 props 传递（Prop Drilling），不仅代码冗余，调试起来也像是在迷宫里找路。
常见误区：Props 传递的代价
当组件层级加深，修改一个状态可能需要改动多个父组件和子组件。这种模式在小型 Demo 中尚可接受，但在生产环境中极易引发连锁反应。
// 反面教材：深层嵌套与 Props 传递
function App() {
const [user, setUser] = useState(null);
const [posts, setPosts] = useState([]);
const [comments, setComments] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchData() {
setLoading(true);
try {
const userResponse = await fetch('/api/user');
const userData = await userResponse.json();
setUser(userData);
// ... 其他数据获取逻辑 ...
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
}
}
fetchData();
}, []);
return (
<>
{loading ? 加载中... : (
)}
);
}
