简述React store的概念？

八股文_React面试题 0 172

参考回答：

在 React 中，store 通常指的是用于存储和管理应用状态的对象。它是一个集中式的数据容器，可以让不同组件之间共享和访问全局状态。React 本身并没有提供内建的 store 概念，但在实际应用中，我们常用的状态管理库，如 Redux 或 MobX，都实现了这一概念。

store 主要的作用是：
1. 集中管理状态：通过 store，应用的状态可以集中存储，避免状态分散在各个组件中。
2. 组件间共享数据：通过 store，不同组件可以访问和更新全局状态，避免组件之间通过层层传递 props 来共享数据。
3. 可预测的状态更新：store 通常配合某种机制（如 Redux 的 dispatch）来更新状态，使得状态更新具有可预测性。

详细讲解与拓展：

React 中的 Store 概念：
React 本身是一个 UI 库，主要关注组件的渲染和交互，它并没有内建的 store 系统。因此，管理全局状态的任务通常由外部库来完成，最常见的库是 Redux 和 Context API（React 提供的内建功能）。

在这种设计中，store 是一个包含应用所有状态的容器，通常会暴露出某些方法来允许组件读取状态或更新状态。
Redux 中的 Store：
Redux 是一个流行的 JavaScript 状态管理库，它通过一个全局的 store 来管理应用的状态。Redux 中的 store 是一个包含应用状态的 JavaScript 对象。你可以通过 dispatch 函数向 store 发送行动（actions），然后 store 会根据这些行动来更新其内部的状态。
```
// 创建一个 Redux store
const store = Redux.createStore(reducer);

// 在组件中访问 store 状态
const state = store.getState();

// 触发一个 action 来更新 store 状态
store.dispatch({ type: 'INCREMENT' });
```

store：包含整个应用的状态。
action：描述状态变更的普通对象。
reducer：纯函数，指定如何根据不同的 action 更新状态。
Redux 的 store 是单一的，意味着整个应用状态被存储在一个对象中，所有的组件通过 store 共享这块状态。通过 dispatch 调用的 action 会触发 reducer 来改变 store 中的数据。

React Context API 中的 Store：
React 的 Context API 提供了一个更简单的方式来共享组件树中的全局状态。通过 useContext 钩子，组件可以访问并更新存储在 store 中的状态。Context API 不像 Redux 那样依赖复杂的 reducer 或 action，而是通过 Provider 组件将 store 中的状态传递到下层组件。

const MyContext = React.createContext();

function MyProvider({ children }) {
 const [state, setState] = useState('Hello');

 return (
   <MyContext.Provider value={{ state, setState }}>
     {children}
   </MyContext.Provider>
 );
}

function MyComponent() {
 const { state, setState } = useContext(MyContext);

 return (
   <div>
     <p>{state}</p>
     <button onClick={() => setState('World')}>Change State</button>
   </div>
 );
}

Provider：提供 store 中的数据，通常将 value 设置为要共享的状态。
useContext：在需要访问 store 数据的组件中使用 useContext 来获取值。

MobX 中的 Store：
MobX 是另一个流行的状态管理库，采用响应式编程的思想。与 Redux 的 store 不同，MobX 的 store 是响应式的，可以自动跟踪和更新依赖的组件。当 store 中的数据发生变化时，相关的组件会自动重新渲染。
```
import { makeAutoObservable } from 'mobx';

class Store {
 value = 0;

 constructor() {
   makeAutoObservable(this);
 }

 increment() {
   this.value++;
 }
}

const store = new Store();
```

在 MobX 中，store 是通过类和 makeAutoObservable 方法来创建的，数据的改变会自动触发相关组件的更新。

为什么使用 Store：
- 集中化管理：store 让应用的状态集中管理，避免了在不同组件之间传递和共享数据时出现的复杂性。
- 避免层层传递 props：通过 store，全局状态可以直接被任何需要它的组件访问，无需通过父组件传递 props。
- 提高可维护性：统一的状态管理方式可以使得应用的状态变得更加可预测和易于调试，尤其是在大型应用中。
- 跨组件共享数据：store 使得组件间的状态共享变得更加简单，而不需要直接依赖组件间的父子关系。
注意事项：
- 性能问题：在大型应用中，store 的更新可能会导致性能问题，特别是当状态变更需要触发整个应用的大范围重渲染时。React 提供的 React.memo 或 shouldComponentUpdate 可以帮助优化性能。
- 过度使用 store：对于小型应用，使用 store 可能会显得过于复杂。对于简单的局部状态，使用 useState 和 useReducer 等 React 内置功能通常已经足够。

总结：

在 React 中，store 是用于管理和共享应用状态的容器。虽然 React 本身不提供内建的 store 功能，但通过 Redux、Context API 或 MobX 等库，可以实现集中式的状态管理。store 可以帮助我们在应用中集中管理数据，避免组件间复杂的状态传递，提升应用的可维护性和可预测性。

参考回答：

详细讲解与拓展：

总结：

发表回复 取消回复

发表回复取消回复