react三大特性

声明式
组件化
跨平台编写

react中数据决定视图

jsx在类的书写方法中使用render函数返回（在函数的书写中则只需要return即可），返回结果使用（）封装，且内容只能是一个根标签

react的状态管理：

vue主要的状态管理工具是vuex，这种状态管理工具常常被称之为：‘轮子“。这种轮子实现起来甚至只需要十几行代码就可以造出来，所以社区中常常会有人开源。目前就是需要了解这些繁多的react状态管理工具怎样实现，以及如何去挑选他们。

React 中的全局状态管理

全局状态是在整个应用程序中共享的数据。在 React 中，我们可以使用 Context API 来实现全局状态管理。Context API 允许我们在组件树中传递数据，而无需将其逐层传递给子组件。让我们通过一个简单的例子来了解如何使用 Context API 管理全局状态：

创建一个 context：

import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

在应用程序的根组件中，使用 Context.Provider 提供全局状态：

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {/* 应用程序其他部分 */}
    </ThemeContext.Provider>
  );
}

export default App;

在任何子组件中，使用 Context.Consumer 或 useContext Hook 访问全局状态：

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      切换主题（当前主题：{theme}）
    </button>
  );
}

export default ThemedButton;

在上面的示例中，我们创建了一个 ThemeContext，并在 App 组件中提供了全局状态。然后，我们在子组件 ThemedButton 中使用 useContext Hook 访问全局状态并更新它。这是一个基本的全局状态管理示例。

虽然 Context API 可以解决许多全局状态管理的问题，但在大型应用程序中，它可能变得难以维护。这就是为什么有时候我们需要借助第三方库来管理全局状态。

使用 Redux 进行状态管理

Redux 是一个非常流行的全局状态管理库，它提供了一个集中式的数据存储，使得在组件之间共享状态变得更容易。Redux 遵循严格的单向数据流，通过将状态存储在一个称为 “store” 的地方来实现。

让我们快速了解如何在 React 应用程序中使用 Redux：

安装 Redux 和 React-Redux：

npm install redux react-redux

创建一个 Redux store：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

使用 Provider 将 Redux store 传递给应用程序：

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

function Root() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

export default Root;

创建一个 Redux reducer：

const initialState = {
  theme: 'light',
};

function themeReducer(state = initialState, action) {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return {
        ...state,
        theme: state.theme === 'light' ? 'dark' : 'light',
      };
    default:
      return state;
  }
}

export default themeReducer;

在组件中使用 connect 或 useSelector 和 useDispatch Hooks 连接 Redux store：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function ThemedButton() {
  const theme = useSelector((state) => state.theme);
  const dispatch = useDispatch();

  const toggleTheme = () => {
    dispatch({ type: 'TOGGLE_THEME' });
  };

  return (
    <button onClick={toggleTheme}>
      切换主题（当前主题：{theme}）
    </button>
  );
}

export default ThemedButton;

在上面的示例中，我们首先创建了一个 Redux store，然后将其传递给应用程序。接着，我们创建了一个 reducer 来处理状态的更改。最后，我们在组件中使用 useSelector 和 useDispatch Hooks 连接 Redux store 并更新全局状态。

Redux的三大原则：单一数据源，只有一个store、store中的state是只读的、使用纯函数来执行修改。

单一数据源：在redux中，整个应用的全局State(再次注意是全局state),都会保存在一个store中，一个单一数据源 state tree 也简化了应用的调试和和监控;；它也让你在开发中能将应用数据持久化到本地，从而加速开发周期。此外，有一些功能以前很难实现，比如“撤销/重做”，在单一数据源的原则下，使用 Redux 实现将非常容易。
Store中的State是只读的：我们不能直接修改store中的state， store中的state是只读的。唯一能改变store中的state的方式就是通过action
使用纯函数来执行修改：接受纯函数来接受aciton，该纯函数叫reducer，可以改变store中的state.

react状态管理工具redux（类似于vuex） | 青训营笔记

react三大特性

React 中的全局状态管理

使用 Redux 进行状态管理