为什么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. 状态共享挑战