我永远爱触手猴

Visual Studio Code 插件#

以 Visual Studio Code 为例，为了后续开发的遍历，可以安装一些主流的插件，如：

• ES7+ React/Redux/React-Native snippets：提供了一些便于 React 开发的代码片段。
• Simple React Snippets：提供了一些 React 开发的代码片段。
• Prettier - Code formatter：提供了代码格式化的功能。
• ESLint：提供了 JavaScript 代码检查的功能。
• Stylelint：提供了 CSS 代码检查的功能。
• SonarLint：提供了代码质量检查的功能。

模块样式#

但传统的 CSS 有一个问题，就是全局作用域。一个 CSS 文件中的样式会对整个页面生效，这样会导致样式冲突， 不利于组件化开发，类名称的弱关联也不利于样式的维护。

CSS Modules 是一种解决方案，它是一种 CSS 的模块化方案，可以解决全局作用域的问题。CSS Modules 会将 CSS 文件中的类名转换为一个哈希值，这样就可以保证类名的唯一性，避免样式冲突。

要将 App.css 转换为 CSS Module，首先需要将文件重命名为 App.module.css，然后在 App.tsx 中更改样式文件的引入， 最后根据需要修改样式文件中的类名，例如，将 read-the-docs 类名修改为 readTheDocs。

1
import './App.css'
2
import styles from './App.module.css'

这样就可以使用 styles 对象来引用 CSS Module 中的类名。

1
<>
2
  <div>
3
    <a href="https://vitejs.dev" target="_blank" rel="noopener">
4
<img src={viteLogo} className={styles.logo} alt="Vite logo" />
5
      <img src={viteLogo} className={styles.logo} alt="Vite logo" />
6
    </a>
7
    <a href="https://react.dev" target="_blank" rel="noopener">
8
<img src={reactLogo} className="logo react" alt="React logo" />
9
      <img src={reactLogo} className={`${styles.logo} ${styles.react}`} alt="React logo" />
10
    </a>
11
  </div>
12
  <h1>Vite + React</h1>
13
<div className="card">
14
  <div className={styles.card}>
15
    <button onClick={() => setCount((count) => count + 1)}>
16
      count is {count}
17
    </button>
18
    <p>
19
      Edit <code>src/App.tsx</code> and save to test HMR
20
    </p>
21
  </div>
22
<p className="read-the-docs">
23
  <p className={styles.readTheDocs}>
24
    Click on the Vite and React logos to learn more
25
  </p>
26
</>

更改文件后，可以发现 Vite 为我们自动更新了预览视图，这是因为 Vite 支持热模块替换（HMR）。 但修改后的组件并没有像原来一样保持居中，这是因为 CSS Module 会将类名转换为哈希值，不支持现有的 #root ID 选择器。 如果需要使用 ID 选择器，可以使用 :global 关键字，保留样式的原始全局性。

1
#root {
2
:global(#root) {
3
  max-width: 1280px;
4
  margin: 0 auto;
5
  padding: 2rem;
6
  text-align: center;
7
}

安装路由组件#

React 是一个单页面应用程序（SPA）框架，单页面应用程序是指一个页面加载后，不会因为用户的操作而进行页面的重新加载。 当需要切换页面时，只会更新页面的部分内容，而不会重新加载整个页面，这便需要路由来管理页面的切换。

React Router 是一个用于管理 React 应用程序路由的库，它提供了一些组件，用于在 React 应用程序中实现路由功能。

首先需要安装 React Router，这是我们第一次添加依赖。

1
npm install react-router-dom

这会在 package.json 中的 dependencies 节点下添加 react-router-dom 依赖。

1
"react-router-dom": "^6.23.0"

现在，我们可以根据文档的指南为我们的应用程序添加路由能力。

整理代码结构#

为了让页面结构更清晰，我们先整理以下目录结构。

在 src 目录下创建 features 文件夹，用于存放各个页面组件。

将组件 App 重命名为 Home，并移动到 features/home 目录下，此操作建议使用 IDE 的重构/重命名功能， 这样，相关的引用也会被自动更新。操作完成后，访问浏览器检查所有的引用是否正常。

重新创建 App 组件，用于包裹整个应用程序，这样可以在 App 组件中添加路由。

1
import { createBrowserRouter, RouterProvider } from "react-router-dom";
2
import Home from "./features/home/Home.tsx";
3

4
const router = createBrowserRouter(
5
  [
6
    {
7
      path: `/`,
8
      element: <Home/>
9
    }
10
  ]
11
);
12

13
export default function App() {
14
  return (
15
    <RouterProvider router={router}
16
                    fallbackElement={<p>Loading...</p>}
17
    />
18
  );
19
}
20

