分布式微服务系统架构第124集：架构

加群联系作者vx：xiaoda0423

仓库地址：webvueblog.github.io/JavaPlusDoc...

kotlin 复制代码

npm uninstall -g @tarojs/cli # 卸载当前版本的 Taro
npm install -g @tarojs/[email protected] # 安装 Taro 3.2.0

npm install -g @tarojs/[email protected]
安装最新稳定版本的 Taro
npm install -g @tarojs/cli@latest 
👽 Taro v4.0.12 
4.0.12 

查看全局安装路径
npm list -g @tarojs/cli --depth=0
C:\Users\23979\AppData\Roaming\npm
`-- @tarojs/[email protected]

npm root -g
C:\Users\23979\AppData\Roaming\npm\node_modules

选择框架

请选择框架 提供了不同的开发框架供你选择，Taro 支持 React 和 Vue 两个框架。

如果你熟悉 React 或 React Native ，选择 React 是比较合适的，因为 Taro 基于 React 开发可以复用大量 React 的知识和生态。
如果你更倾向于使用 Vue ，选择 Vue 会更符合你的开发习惯。

你选择了 React，这是最常见的选择之一。

是否需要使用 TypeScript

是否需要使用 TypeScript？ 选择是否启用 TypeScript 来为你的项目提供类型检查。

如果选择 Yes，Taro 会为你生成 TypeScript 配置和文件，允许你在开发过程中使用类型检查，这有助于发现潜在的错误并提供更好的代码提示和文档支持。
如果选择 No ，则会使用普通的 JavaScript。

如果你有 TypeScript 的使用需求或想提升代码的可维护性，选择 Yes 是更好的选择。

是否需要编译为 ES5

是否需要编译为 ES5？ 这是针对 低端设备 的一个选项。如果你计划支持一些比较旧的设备或浏览器，选择 Yes 可以确保代码编译为 ES5，从而兼容旧版本的浏览器或环境。

Yes：代码会编译为 ES5，兼容更多的设备和浏览器，适用于老设备。
No ：代码会使用现代的 ES6+ 特性，适用于支持较新 JavaScript 版本的设备和浏览器。

如果你的目标用户使用的设备较新或者你不打算支持旧设备，选择 No 会让代码更加现代化并提升性能。

请选择编译工具 (Use arrow keys) > Webpack5 Vite 选哪个好

在选择 编译工具 时，你可以选择 Webpack5 或 Vite，这两者各有优缺点，适用于不同的需求和场景。

1. Webpack5

Webpack5 是一个成熟且强大的模块打包工具，广泛应用于大型项目和生产环境。它已经非常稳定并且支持丰富的插件和生态系统，特别适合需要高度自定义配置的项目。

优点：

高度可定制：Webpack 提供了丰富的插件和加载器，支持多种配置方式，适合复杂项目的需求。
稳定性和成熟度：作为主流的构建工具，Webpack 已经在许多大型项目中得到了验证，生态非常成熟。
社区支持：Webpack 拥有非常大的社区和大量的插件，可以满足各种开发需求。
兼容性好：Webpack 可以处理复杂的打包需求，比如代码拆分、懒加载、Polyfill等，支持所有现代浏览器和低版本的浏览器。

缺点：

配置较复杂：相比 Vite，Webpack 的配置比较复杂，尤其对于新手而言，可能会有一定的学习曲线。
构建速度较慢：Webpack 在大型项目中构建速度较慢，尤其是开发阶段的热重载速度会稍显卡顿。

2. Vite

Vite 是一个现代的前端构建工具，强调 快速构建 和 零配置 ，采用现代的 ESM（ES Modules） 打包方式，构建速度非常快。

优点：

快速构建和热更新：Vite 的最大特点就是非常快速的热更新和构建速度，适合开发阶段的高效开发。
开箱即用：Vite 默认配置非常适合大多数项目，开发者可以快速启动开发，几乎不需要额外的配置。
现代化工具链：Vite 支持现代的 JavaScript 功能，使用原生 ESM 模块来加速构建，支持更快的开发体验。
优化的生产构建：Vite 使用 Rollup 来进行生产构建，具有很高的构建优化效率。

缺点：

兼容性较弱：虽然 Vite 已经支持许多功能，但与 Webpack 相比，它的生态还不够丰富，某些老旧插件或库可能不兼容。
配置灵活性较弱：虽然 Vite 已经大大简化了配置，但如果需要进行高度自定义的复杂配置，可能会遇到一些限制。

选择建议：

选择 Webpack5 ：如果你需要一个成熟、稳定且高度可定制的构建工具，特别是当项目较大，且需要复杂的打包、插件支持和优化，选择 Webpack5 会更加合适。
选择 Vite ：如果你想要一个快速的开发体验，注重快速热更新和构建速度，且项目并不需要过多的复杂配置，Vite 是一个很好的选择。它非常适合现代的前端开发，尤其是在小型或中型项目中，能够大大提升开发效率。
Webpack5：适合大规模、复杂项目，需要高度自定义和稳定性。
Vite：适合快速开发，特别是在小型或中型项目中，能提升开发效率。

? 请选择模板 (Use arrow keys) > 默认模板 mobx pwa react-native react-native-harmony react-NutUI（NutUI + React 模板redux (Move up and down to reveal more choices) 选择哪个

在选择 Taro 项目模板时，你可以根据自己的需求和技术栈选择最合适的模板。以下是每个模板的简要说明，以帮助你做出决策：

1. 默认模板

这是 Taro 提供的最基本的模板，适合大多数常规的前端开发需求。如果你不需要额外的功能（如状态管理、PWA、React Native 等），可以选择默认模板。

适用场景：

如果你希望从零开始自由配置，或者没有特殊的需求，可以选择 默认模板。

2. mobx

这个模板集成了 MobX ，一个简单而强大的状态管理库。MobX 提供了响应式的数据流，可以让你的状态管理变得非常简洁。它适合需要 响应式状态管理 的项目。

适用场景：

如果你熟悉 MobX 或者需要在项目中使用 响应式编程，这个模板是个不错的选择。

3. pwa

如果你想开发 渐进式网页应用（PWA） ，可以选择这个模板。PWA 可以让小程序以类似本地应用的形式运行，支持离线使用、推送通知等功能。

适用场景：

如果你的项目需要支持离线功能、推送通知或者希望有更接近原生应用的体验，选择 pwa 模板是最佳选择。

4. react-native

这个模板适用于希望将 Taro 项目与 React Native 配合使用的开发者。React Native 是一个跨平台的移动应用开发框架，可以让你通过 JavaScript 开发原生应用。

适用场景：

如果你打算将 Taro 与 React Native 集成来构建跨平台应用，选择 react-native 模板是合适的。

5. react-native-harmony

这个模板是 React Native 和 HarmonyOS 的结合，适用于开发兼容 华为 HarmonyOS 系统的应用。

适用场景：

如果你希望开发适用于 HarmonyOS 的跨平台应用，选择 react-native-harmony 模板。

6. react-NutUI

这个模板集成了 NutUI ，是京东的一个 React UI 组件库，如果你在开发中需要大量使用 UI 组件，NutUI 是一个非常好的选择。它提供了一套丰富的 UI 组件，帮助你快速搭建高质量的界面。

适用场景：

如果你需要使用 NutUI （特别是与 React 配合使用）来快速搭建漂亮的 UI，选择 react-NutUI 模板。

7. redux

这个模板集成了 Redux，一个流行的状态管理库。Redux 适用于大型应用的状态管理，可以帮助你在不同组件之间传递状态。

适用场景：

如果你的项目比较大，状态管理比较复杂，或者你已经熟悉 Redux，可以选择这个模板。

1. `mobx`：简洁、响应式的状态管理

MobX 是一个非常简单且强大的状态管理库，适合那些需要响应式编程的项目。它的学习曲线相对较低，非常适合中小型项目。

MobX 优点：

响应式编程：自动追踪数据的变化，适合动态变化的数据流。
简单易用：不需要像 Redux 那样进行大量的配置，适合快速开发。
轻量级：代码量少，配置简单，适合简单到中等复杂度的项目。

MobX 使用场景：

小到中型项目，数据变化频繁的场景。
需要快速开发且不希望状态管理太复杂的应用。

如何选择 MobX 模板：

在 Taro 创建项目时，选择 mobx 模板可以快速集成 MobX 状态管理库。

MobX 示例：

创建一个 Taro 项目并选择 mobx 模板。
项目结构会自动包含 mobx 状态管理相关的配置。

假设你有一个需要管理用户信息的场景，可以按照以下方式使用 MobX。

MobX 状态管理示例：

首先，在 src/store 文件夹下创建一个 userStore.js 文件，管理用户状态。

javascript 复制代码

// src/store/userStore.js
import { makeAutoObservable } from "mobx";

class UserStore {
  user = null;

  constructor() {
    makeAutoObservable(this); // 将对象变成响应式
  }

  setUser(user) {
    this.user = user;
  }
}

const userStore = new UserStore();
export default userStore;

然后，在需要访问该状态的组件中，直接使用这个 store。

javascript 复制代码

// src/pages/index.jsx
import React, { useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { observer } from 'mobx-react';
import userStore from '../store/userStore';

const Index = observer(() => {
  useEffect(() => {
    userStore.setUser({ name: 'John Doe', age: 25 });
  }, []);

  return (
    <View>
      <Text>User Name: {userStore.user ? userStore.user.name : 'Loading...'}</Text>
    </View>
  );
});

export default Index;

在这里，observer 是 MobX 的 HOC（高阶组件），用于让组件能够响应 MobX 数据的变化。每当 userStore 中的 user 数据发生变化时，组件会自动更新。

2. `redux`：更适合大型应用的状态管理

Redux 是另一个常用的状态管理库，它通常用于 大型应用 中，尤其是在涉及到复杂状态流和需要全局共享状态的场景下。虽然 Redux 的学习曲线较陡，但它对于大型应用来说有很强的可扩展性和可维护性。

Redux 优点：

可预测性 ：所有的状态更新都通过 dispatch 动作来触发，状态流更加清晰。
强大的中间件：支持异步操作、日志记录、路由状态等强大的中间件系统。
适用于复杂应用：适合大型应用，能够在多组件之间共享和管理状态。

Redux 使用场景：

大型项目，多个组件需要共享状态。
需要更严格的数据流控制和调试能力的应用。

如何选择 Redux 模板：

在 Taro 创建项目时，选择 redux 模板可以快速集成 Redux 状态管理库。

Redux 示例：

创建一个 Taro 项目并选择 redux 模板。
项目结构会自动包含 Redux 相关的配置和代码。

Redux 状态管理示例：

创建 redux actions 和 reducers。

javascript 复制代码

// src/store/actions.js
export const setUser = (user) => ({
  type: 'SET_USER',
  payload: user,
});

dart 复制代码

// src/store/reducers.js
const initialState = {
  user: null,
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

export default userReducer;

配置 store：

javascript 复制代码

// src/store/index.js
import { createStore } from 'redux';
import userReducer from './reducers';

const store = createStore(userReducer);

export default store;

在组件中使用 Redux 状态：

javascript 复制代码

// src/pages/index.jsx
import React, { useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { useDispatch, useSelector } from 'react-redux';
import { setUser } from '../store/actions';

const Index = () => {
  const dispatch = useDispatch();
  const user = useSelector(state => state.user);

  useEffect(() => {
    dispatch(setUser({ name: 'John Doe', age: 25 }));
  }, [dispatch]);

  return (
    <View>
      <Text>User Name: {user ? user.name : 'Loading...'}</Text>
    </View>
  );
};

export default Index;

这里，useDispatch 用来派发动作，useSelector 用来从 Redux store 中获取状态。通过 dispatch(setUser()) 更新用户数据。

选择建议

**如果你的项目是小到中型，且你需要快速上手，选择 MobX 会是一个不错的选择。它的 API 简单，适合快速开发，响应式数据流也让你可以更直观地管理状态。
**如果你的项目比较大，且需要精确的状态管理和全局数据流控制，或者你的团队已经熟悉 Redux，选择 Redux 是更合适的。

总结：

MobX：适用于小到中型项目，响应式管理，简单易用。
Redux：适用于大型项目，具有高度可控的状态管理和中间件支持，适合复杂数据流的管理。

actions.js 用于定义动作类型和动作创建函数。

javascript 复制代码

// src/store/actions.js
export const setUser = (user) => ({
  type: 'SET_USER',
  payload: user,
});

export const setUserAge = (age) => ({
  type: 'SET_USER_AGE',
  payload: age,
});

reducers.js 负责根据不同的动作类型修改状态。

dart 复制代码

// src/store/reducers.js
const initialState = {
  user: null,
  age: 0,
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_USER_AGE':
      return { ...state, age: action.payload };
    default:
      return state;
  }
};

export default userReducer;

配置 Redux Store

store.js 用于创建 Redux store，并将 reducers 传递给它。

javascript 复制代码

// src/store/index.js
import { createStore } from 'redux';
import userReducer from './reducers';

const store = createStore(userReducer);

export default store;

配置 Taro 与 Redux

Taro 使用 @tarojs/redux 作为 Redux 的集成。我们需要在 src/app.js 中将 Redux store 和 Taro 进行集成。

javascript 复制代码

// src/app.js
import Taro from '@tarojs/taro';
import { Provider } from '@tarojs/redux';
import store from './store'; // 引入 Redux store
import './app.scss';

function App() {
  return (
    <Provider store={store}> {/* 提供 Redux store */}
      {/* 在这里放置你的应用组件 */}
    </Provider>
  );
}

export default App;

使用 `dispatch` 更新状态

在页面中，使用 useDispatch 来派发动作，使用 useSelector 来选择当前的状态。

javascript 复制代码

// src/pages/index.jsx
import React, { useEffect } from 'react';
import { View, Text, Button } from '@tarojs/components';
import { useDispatch, useSelector } from 'react-redux';
import { setUser, setUserAge } from '../store/actions';

const Index = () => {
  const dispatch = useDispatch();
  const user = useSelector(state => state.user); // 获取用户信息
  const age = useSelector(state => state.age);   // 获取用户年龄

  useEffect(() => {
    // 模拟请求数据并更新 Redux 状态
    dispatch(setUser({ name: 'John Doe', email: '[email protected]' }));
    dispatch(setUserAge(25));
  }, [dispatch]);

  return (
    <View>
      <Text>User Info:</Text>
      <Text>Name: {user ? user.name : 'Loading...'}</Text>
      <Text>Email: {user ? user.email : 'Loading...'}</Text>
      <Text>Age: {age}</Text>

      {/* 更新年龄 */}
      <Button onClick={() => dispatch(setUserAge(age + 1))}>Increase Age</Button>
    </View>
  );
};

export default Index;

使用 `useDispatch` 和 `useSelector`

useDispatch：用于派发动作（更新状态）。
useSelector：用于从 Redux store 获取当前的状态。

在上面的示例中：

使用 dispatch(setUser({ name: 'John Doe' })) 来更新用户信息。
使用 dispatch(setUserAge(25)) 来设置用户的年龄。
通过 useSelector 获取当前的用户信息和年龄并渲染。

完整项目结构

bash 复制代码

npm list @tarojs/cli --depth=0
[email protected] D:\taro-job\myApp
`-- @tarojs/[email protected]

