為什么React和Vue需要Redux和Vuex

狀態管理需求的演變

【重點】 當應用規模增長，組件間共享狀態變得復雜，簡單的組件通信機制不再足夠！

不使用狀態管理庫的困境

1. 組件通信的局限性

// React中的props傳遞地獄
function GrandParent() {const [userData, setUserData] = useState({ name: "張三" });return (<Parent userData={userData} updateUser={setUserData} />);
}function Parent({ userData, updateUser }) {// 僅僅轉發propsreturn (<Child userData={userData} updateUser={updateUser} />);
}function Child({ userData, updateUser }) {// 另一層轉發return (<GrandChild userData={userData} updateUser={updateUser} />);
}function GrandChild({ userData, updateUser }) {return (<button onClick={() => updateUser({...userData, name: "李四"})}>修改用戶名</button>);
}

<!-- Vue中的prop傳遞和事件冒泡 -->
<!-- GrandParent.vue -->
<template><Parent :user-data="userData" @update-user="updateUser" />
</template><script>
export default {data() {return {userData: { name: "張三" }};},methods: {updateUser(newData) {this.userData = newData;}}
}
</script><!-- 中間組件必須傳遞props和轉發事件 -->

2. 狀態共享挑戰