21
if (import.meta.hot) {
22
  import.meta.hot.dispose(() => router.dispose());
23
}

新的 App 模块道出了一个 RouterProvider 组件，用于提供路由功能。RouterProvider 组件接收一个 router 属性， 这个属性是一个路由对象，用于管理路由。router 对象是通过 createBrowserRouter 函数创建的，这个函数接收一个路由配置数组， 返回一个路由对象。路由配置数组中的每个元素都是一个路由配置对象，包含了路由的路径和对应的元素。

createBrowserRouter 函数返回的路由对象有一个 dispose 方法，用于清理路由对象。在开发模式下，当模块被热替换时， 会调用 dispose 方法，清理路由对象。

现在，应用程序的路由已经配置好了，但是还需要在入口文件中引入 App 组件。由于重构操作，main.tsx 中的原来的 <App /> 也被重命名为 <Home />，所以需要将其改为 <App />。重新导入模块 App 并使用它。

1
import Home from './features/home/Home.tsx'
2
import App from './App.tsx'
3

4
ReactDOM.createRoot(document.getElementById('root')!).render(
5
  <React.StrictMode>
6
<Home />
7
    <App />
8
  </React.StrictMode>,
9
)

现在，重新访问 http://localhost:5173/ ，可以看到页面上仍然正常显示着 Home 组件的内容，但此时已经是通过路由管理的。

创建新页面#

现在，我们来创建一个新的页面，用于展示一个关于页面。

在 features/about 目录下创建组件 About.tsx。

1
function About() {
2
  return (
3
    <>
4
      <h1>About</h1>
5
      <p>This is a simple app to demonstrate how to create a simple app using Vite and React.</p>
6
    </>
7
  );
8
}
9

10
export default About;

然后，我们需要在 App 组件中添加一个新的路由配置，用于展示 About 页面。

1
import About from "./features/about/About.tsx";
2

3
const router = createBrowserRouter(
4
  [
5
    {
6
      path: `/`,
7
      element: <Home/>
8
    },
9
    {
10
      path: `/about`,
11
      element: <About/>
12
    }
13
  ]
14
);

useState#

用于在函数组件中添加状态，可以视为一个组件内部的变量。 状态是一个组件可以改变的值，它可以影响组件的行为和渲染输出。 useState 接受一个参数，这个参数是状态的初始值，然后返回一个包含两个元素的数组。 第一个元素是当前的状态值，第二个元素是一个函数，用于更新状态值。 调用这个更新函数并传入一个新的值时，React 会重新渲染组件，并使用新的值作为状态。

以 Home.tsx 为例。

我们使用 useState 创建了一个新的状态变量 count，并给它设置了初始值 0。 我们还得到了一个函数 setCount，用于更新 count 的值。 当用户点击按钮时，我们调用 setCount 来增加 count 的值，这会触发组件的重新渲染。

useEffect#

用于在函数组件中执行副作用操作。副作用操作包括数据获取、订阅或手动修改 DOM 等等。 这些操作通常在组件渲染后执行，以不影响组件的渲染性能。

useEffect 接受两个参数：一个是执行副作用的函数，另一个是依赖数组。 当依赖数组中的值发生变化时，副作用函数就会被执行。如果不提供依赖数组，那么副作用函数会在每次渲染后都执行。

以 Effect.tsx 为例。

在这个例子中，我们使用 useEffect 来更新 document 的 title。 当 count 变化时，副作用函数就会被重新执行，更新 document 的 title。 当组件卸载或者下一次 useEffect 执行前，清理函数会被调用，将 document 的 title 重置为 React App。

需要注意的是，在开发模式下，我们启用了 React 严格模式，这会导致 useEffect 中的副作用函数被调用两次。 严格模式下，React 会在渲染过程中执行两次副作用函数，以确保副作用函数的纯净性，即相同的输入应始终产生相同的输出， 这有助于帮我们发现一些潜在的问题。

useContext#

用于在函数组件中访问 React 上下文。React 上下文是一个全局的数据存储区，用于在组件树中传递数据， 而无需通过 props 显式传递。

以 Context.tsx 为例。

useContext 接受一个 context 对象（React.createContext 的返回值）作为参数，并返回该 context 的当前值。 当前的 context 值是由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value 决定的。

useReducer#

用于在函数组件中管理复杂的状态逻辑。useReducer 类似于 Redux 中的 reducer，它接受一个 reducer 函数和一个初始状态， 并返回一个当前状态和一个 dispatch 函数。

useReducer 可以理解为是一种状态机，reducer 函数接收当前的状态和一个 action，返回一个新的状态。