my-redux-app/
  ├── src/
  │   ├── app.js            # 配置 Redux Provider
  │   ├── store/            # Redux 配置文件
  │   │   ├── actions.js    # 动作定义
  │   │   ├── reducers.js   # reducer 文件
  │   │   └── index.js      # store 创建
  │   ├── pages/
  │   │   └── index.jsx     # 页面组件，使用 Redux
  │   └── app.scss          # 全局样式
  ├── package.json          # 项目依赖和配置
  └── README.md             # 项目说明

分布式微服务系统架构第124集：架构

选择框架

是否需要使用 TypeScript

是否需要编译为 ES5

1. Webpack5

优点：

缺点：

2. Vite

优点：

缺点：

选择建议：

1. 默认模板

适用场景：

2. mobx

适用场景：

3. pwa

适用场景：

4. react-native

适用场景：

5. react-native-harmony

适用场景：

6. react-NutUI

适用场景：

7. redux

适用场景：

1. mobx：简洁、响应式的状态管理

MobX 优点：

MobX 使用场景：

如何选择 MobX 模板：

MobX 示例：

MobX 状态管理示例：

2. redux：更适合大型应用的状态管理

Redux 优点：

Redux 使用场景：

如何选择 Redux 模板：

Redux 示例：

Redux 状态管理示例：

选择建议

总结：

配置 Redux Store

配置 Taro 与 Redux

使用 dispatch 更新状态

使用 useDispatch 和 useSelector

完整项目结构

1. `mobx`：简洁、响应式的状态管理

2. `redux`：更适合大型应用的状态管理

使用 `dispatch` 更新状态

使用 `useDispatch` 和 `useSelector`