以 Reducer.tsx 为例。

我们首先定义了一个 reducer 函数，它接受当前的 state 和一个 action，根据 action 的类型返回新的 state 。然后我们使用 useReducer，传入 reducer 函数和初始状态，得到当前的 state 和一个 dispatch 函数。在按钮的点击事件中，我们调用 dispatch 函数，传入一个 action 对象，触发 state 的更新。

useMemo#

用于在函数组件中缓存计算结果，通过记忆计算结果来避免在每次渲染时都进行重计算，优化性能。 useMemo 接受两个参数：一个是创建记忆值的函数，另一个是依赖数组。当依赖数组中的值发生变化时， useMemo 就会返回一个新的记忆值。如果依赖数组中的值没有变化，那么 useMemo 就会返回上一次的记忆值。

以 Memo.tsx 为例。

我们有一个复杂的计算函数 expensive 和 expensiveWithoutMemo，它们都会根据 count 的值进行计算。expensive 使用了 useMemo，而 expensiveWithoutMemo 没有。当我们改变输入框的值时，组件会重新渲染，但 count 的值并没有改变。对于 expensive 函数，由于 count 没有改变，useMemo 会返回上一次计算的结果，不会重新计算。但对于 expensiveWithoutMemo 函数，每次组件渲染时都会重新计算。因此，通过使用 useMemo，我们可以避免在每次渲染时都进行复杂的计算，从而优化性能。

useCallback#

用于在函数组件中缓存回调函数，通过记忆回调函数来避免在每次渲染时都创建新的回调函数，优化性能。 useCallback 接受两个参数：一个是创建函数的函数，另一个是依赖数组。当依赖数组中的值发生变化时，useCallback 就会返回一个新的函数实例。如果依赖数组中的值没有变化，那么 useCallback 就会返回上一次的函数实例。

以 Callback.tsx 为例。

我们使用 useCallback 创建了一个记忆的 increment 函数。只有当 count 变化时，useCallback 才会返回一个新的 increment 函数。如果 count 没有变化，那么 useCallback 就会返回上一次的 increment 函数。这样，即使组件重新渲染，increment 函数的引用也不会变化，除非 count 变化。

这就是 useCallback 的主要用途：它可以帮助我们避免在每次渲染时都创建新的函数，从而优化性能。但是，需要注意的是，useCallback 本身也有一定的开销，因此，只有在必要的时候（例如，当函数作为依赖项传递给其他 Hooks，或者当函数传递给性能敏感的子组件时）才应该使用它。

useRef#

用于在函数组件中创建一个可变的引用。useRef 返回一个可变的对象，这个对象的 current 属性可以存储任意值。 这个对象在组件的整个生命周期中保持不变，不会因为组件的重新渲染而改变。

以 Ref.tsx 为例。

我们使用 useRef 创建了一个 ref，并将其赋值给了一个输入框。然后，当按钮被点击时，我们使用 ref 来让输入框获取焦点。

需要注意的是，useRef 返回的 ref 对象有一个 current 属性，用于存储 ref 的值。在这个例子中，current 属性的值就是输入框的 DOM 节点。

安装 Redux Toolkit 和 React Redux#

Redux Toolkit 是一个官方的 Redux 工具包，它提供了一些工具和库，用于简化 Redux 的使用。 React Redux 是一个用于在 React 应用程序中使用 Redux 的库。

1
npm install @reduxjs/toolkit react-redux

• 定义根 State 和 Dispatch 类型

创建 src/app/store.ts 文件

1
import { Action, ThunkAction, configureStore } from '@reduxjs/toolkit'
2
import counterReducer from '../features/counter/counterSlice'
3

4
export const store = configureStore({
5
  reducer: {
6
    counter: counterReducer
7
  }
8
})
9

10
// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
11
export type RootState = ReturnType<typeof store.getState>
12

13
// 推断出类型: { counter: CounterState }
14
export type AppDispatch = typeof store.dispatch
15

16
export type AppThunk<ReturnType = void> = ThunkAction<
17
  ReturnType,
18
  RootState,
19
  unknown,
20
  Action<string>
21
>

定义 Hooks 类型#

创建 src/app/hooks.ts 文件

1
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
2
import type { RootState, AppDispatch } from './store'
3

4
// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
5
export const useAppDispatch: () => AppDispatch = useDispatch
6
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

定义 Slice State 和 Action#

每个 Slice 都包含了一个 Reducer 函数，用于处理 Action，并且可以包含一些额外的 Reducer 函数，用于处理其他的 Action。

编写模块代码#

可以参考组件 Counter。