Hello World

{/* 导航 Tab */}

评论 {/* 评论数量 */} {10}
{/* 高亮类名： active */} 最新最热

{/* 发表评论 */}

{/* 当前用户头像 */}

{/* 评论框 */}

{/* 发布按钮 */}
            <div className="reply-box-send">
              <div className="send-text">发布</div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {commentList.map((item) => (
            <div key={item.rpid} className="reply-item">
              {/* 头像 */}
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    alt=""
                    src={item.user.avatar}
                  />
                </div>
              </div>

<div className="content-wrap">
                {/* 用户名 */}
                <div className="user-info">
                  <div className="user-name">{item.user.uname}</div>
                </div>
                {/* 评论内容 */}
                <div className="root-reply">
                  <span className="reply-content">{item.content}</span>
                  <div className="reply-info">
                    {/* 评论时间 */}
                    <span className="reply-time">{item.ctime}</span>
                    {/* 评论数量 */}
                    <span className="reply-time">点赞数:{item.like}</span>
                    {/* 条件：user.id === item.user.id */}
                    <span className="delete-btn">删除</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;
~~~

+ 删除评论列表，条件：`user.uid === item.user.uid` ，意思就是只有自己发的评论才能显示删除，点击删除，删除对应作者的评论，需要一个带参的删除函数

~~~js
const delListHandler = (id) => {
    console.log(id);
    setcommentList(commentList.filter((item) => item.rpid !== id));
  };

{/* 条件：user.id === item.user.id */}
                    {user.uid === item.user.uid && (
                      <span
                        className="delete-btn"
                        onClick={() => delListHandler(item.rpid)}
                      >
                        删除
                      </span>
                    )}
~~~

+ tab切换并高亮显示，`map()` 遍历tabs数据，设置点击函数，获取type，点击切换效果class样式

~~~js
const [type, setType] = useState("hot");
  const tabChangeHandler = (type) => {
    console.log(type);
    setType(type);
  };

<li className="nav-sort">
            {/* 高亮类名： active */}
            {tabs.map((item) => (
              <span
                key={item.type}
                className={`nav-item ${type === item.type && "active"}`}
                onClick={() => tabChangeHandler(item.type)}
              >
                {item.text}
              </span>
            ))}
          </li>
~~~

+ 基于tabs对评论列表重新排序，采用lodash

~~~js
import _ from "lodash";

const [commentList, setcommentList] = useState(
    _.orderBy(defaultList, ["like"], ["desc"])
  );

+ classnames依赖优化类名控制

~~~js
import classNames from "classnames";

className={classNames("nav-item", {
                  active: type === item.type
                })}
~~~

+ 表单受控绑定

~~~js
// 评论
  const [commentValue, setCommentValue] = useState("");

{/* 评论框 */}
            <textarea
              value={commentValue}
              onChange={(e) => setCommentValue(e.target.value)}
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
~~~

+ react获取DOM，让输入框重新聚焦

~~~js
// 重新聚焦
    textareaRef.current.focus();
~~~

## 父传子 props 只读属性

~~~js
function Son(props) {
  console.log(props);
  return <div>Son {props.name}</div>;
}

function App() {
  return (
    <div className="App">
      Hello World!
      <Son name={"hello Son?"} />
    </div>
  );
}

export default App;
~~~

不仅可以传属性，还可以传方法：

~~~js
<Son
        name={"hello Son?"}
        age={18}
        cb={() => console.log("123")}
        list={["Vue", "React", "Angular"]}
        obj={{ name: "why", age: 18 }} // 对象会被完全拷贝
        isTrue={false}
        child={<sapn>hi son?</sapn>}
      />
~~~

props.children：当把内容嵌套在子组件标签内时，可通过 `props.children` 获取嵌套的节点内容

~~~js
function Child(props) {
  return <div>Child {props.children}</div>;
}

function App() {
  return (
    <div className="App">
      Hello World!
      <Child>
        <span>hi Child?</span>
      </Child>
    </div>
  );
}

export default App;
~~~

## 子传父

由于视图发生改变，需要使用状态数据`useState()`：

~~~js
import { useState } from "react";

function Son({ getSonMsg }) {
  const sonMsg = "hello Son?";
  return (
    <div>
      Son
      <button onClick={() => getSonMsg(sonMsg)}>带你我</button>
    </div>
  );
}

export default App;
~~~

## 兄弟组件通信

`状态提升` 机制，通过父组件进行兄弟之间的数据传递：

~~~js
import { useState } from "react";

function A({ getAName }) {
  const aName = "A";
  return (
    <div>
      this is A<button onClick={() => getAName(aName)}>send</button>
    </div>
  );
}

function B(props) {
  return <div>this is B;{props.name}</div>;
}

export default App;
~~~

> **大致步骤：**
>
> 1. 准备A和B两个兄弟组件，并在App父组件中引入；
> 2. 子A传父App，使用 `useState()` 维护；
> 3. 父App传子B，在B中通过props接收

## 跨层级组件通信 Context

~~~js
import { createContext, useContext, useState } from "react";

const MsgContext = createContext(); // 创建一个 Context 对象

function A() {
  return (
    <div>
      this is A
      <B />
    </div>
  );
}

function B() {
  const msg = useContext(MsgContext); // 使用 Context 对象
  return <div>this is B! {msg}</div>;
}

function App() {
  const msg = "this is App msg";
  return (
    <div className="App">
      <MsgContext.Provider value={msg}>
        Hello World!
        <A />
      </MsgContext.Provider>
    </div>
  );
}

export default App;
~~~

> **大致步骤：**
>
> 1. `createContext` 方法创建一个上下文对象
>
> ~~~js
> const MsgContext = createContext(); // 创建一个 Context 对象
> ~~~
>
> 1. 在顶层组件（App），通过 `Provider` 组件提供数据
>
> ~~~js
> <MsgContext.Provider value={msg}>
>         Hello World!
>         <A />
>       </MsgContext.Provider>
> ~~~
>
> 1. 在底层组件（B），通过 `useContext` 钩子函数使用数据
>
> ~~~js
> const msg = useContext(MsgContext); // 使用 Context 对象
>   return <div>this is B! {msg}</div>;
> ~~~

## useEffect

React Hook 函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAX请求，更改DOM等

~~~js
import { useEffect, useState } from "react";

const URL = "http://geek.itheima.net/v1_0/channels";

export default App;
~~~

### useEffect依赖项参数

~~~js
import { useEffect, useState } from "react";

function App() {
  // 没有依赖项 初始 + 组件更新
  const [count, setCount] = useState(0);
  // useEffect(() => {
  //   console.log("副作用函数执行了");
  // });

// 传入个空数组依赖, 初始渲染执行一次
  // useEffect(() => {
  //   console.log("副作用函数执行了");
  // }, []);

// 传入特定依赖项，初始 + 依赖项变化时执行
  useEffect(() => {
    console.log("副作用函数执行了");
  }, [count]);
  return (
    <div className="App">
      Hello World!
      <button onClick={() => setCount(count + 1)}>+ {count}</button>
    </div>
  );
}

export default App;
~~~

### useEffect清楚副作用

在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区经常把它叫做副作用操作，如useEffect中开启一个定时器，想在组件卸载时把定时器清理掉，该过程就是清理副作用。

清除副作用函数最常见的执行时机是在组件卸载时自动执行

~~~js
import { useEffect, useState } from "react";

function App() {
  const [show, setShow] = useState(true);
  return (
    <div className="App">
      Hello World!
      {show && <Son />}
      <button onClick={() => setShow(false)}>卸载Son组件</button>
    </div>
  );
}

export default App;
~~~

## 自定义Hook函数

自定义Hook是以 `use打头的函数` ,通过自定义Hook函数实现逻辑的封装和复用

~~~js
import { useState } from "react";
// 自定义Hook
function useToggle() {
  const [show, setShow] = useState(true);
  const toggle = () => setShow(!show);
  return { show, toggle };
}
function App() {
  const { show, toggle } = useToggle();
  // const [show, setShow] = useState(true);
  // const toggle = () => setShow(!show);
  return (
    <div className="App">
      Hello World!
      {show && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  );
}

export default App;
~~~

> **大致步骤：**
>
> 1. 声明一个以 `use打头的函数`
> 2. 在函数体内封装可复用的逻辑
> 3. 要把用到的状态或回调return出去（以对象或者数组）
> 4. 在哪个组件中用这个逻辑，就执行这个函数，解构出来状态或回调进行使用

### ReactHooks使用规则

## 评论案例优化

~~~cmd
npm i json-server axios
~~~

新建 `db.json`

~~~json
{
  "list": [
    {
      "rpid": 3,
      "user": {
        "uid": "13258165",
        "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
        "uname": "周杰伦"
      },
      "content": "哎哟，不错哦",
      "ctime": "10-18 08: 15",
      "like": 126
    },
    {
      "rpid": 2,
      "user": {
        "uid": "36080105",
        "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
        "uname": "许嵩"
      },
      "content": "我寻你千百度 日出到迟暮",
      "ctime": "11-13 11: 29",
      "like": 88
    },
    {
      "rpid": 1,
      "user": {
        "uid": "30009257",
        "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
        "uname": "黑马前端"
      },
      "content": "学前端就来黑马",
      "ctime": "10-19 09: 00",
      "like": 66
    }
  ]
}
~~~

添加运行指令

~~~json
"scripts": {
    "serve": "json-server src/db.json --port 3001"
  },
~~~

~~~js
import "./App.scss";
import avatar from "./images/bozai.png";
import { useState, useRef, useEffect } from "react";
import _ from "lodash";
import classNames from "classnames";
import { v4 as uuidV4 } from "uuid";
import dayjs from "dayjs";
import axios from "axios";
/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 */

// 当前登录用户信息
const user = {
  // 用户id
  uid: "30009257",
  // 用户头像
  avatar,
  // 用户昵称
  uname: "黑马前端"
};

/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 */

// 导航 Tab 数组
const tabs = [
  { type: "hot", text: "最热" },
  { type: "time", text: "最新" }
];

// Hook
function useComment() {
  const [commentList, setcommentList] = useState([]);
  useEffect(() => {
    // 请求数据
    async function getList() {
      const res = await axios.get("http://localhost:3001/list");
      setcommentList(_.orderBy(res.data, ["like"], ["desc"]));
    }
    getList();
  }, []);

return {
    commentList,
    setcommentList
  };
}

const CommentItem = ({ item, delListHandler }) => {
  return (
    <div className="reply-item">
      {/* 头像 */}
      <div className="root-reply-avatar">
        <div className="bili-avatar">
          <img className="bili-avatar-img" alt="" src={item.user.avatar} />
        </div>
      </div>

<div className="content-wrap">
        {/* 用户名 */}
        <div className="user-info">
          <div className="user-name">{item.user.uname}</div>
        </div>
        {/* 评论内容 */}
        <div className="root-reply">
          <span className="reply-content">{item.content}</span>
          <div className="reply-info">
            {/* 评论时间 */}
            <span className="reply-time">{item.ctime}</span>
            {/* 评论数量 */}
            <span className="reply-time">点赞数:{item.like}</span>
            {/* 条件：user.id === item.user.id */}
            {user.uid === item.user.uid && (
              <span
                className="delete-btn"
                onClick={() => delListHandler(item.rpid)}
              >
                删除
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

const App = () => {
  // const [commentList, setcommentList] = useState(
  //   _.orderBy(defaultList, ["like"], ["desc"])
  // );
  const { commentList, setcommentList } = useComment();

const delListHandler = (id) => {
    console.log(id);
    setcommentList(commentList.filter((item) => item.rpid !== id));
  };

const [type, setType] = useState("hot");
  const tabChangeHandler = (type) => {
    console.log(type);
    setType(type);
    // 基于tabs的排序
    if (type === "hot") {
      // 采用lodash对根据点赞数排序
      setcommentList(_.orderBy(commentList, ["like"], ["desc"]));
    } else {
      // 采用lodash根据创建时间排序
      setcommentList(_.orderBy(commentList, ["ctime"], ["desc"]));
    }
  };

// 评论
  const [commentValue, setCommentValue] = useState("");
  const textareaRef = useRef(null);
  const publishHandler = () => {
    setcommentList([
      ...commentList,
      {
        rpid: uuidV4,
        user: {
          uid: "36080105",
          avatar,
          uname: "许嵩"
        },
        content: commentValue,
        ctime: dayjs(new Date()).format("MM-DD hh:mm"),
        like: 999
      }
    ]);
    setCommentValue("");
    // 重新聚焦
    textareaRef.current.focus();
  };
  return (
    <div className="app">
      {/* 导航 Tab */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort">
            {/* 高亮类名： active */}
            {tabs.map((item) => (
              <span
                key={item.type}
                className={classNames("nav-item", {
                  active: type === item.type
                })}
                onClick={() => tabChangeHandler(item.type)}
              >
                {item.text}
              </span>
            ))}
          </li>
        </ul>
      </div>

<div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 当前用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" src={avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              ref={textareaRef}
              value={commentValue}
              onChange={(e) => setCommentValue(e.target.value)}
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
            {/* 发布按钮 */}
            <div className="reply-box-send">
              <div className="send-text" onClick={publishHandler}>
                发布
              </div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {commentList.map((item) => (
            <CommentItem
              key={item.rpid}
              item={item}
              delListHandler={delListHandler}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;
~~~

## 状态管理工具 Redux

> 不推荐这个，以后推荐使用zustand，redux只是简单了解一下，redux独立于框架运行

**配套工具**

~~~html
npx create-react-app react-redux
npm i @reduxjs/toolkit react-redux
~~~

使用 @reduxjs/toolkit 创建 counterStore：

~~~js
// counterStore.js
import { createSlice } from "@reduxjs/toolkit";

// 解析出来actionCreater函数
const { increment, decrement } = counterStore.actions;

// 获取reducer
const reducer = counterStore.reducer;
export { increment, decrement };
export default reducer;
~~~

创建根Store组合子模块：

~~~js
// index.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore";

const store = configureStore({
  reducer: {
    // 添加你的reducer
    counter: counterReducer
  }
});

export default store;
~~~

react-redux负责把Redux和React连接起来，内置Provider组件，通过store参数把创建好的store实例注入到应用中，连接正式建立

~~~js
// index.js
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
~~~

组件中使用store中的数据，需要用到一钩子函数 useSelector，它的作用时把store中的数据映射到组件中：

~~~js
// App.js
import { useSelector } from "react-redux";
function App() {
  const { count } = useSelector((state) => state.counter);
  return <div className="App">hello world!{count}</div>;
}

export default App;
~~~

React组件修改store中的数据需要借助另外一个hook函数 useDispatch，它的作用是生成提交action对象的dispatch函数：

~~~js
// App.js
import { useSelector, useDispatch } from "react-redux";
// 导入创建的action对象的方法
import { increment, decrement } from "./store/modules/counterStore";

export default App;
~~~

### 提交action传参

在 reducers 的同步修改方法中添加action对象函数，在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上：

~~~js
// counterStore.js
reducers: {
    addToNum: (state, action) => {
      state.count = action.payload;
    }
  }

// 解析出来actionCreater函数
const { addToNum } = counterStore.actions;

export { addToNum };

// App.js
// 导入创建的action对象的方法
import { addToNum } from "./store/modules/counterStore";

### redux 异步状态操作

使用 @reduxjs/toolkit 创建 channelStore：

~~~js
// channelStore.js
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
const URL = "http://geek.itheima.net/v1_0/channels";

const fetchChannelList = () => {
  return async (dispatch) => {
    const res = await axios.get(URL);
    dispatch(updateChannelList(res.data.data.channels));
  };
};

export { fetchChannelList };

const reducer = channelStore.reducer;
export default reducer;
~~~

创建根Store组合子模块：

~~~js
// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore";
import channelReducer from "./modules/channelStore";

const store = configureStore({
  reducer: {
    // 添加你的reducer
    counter: counterReducer,
    channel: channelReducer
  }
});

export default store;
~~~

~~~js
// App.js
import { useSelector, useDispatch } from "react-redux";
// 导入创建的action对象的方法
import { increment, decrement, addToNum } from "./store/modules/counterStore";
import { fetchChannelList } from "./store/modules/channelStore";
import { useEffect } from "react";

export default App;
~~~

下载插件：Redux DevTools

圆球相当于一个个组件，左图中组件中的状态分散、组件之间的调取比较麻烦。在大型应用中，往往会用Redux统一管理状态，如右图，不管你状态再多在分散，它都有一个核心的存放处Store，便于统一管理

### React 中的数据加载问题

> RTK Query是一个强大的数据获取和缓存工具。在它的帮助下，Web应用中的加载变得十分简单，它使我们不再需要自己编写获取数据和缓存数据的逻辑。

Web应用中加载数据时需要处理的问题：

1. 根据不同的加载状态显示不同UI组件
2. 减少对相同数据重复发送请求
3. 使用乐观更新，提升用户体验（数据加载失败后保持原有数据显示）
4. 在用户与UI交互时，管理缓存的生命周期（相当于实时更新数据并渲染）

这些问题，RTK Query都可以帮助我们处理。首先，可以直接通过RTKQ向服务器发送请求加载数据，并且RTKQ会自动对数据进行缓存，避免重复发送不必要的请求。其次，RTKQ在发送请求时会根据请求不同的状态返回不同的值，我们可以通过这些值来监视请求发送的过程并随时中止。

- 创建Api切片：在 `store/modules` 下创建 `channelApi.js`

~~~js
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// 创建Api对象
// createApi() 用来创建RTKQ中的API对象
// RTKQ中的所有功能都需要通过该对象运行
// createApi()需要一个对象作为参数
const channelApi = createApi({
  reducerPath: "channelApi", // Api的标识，不能于其他Api或reducer重复
  baseQuery: fetchBaseQuery({ baseUrl: "http://geek.itheima.net/v1_0/" }), // 指定请求的基础信息，发送请求使用的工具
  endpoints: (builder) => ({
    getChannels: builder.query({
      query: () => "channels" // 指定请求的URL地址子路径
    })
  })
  // Api对象封装了一类功能，比如数据的增删改查，我们会统一封装到一个对象中。一类功能中的每一个具体功能我们可以称它是一个端点。endpoints用来对请求中的端点进行配置。
  // builder是请求的构建器，通过builder来设置请求的相关信息
});

// Api对象创建后，对象中会根据各种方法自动的生成对应的钩子函数
// 通过这些钩子函数，会向服务器发送请求
// 钩子函数的命名规则：getChannels => useGetChannelsQuery
export const { useGetChannelsQuery } = channelApi;

// 获取reducer
// const reducer = channelApi.reducer;

export default channelApi;
~~~

- 在App.js中调用：

~~~js
// App.js
import { useGetChannelsQuery } from "./store/modules/channelApi";

function App() {
  // 调用Api查询数据
  const obj = useGetChannelsQuery();
  console.log(obj);

return (
    <div className="App">
      hello RTK Query
    </div>
  );
}
~~~

你会看到控制台会连续打印好几个对象，虽然对象中的属性都一样，但值会用变化。

- 解构并将数据渲染到页面上：

~~~js
// App.js
import { useGetChannelsQuery } from "./store/modules/channelApi";

function App() {
  // 调用Api查询数据
  const { data, isSuccess } = useGetChannelsQuery();

return (
    <div className="App">
      hello RTK Query
      <ul>
        {isSuccess &&
          data.data.channels.map((item) => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

export default App;
~~~

俺在这就不多说了，想知道更多使用方法：官网：[Redux Toolkit | Redux Toolkit (redux-toolkit.js.org)](https://redux-toolkit.js.org/)

还有数据持久化：[redux-persist - npm (npmjs.com)](https://www.npmjs.com/package/redux-persist)

## 啥是 Zustand

-   官网：[Zustand (pmnd.rs)](https://zustand-demo.pmnd.rs/)；

这里俺就不介绍了，直接看官网介绍就行了，俺就直接开始撸代码了。

- 创建store：通过 `import { create } from "zustand"`

~~~js
import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }) // 添加reset方法
}));

export default App;
~~~

![react-basics19.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02978f6ceb0b4dc1beeee686e47aa3f4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=610&h=451&s=45303&e=gif&f=43&b=fdfdfd)

### 异步请求

![code32.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2281fd8b2d5a4730882b9beeaa716d9d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2406&h=2980&s=731455&e=png&b=011727)

![Snipaste_2024-01-30_23-29-25.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b92e9bf829d476cad040155c20c7e69~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=620&h=886&s=40690&e=png&b=fdfdfd)

有个不严谨的地方不知道你有没有发现，如果初始状态多的话，使用 `set` 修改状态时，会出现错误（俺就说下，不演示了，就是会无法修改对应的状态）可以简单的修改下：

![code33.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ced4b503e9b48eb83b4e09e14d33b18~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2206&h=484&s=155927&e=png&b=011727)

### zustand — 切片模式

当单个store比较大的时候，可以采用切片模式进行模块拆分组合，类似于模块化

![Snipaste_2024-01-07_01-35-39.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ac2019ac2a742bdbef44bbc339a6930~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1613&h=547&s=167573&e=png&b=fefefe)

不知道为啥，官网给的切片示例俺使不通，然后俺就小改了下，行了：

![code34.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea0b96d3d6514560a8279583feca05a1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2274&h=2788&s=728451&e=png&b=011727)

## zustand 状态管理工具

+ 官网：[Zustand (pmnd.rs)](https://zustand-demo.pmnd.rs/)；

> **基础步骤：**
>
> 1. 创建store
>
> + 函数参数必须返回一个对象，对象内部编写状态数据和方法
> + set是用来修改数据的专门方法必须调用它来修改数据
>   - 语法1：参数为函数，需要用到老数据的场景
>   - 语法2：参数直接是一个对象 `set({ count: 0 })`
>
> 2. 绑定store到组件
>
> useStore => { count, increment, decrement }

~~~js
import { create } from "zustand";
const useStore = create((set) => {
  return {
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
    reset: () => set({ count: 0 }) // 添加reset方法
  };
});
function App() {
  const { count, increment, decrement } = useStore();
  return (
    <div className="App">
      hello zustand!
      <button onClick={increment}>{count}</button>
    </div>
  );
}

export default App;
~~~

### zustand — 异步支持

直接在函数中编写异步逻辑，最后只需要调用set方法传入新状态即可

~~~js
import { create } from "zustand";
import axios from "axios";
import { useEffect } from "react";
const URL = "http://geek.itheima.net/v1_0/channels";

export default App;
~~~

### zustand — 切片模式

当单个store比较大的时候，可以采用切片模式进行模块拆分组合，类似于模块化

~~~js
// store/modules/counterStroe.js
import { create } from "zustand";

export const createCounterStore = create((set) => {
  return {
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 }))
  };
});

// store/modules/channelStroe.js
import { create } from "zustand";
import axios from "axios";
const URL = "http://geek.itheima.net/v1_0/channels";

export const createChannelStore = create((set) => {
  return {
    channelList: [],
    // 异步方法
    fetchChannelList: async () => {
      const res = await axios.get(URL);
      set({ channelList: res.data.data.channels });
    }
  };
});

// store/index.js
import { createCounterStore } from "./modules/counterStore";
import { createChannelStore } from "./modules/channelStore";

export const useStore = (...a) => {
  return {
    ...createChannelStore(...a),
    ...createCounterStore(...a)
    // ...other stores
  };
};

// App.js
import { useStore } from "./store";
import { useEffect } from "react";
function App() {
  const { channelList, fetchChannelList } = useStore();
  const { count, increment } = useStore();
  useEffect(() => {
    fetchChannelList();
  }, [fetchChannelList]);
  return (
    <div className="App">
      hello zustand!
      <button onClick={increment}>{count}</button>
      <ul>
        {channelList.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
~~~

使用Redux DevTools调试：

~~~js
import { create } from "zustand";
import { devtools } from "zustand/middleware";

export const createCounterStore = create(
  devtools((set) => {
    return {
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }))
    };
  })
);
~~~

## 让zustand更加严谨一点

+ 基础使用：除了set，还有get它是专门获取的

~~~js
// store/modules/counterStroe.js
import { create } from "zustand";

export const createCounterStore = create((set, get) => ({
  price: 100,
  count: 10,
  // ...state考虑到可能数据比较复杂
  increment: () => set((state) => ({ ...state, count: state.count + 1 })),
  decrement: () => set((state) => ({ ...state, count: state.count - 1 })),
  getTotal: () => get().price * get().count
}));

// App.js
import { createCounterStore } from "./store/modules/counterStore";

export default App;
~~~

### 简化逻辑

+ 简化逻辑：Immer 中间件使您能够以更方便的方式使用不可变状态。此外，借助 Immer，您可以简化 Zustand 中不可变数据结构的处理。

~~~cmd
npm install immer
~~~

~~~js
// store/modules/channelStroe.js
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";

export const createCounterStore = create(
  immer((set, get) => ({
    price: 100,
    count: 10,
    increment: () =>
      set((state) => {
        state.count += 1;
      }),
    decrement: () =>
      set((state) => {
        state.count -= 1;
      }),
    getTotal: () => get().price * get().count
  }))
);
~~~

+ 简化状态获取：

~~~js
const { count, price, increment, decrement, getTotal } = createCounterStore();
~~~

### 状态获取指定值

+ 状态获取指定值：以防止组件重复加载

~~~js
import { createCounterStore } from "./store/modules/counterStore";

function A() {
  const { color, price } = createCounterStore();
  console.log("----zustand----");
  return (
    <div>
      <h1 style={{ color }}>单价：{price}</h1>
    </div>
  );
}

function B() {
  const { count, price, increment, decrement, getTotal } = createCounterStore();
  return (
    <div className="App">
      hello zustand!
      <h1>单价：{price}</h1>
      <h1>数量：{count}</h1>
      <h1>营业额：{getTotal()}</h1>
      <div>
        <button onClick={increment}>+{count}</button>
        <button onClick={decrement}>-{count}</button>
      </div>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <A />
      <B />
    </div>
  );
}

export default App;
~~~

> 上述代码就会造成组件重复加载，A组件只获取了不变的状态，B组件点击按钮时，B组件重新渲染，而A组件也会重新渲染并打印log，项目一但大了，这样就不行了

+ 解决：需要借助 `useShallow`

~~~js
import { createCounterStore } from "./store/modules/counterStore";
import { useShallow } from "zustand/react/shallow";

function App() {
  return (
    <div className="App">
      <A />
      <B />
    </div>
  );
}

export default App;
~~~

### 使用Redux DevTools调试

+ 使用Redux DevTools调试：借助中间件 `devtools`

~~~js
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { devtools } from "zustand/middleware";

export const createCounterStore = create(
  immer(
    devtools(
      (set, get) => ({
        price: 100,
        color: "red",
        count: 10,
        increment: () =>
          set((state) => {
            state.count += 1;
          }),
        decrement: () =>
          set((state) => {
            state.count -= 1;
          }),
        getTotal: () => get().price * get().count
      }),
      { enabled: true, name: "Counter Store" }
    )
  )
);
~~~

### 持久化存储

+ 持久化存储：借助中间件 `persist`

~~~js
// 中间件嵌套顺序
immer(
	devtools(
        // 存储到localStorage时给它起个名字
    	persist(set/get的回调, {name: ""})
    )
)
~~~

~~~js
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { devtools, persist } from "zustand/middleware";

export const createCounterStore = create(
  immer(
    devtools(
      persist(
        (set, get) => ({
          price: 100,
          color: "red",
          count: 10,
          increment: () =>
            set((state) => {
              state.count += 1;
            }),
          decrement: () =>
            set((state) => {
              state.count -= 1;
            }),
          getTotal: () => get().price * get().count
        }),
        { name: "counterStore" }
      ),
      { enabled: true, name: "Counter Store" }
    )
  )
);
~~~

+ 仅存储指定属性：`partialize`

~~~js
{
          name: "counterStore",
          partialize: (state) => ({ price: state.price })
        }
~~~

+ 指定某些属性不存储：

~~~js
{
          name: "counterStore",
          partialize: (state) =>
            Object.fromEntries(
              // Object.entries(state).filter(([key]) => key !== "price")
              Object.entries(state).filter(([key]) => !["price"].includes(key))
            )
        }
~~~

+ 存到哪：

~~~js
import { devtools, persist, createJSONStorage } from "zustand/middleware";

{
          name: "counterStore",
          partialize: (state) =>
            Object.fromEntries(
              // Object.entries(state).filter(([key]) => key !== "price")
              Object.entries(state).filter(([key]) => !["price"].includes(key))
            ),
          storage: createJSONStorage(() => sessionStorage)
        }
~~~

### 订阅机制 subscribe

性能高于直接使用状态去进行判断，比如 A组件中对count进行判断 `<h1>数量：{count > 15 ? "多了多了" : "少了"}</h1>` ，在count小于15之前，A组件页面也没发生变化，但会重新渲染，这样是有负担的：

~~~js
import { useEffect, useState } from "react";
import { createCounterStore } from "./store/modules/counterStore";
import { useShallow } from "zustand/react/shallow";

function A() {
  const [num, setNum] = useState("少了少了");
  const { color, price } = createCounterStore(
    useShallow((state) => ({
      color: state.color,
      price: state.price
    }))
  );

useEffect(() => {
    const cancelSub = createCounterStore.subscribe((state, prevState) => {
      if (state.count > 15 && prevState.count <= 15) {
        setNum("多了多了"); // 这里修改了状态，但A组件没有重新渲染
      } else if (state.count <= 15 && prevState.count > 15) {
        setNum("少了少了");
      }
    });
    return cancelSub;
  }, []);
  console.log("----zustand A----");
  return (
    <div>
      <h1 style={{ color }}>单价：{price}</h1>
      <h1>数量：{num}</h1>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <A />
      <B />
    </div>
  );
}

export default App;
~~~

我不想这样监听count，我想只监听count状态属性，在组件中监听的话要是其他数据变的话，那组件还要判断一下，这样不好：

~~~js
// 中间件嵌套顺序
import {
  devtools,
  persist,
  createJSONStorage,
  subscribeWithSelector
} from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

immer(
	devtools(
        subscribeWithSelector(
        	// 存储到localStorage时给它起个名字
    		persist(set/get的回调, {name: ""})
        )
    )
)
~~~

~~~js
import { useEffect, useState } from "react";
import { createCounterStore } from "./store/modules/counterStore";
import { useShallow } from "zustand/react/shallow";

useEffect(() => {
    // const cancelSub = createCounterStore.subscribe((state, prevState) => {
    //   if (state.count > 15 && prevState.count <= 15) {
    //     setNum("多了多了"); // 这里修改了状态，但A组件没有重新渲染
    //   } else if (state.count <= 15 && prevState.count > 15) {
    //     setNum("少了少了");
    //   }
    // });

function App() {
  return (
    <div className="App">
      <A />
      <B />
    </div>
  );
}

export default App;
~~~

当你强制刷新时，会发现如果count>15的话，不管你咋加，显示的都是少了少了：添加 fireImmediately: true 配置项，再加一个判断条件count === prevCount

~~~js
import { useEffect, useState } from "react";
import { createCounterStore } from "./store/modules/counterStore";
import { useShallow } from "zustand/react/shallow";

function App() {
  return (
    <div className="App">
      <A />
      <B />
    </div>
  );
}

export default App;
~~~

### 静态方法 setState和getState

由于多个组件需要共同去使用或访问同一个状态属性，需要共享，所以把该状态或操作该状态的动作提取出来统一去管理，当当某一个动作只是再一个组件中使用：比如写一个加三的动作，该动作只在B组件中使用

~~~js
function B() {
  const { count, price, increment, decrement, getTotal } = createCounterStore();
  const BAdd3 = () => {
    createCounterStore.setState((state) => {
      state.count += 3;
    });
  };
  console.log("----zustand B----");
  return (
    <div className="App">
      hello zustand!
      <h1>单价：{price}</h1>
      <h1>数量：{count}</h1>
      <h1>营业额：{getTotal()}</h1>
      <div>
        <button onClick={increment}>+{count}</button>
        <button onClick={decrement}>-{count}</button>
        <button onClick={BAdd3}>B组件独有的加三动作</button>
      </div>
    </div>
  );
}
~~~

可以将counterStore.js中的动作提取出来，并单独导出：

~~~js
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import {
  devtools,
  persist,
  createJSONStorage,
  subscribeWithSelector
} from "zustand/middleware";

export const createCounterStore = create(
  immer(
    devtools(
      subscribeWithSelector(
        persist(
          (set, get) => ({
            price: 100,
            color: "red",
            count: 10
            // increment: () =>
            //   set((state) => {
            //     state.count += 1;
            //   }),
            // decrement: () =>
            //   set((state) => {
            //     state.count -= 1;
            //   }),
            // getTotal: () => get().price * get().count
          }),
          {
            name: "counterStore",
            partialize: (state) =>
              Object.fromEntries(
                // Object.entries(state).filter(([key]) => key !== "price")
                Object.entries(state).filter(
                  ([key]) => !["price"].includes(key)
                )
              ),
            storage: createJSONStorage(() => sessionStorage)
          }
        )
      ),
      { enabled: true, name: "Counter Store" }
    )
  )
);

export const increment = () => {
  createCounterStore.setState((state) => {
    state.count += 1;
  });
};
export const decrement = () => {
  createCounterStore.setState((state) => {
    state.count -= 1;
  });
};
export const getTotal = () => {
  return (
    createCounterStore.getState().price * createCounterStore.getState().count
  );
};

// App.js
import {
  createCounterStore,
  increment,
  decrement,
  getTotal
} from "./store/modules/counterStore";
~~~

zustand作者也推荐使用这样的方法，代码会更加美观整洁

## 美团案例

+ 所需依赖：

~~~cmd
npm i axios json-server lodash zustand
~~~

+ 虚拟服务指令：

~~~json
"scripts": {
    "serve": "json-server --watch server/data.json --port 3001"
  },
~~~

+ App样式创建并引入：

~~~scss
// App
* {
  padding: 0;
  margin: 0;
}

.App {}
~~~

~~~js
// App.js
import "./App.scss";
~~~

### 静态页面搭建

~~~js
// components/TopNavBar/index.js
import "./index.scss";

const TopNavBar = () => {
  return (
    <div className="top-navbar">
      <p>Top Navbar</p>
    </div>
  );
};

export default TopNavBar;

// App.js
import "./App.scss";
import TopNavBar from "./components/TopNavBar";

const App = () => {
  return (
    <div className="app">
      hello meituan!
      {/* 导航 */}
      <TopNavBar />
    </div>
  );
};

export default App;
~~~

就是个静态组件，看看源码就行了

### 数据存储 zustand 左右切换展示

~~~js
// store/modules/category.js
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { devtools, persist, createJSONStorage } from "zustand/middleware";
import axios from "axios";

const URL = "http://localhost:3001/takeaway";

export const useCategoryStore = create(
  immer(
    devtools(
      persist(
        (set, get) => ({
          categoryList: []
        }),
        {
          name: "categoryStore",
          partialize: (state) => ({ categoryList: state.categoryList }),
          storage: createJSONStorage(() => sessionStorage)
        }
      ),
      { enabled: true, name: "Category Store" }
    )
  )
);

export const setCategoryList = async () => {
  const res = await axios.get(URL);
  useCategoryStore.setState((state) => {
    state.categoryList = res.data;
    console.log(state.categoryList);
  });
};

// store/index.js
import { setCategoryList, useCategoryStore } from "./modules/category";

export const useStore = (...a) => {
  return {
    ...useCategoryStore(...a),
    setCategoryList
  };
};

// App.js
import { useEffect } from "react";
import { useStore } from "./store";

export default App;
~~~

+ 菜单组件 Menu ，由于右侧已经获得到了列表数据，就不用再菜单组件 Menu 中再获取重新获取一次了，会给后台服务造成负担的，可以通过父传子组件通信来传递给菜单组件 Menu 值：

~~~js
// App.js
<Menu categorys={categorys} />
    
// Menu/index.js
import classNames from "classnames";
import "./index.scss";

export default Menu;
~~~

+ 状态管理菜单激活值activeIndex，并定义一个点击菜单项时该值会发生变化的动作：

~~~js
// store/modules/category.js
(set, get) => ({
          // 商品列表
          categoryList: [],
          // 菜单激活
          activeIndex: 0
        }),
    
// 更改activeIndex的值
export const changeActiveIndex = (index) => {
  useCategoryStore.setState((state) => {
    state.activeIndex = index;
    console.log(state.activeIndex);
  });
};

// store/index.js
import {
  setCategoryList,
  changeActiveIndex,
  useCategoryStore
} from "./modules/category";

export const useStore = (...a) => {
  return {
    ...useCategoryStore(...a),
    setCategoryList,
    changeActiveIndex
  };
};

// Menu/index.js
import classNames from "classnames";
import "./index.scss";
+ import { useStore } from "../../store";

export default Menu;
~~~

点击个个菜单项后，控制台会输出相应的index值，并且同步持久化。

+ 动态更新菜单项类名样式：判断activeIndex是否等于当前的index：

~~~js
// Menu/index.js
className={classNames(
              "list-menu-item",
              activeIndex === index && "active"
            )}
~~~

+ 菜单项对应的商品列表切换显示：如果activeIndex === index && 商品列表视图：

~~~js
// App.js
const App = () => {
  const { activeIndex } = useStore();
  return (
    <div className="app">

{/* 内容 */}
      <div className="content-wrap">
        <div className="goods-list">
              {/* 外卖商品列表 */}
              {categoryList.map((item, index) => {
                return (
                  activeIndex === index && (
                    <FoodsCategory
                      key={item.tag}
                      // 列表标题
                      name={item.name}
                      // 列表商品
                      foods={item.foods}
                    />
                  )
                );
              })}
            </div>
    </div>
  );
};

export default App;
~~~

### 添加购物车实现

- 点击 + 号添加当前商品到购物车列表中，需要对购物车列表进行状态管理：

~~~js
// store/modules/category.js
(set, get) => ({
          // 商品列表
          categoryList: [],
          // 菜单激活
          activeIndex: 0,
          // 购物车列表
          cartList: []
        }),
    
// 添加购物车
export const addCart = (item) => {
  // 使用useCategoryStore的setState方法，更新购物车状态
  useCategoryStore.setState((state) => {
    // 查找购物车中是否存在当前添加的商品，如果存在，则数量加1，否则添加到购物车中
    const cartItem = state.cartList.find((i) => i.name === item.name);
    if (cartItem) {
      cartItem.count++;
    } else {
      state.cartList.push({ ...item, count: 1 });
      console.log(state.cartList);
    }
  });
};

// store/index.js
import {
  setCategoryList,
  addCart
} from "./modules/category";

export const useStore = (...a) => {
  return {
    ...useCategoryStore(...a),
    addCart
  };
};
~~~

+ 将持久化存储修改下，只存储菜单激活 `activeIndex` ：

~~~js
// store/modules/category.js
{
          name: "categoryStore",
          partialize: (state) => ({ activeIndex: state.activeIndex }),
          storage: createJSONStorage(() => sessionStorage)
        }
~~~

+ 在FoodItem组件中的加号添加点击事件：

~~~js
// FoodItem/index.js
import { addCart } from "./../../../store/modules/takeawaySlice";

<div className="goods-count">
            <span
              className="plus"
              onClick={() =>
                addCart({
                  id,
                  picture,
                  name,
                  unit,
                  description,
                  food_tag_list,
                  month_saled,
                  like_ratio_desc,
                  price,
                  tag,
                  count
                })
              }
            ></span>
          </div>
~~~

![Snipaste_2024-02-02_17-27-43.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4262b6507554e64941cb693f51d4501~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=834&h=483&s=40567&e=png&b=f8f8f8)

### 购物车数量和总价显示

- 在Cart组件中通过store中的carts的length来渲染数量：购物车上的红色标识

~~~js
import { useStore } from "../../store";

const Cart = () => {
  const cart = [];
  const { carts } = useStore();
  return (
    <div className="cartContainer">
      {/* 遮罩层 添加visible类名可以显示出来 */}
      <div className={classNames("cartOverlay")} />
      <div className="cart">
        {/* fill 添加fill类名可以切换购物车状态*/}
        {/* 购物车数量 */}
        <div className={classNames("icon")}>
          {carts.length > 0 && (
            <div className="cartCornerMark">{carts.length}</div>
          )}
        </div>
~~~

![react-basics26.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/afd37e229d6f4609b27ffa67940f59d5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=489&h=770&s=67108&e=gif&f=30&b=fcfbfc)

- 计算总价price*count：

~~~js
// Cart/index.js
// 计算总价
  const totalPrice = carts.reduce(
    (sum, item) => sum + item.price * item.count,
    0
  );

{/* 购物车价格 */}
        <div className="main">
          <div className="price">
            <span className="payableAmount">
              <span className="payableAmountUnit">¥</span>
              {totalPrice.toFixed(2)}
            </span>
          </div>
~~~

![react-basics27.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d70eedd361b4f509ef00047d5095747~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=489&h=770&s=222578&e=gif&f=54&b=fcfbfc)

- 购物车高亮显示：

![Snipaste_2024-02-02_18-03-58.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2c725f2c8d444eca5d43c32a84ad86e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1142&h=187&s=46635&e=png&b=011626)

![react-basics28.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bb77a952470477bbae9d20b1792bc7b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=489&h=770&s=72984&e=gif&f=21&b=fcfbfc)

### 购物车列表实现

- 购物车列表渲染：直接把cart改为carts就行了，再添加个类名visible

![Snipaste_2024-02-02_18-13-56.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10cfbc8a72f942a4989848598b075d73~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=909&h=458&s=75689&e=png&b=011727)

![react-basics30.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db2704e8ebb54a4cb4aea5907e276d02~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=489&h=770&s=333415&e=gif&f=54&b=fcfbfb)

- 修改carts里的count：添加增和减的操作

~~~js
// store/modules/categorySlice.js
// 增加count
export const increcount = (item) => {
  createTakeawaySlice.setState((state) => {
    // 找到当前要修改的id
    const cartItem = state.carts.find((i) => i.id === item.id);
    cartItem.count++;
  });
};

// 减count
export const decrecount = (item) => {
  createTakeawaySlice.setState((state) => {
    // 找到当前要修改的id
    const cartItem = state.carts.find((i) => i.id === item.id);
    if (cartItem.count === 0) {
      return;
    }
    cartItem.count--;
  });
};

// 清空购物车
export const clearCart = () => {
  createTakeawaySlice.setState((state) => {
    state.carts = [];
  });
};
~~~

~~~js
// Cart/index.js
import {
  decrecount,
  increcount,
  clearCart
} from "../../store/modules/takeawaySlice";

<span className="clearCart" onClick={clearCart}>
            清空购物车
          </span>
{/* 购物车列表 */}
        <div className="scrollArea">
          {carts.map(({ id, picture, name, price, count }) => {
            return (
              <div className="cartItem" key={id}>
                <img className="shopPic" src={picture} alt="" />
                <div className="main">
                  <div className="skuInfo">
                    <div className="name">{name}</div>
                  </div>
                  <div className="payableAmount">
                    <span className="yuan">¥</span>
                    <span className="price">{price}</span>
                  </div>
                </div>
                <div className="skuBtnWrapper btnGroup">
                  <Count
                    count={count}
                    onPlus={() => increcount({ id })}
                    onMinus={() => decrecount({ id })}
                  />
                </div>
              </div>
            );
          })}
        </div>
~~~

![react-basics31.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/986ff67f6a694b3eb8ade761250d3983~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=489&h=770&s=196766&e=gif&f=54&b=fbfafa)

- 显示和隐藏购物车：点击购物车显示购物车列表，点击遮罩层隐藏购物车列表

~~~js
// Cart/index.js
// 控制购物车显示与隐藏
  const [visible, setVisible] = useState(false);

{/* 遮罩层 添加visible类名可以显示出来 */}
      <div
        className={classNames("cartOverlay", visible && "visible")}
        onClick={() => setVisible(false)}
      />

{/* 购物车数量 */}
        <div
          onClick={() => setVisible(true)}
          className={classNames("icon", carts.length > 0 && "fill")}
        >
                     
{/* 添加visible类名 div会显示出来 */}
      <div className={classNames("cartPanel", visible && "visible")}>
~~~

![react-basics32.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3b241e610164ec79a35f13b1ce1f89c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=489&h=770&s=298144&e=gif&f=58&b=fcfbfc)

## ReactRouter

使用React这些工具所编写的项目通常都是单页应用（SPA）,上述的案例都可以叫单页应用。单页应用中，整个应用中只含有一个页面，React会根据不同的状态在应用中显示出不同的组件。要想实现多页面应用，需要引入一个新的工具React Router，React Router为我们提供一种被称为客户端路由的东西，通过客户端路由可以将URL地址和React组件进行映射，当URL地址发生变化时，它会根据设置自动的切换到指定组件。并且这种切换完全不依赖于服务器。换句话说，在用户看来浏览器的地址栏确实发生了变化，但是这一变化并不由服务器处理，而是通过客户端路由进行切换。

官网：[Home v6.21.3 | React Router](https://reactrouter.com/en/main)

React Router6新出来的，虽然与5有很大的区别和新特性，5和6都认识下吧，相当于一个过度吧。

~~~cmd
npm install react-router-dom@5
~~~

在 `index.js` 中引入 `BrowserRouter` 并包裹App组件（或起个别名 `BrowserRouter as Router`）

~~~js
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <App />
  </Router>
);
~~~

然后就可以在项目中使用React Router了。

### Route组件

> - React Router 的url地址可以和组件进行映射（用户访问某个地址时，与其对应的组件会自动挂载）

~~~js
// components/Home/index.js
const Home = () => {
  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
    </div>
  );
};

export default Home;

// components/About/index.js
const About = () => {
  return (
    <div>
      <h1>Welcome to the About Page!</h1>
      <ul>
        <li>React</li>
        <li>Zustand</li>
        <li>Router</li>
        <li>Webpack</li>
      </ul>
    </div>
  );
};

export default About;

// App.js
import { Route } from "react-router-dom/cjs/react-router-dom.min";
import Home from "./components/Home";
import About from "./components/About";

const App = () => {
  return (
    <div className="App">
      <h1>Hello React!</h1>
      {/* 将组件与路由进行映射
        使用 Route 来映射地址和组件
            属性：
                path 映射的url地址
                component 要挂载的组件
                 */}
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;
~~~

![react-basics21.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a37540fd1ba64455903df70f6188c024~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=674&h=585&s=160017&e=gif&f=35&b=fefefe)

不知道看到这你会不会这样想，不是说用户访问某个地址时，与其对应的组件会自动挂载，那俺访问了 `/about` 后，`/` 路径的Home组件还会显示呢。

当 Route 的路径被访问，其对应组件就会对应挂载，其实这句话没毛病，你想的那是叫严格匹配。注意哈，默认情况下 Route 不能严格匹配，只要url地址地址的头部与path一致，组件就会挂载。要想做到你想的那样的严格匹配的话，添加个 `exact`

~~~js
{ /* exact 路径是否严格匹配 默认值：false */ }
<Route exact path="/" component={Home} />
~~~

1. `component` 用来指定路由匹配后被挂载的组件，需要直接传递组件的类，通过component构建的组件，它会自动创建组件并传递参数（直接在组件内传递props即可看到）

~~~js
// components/About/index.js
const About = (props) => {
  console.log(props);
~~~

![Snipaste_2024-02-01_13-22-51.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f27ddf15cf14457d81a97bd761d3ae38~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=548&h=166&s=20527&e=png&b=fefcfc)

- match -> 匹配的信息

- **isExact** 检查路径是否完全匹配

- **params** 请求的参数

About组件的path修改下 `path="/about/:id"` ，然后控制台打印 `console.log(props.match.params)` :

![react-basics24.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3a8d2683374419dbb73cdbf1aa3e693~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1027&h=499&s=222322&e=gif&f=40&b=fefefe)

改进下：

~~~js
    // components/About/index.js
    const data = [
      {
        id: 1,
        title: "React"
      },
      {
        id: 2,
        title: "Zustand"
      },
      {
        id: 3,
        title: "Router"
      },
      {
        id: 4,
        title: "Webpack"
      }
    ];
    const About = (props) => {
      const ds = data.find((item) => item.id === +props.match.params.id);
      return (
        <div>
          <h1>Welcome to the About Page!</h1>
          <ul>
            <li>
              {ds.id} —— {ds.title}
            </li>
          </ul>
        </div>
      );
    };
    
    export default About;
    ~~~

![react-basics25.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad2a031edcc04719ac2367c3a640da92~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1027&h=499&s=240559&e=gif&f=43&b=fefdfd)

- location -> 地址信息
- history -> 控制页面的跳转
  - push() 跳转页面（可回退到之前页）
  - replace() 替换页面（不可回退到之前页）

2. 除了 `component` 挂载组件，还有另一个方式 `render`

`render` 也可以用来指定被挂载的组件，它需要一个回调函数作为参数，回调函数的返回值会最终被挂载，它不会向 `component` 一样自动传递三个属性，要想得到这三个属性需要这样：

~~~js
      <Route
        exact
        path="/about/:id"
        render={(routeProps) => {
          return <About {...routeProps} />;
        }}
      />
~~~

组件通过props就可接收到这三个属性

3. 除了 `render` 挂载组件，还有另一个方式 `children`

`children` 也可以用来指定被挂载的组件，用法有两种：

- 和render类似，传递回调函数（直接把上图的render改为children就行），当children设置一个回调函数时，该组件无论路径是否匹配都会挂载
- 可以直接传递组件 `<Route exact path="/about/:id" children={<About />} />` （或者这样写 `<Route exact path="/about/:id"><About /></Route>`）

除了通过props获取三个对象外，还可以通过钩子函数来获取：

~~~js
import {
  useHistory,
  useLocation,
  useRouteMatch,
  useParams
} from "react-router-dom";

const match = useRouteMatch();
  const location = useLocation();
  const history = useHistory();
  const params = useParams();
~~~

### 路由的嵌套

~~~js
<Route path="/about">
        <About />
        <Route path="/about/good">
          <Good />
        </Route>
      </Route>
~~~

同样也可以将嵌套路由放在About组件里，只是层级不一样了，使用还是不变的。

那如果about的嵌套路由有很多的话，想把 `/about/xxx/xxx~~~` 中的about动态获取（即父组件地址）

~~~js
// components/About/index.js
import { Route } from "react-router-dom";
import Good from "../Good";
import { useRouteMatch } from "react-router-dom";
const About = () => {
  const { path } = useRouteMatch();
  return (
    <>
      <h1>Welcome to the About Page!</h1>
      <ul>
        <li>React</li>
      </ul>
      <Route path={`${path}/good`}>
        <Good />
      </Route>
    </>
  );
};

export default About;
~~~

### Prompt组件

可以将路由Route统一放在一个Switch中，一个Switch中只会有一个路由显示

~~~js
// App.js
import { Route, Switch } from "react-router-dom";

<Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about">
          <About />
        </Route>
        <Route path="/form">
          <MyForm />
        </Route>
      </Switch>
~~~

当你使用到表单时，如果你没有写完表单内容跳转到其他页面了，再返回的话，表单的内容就会重置，这样会很麻烦，使用Prompt组件，会在你离开页面之前弹窗提示

~~~js
import { Prompt } from "react-router-dom";

const MyForm = () => {
  return (
    <>
      <Prompt message={"你确定要走！"} />
      <h1>Welcome to the MyForm Page!</h1>
      <input type="text" />
    </>
  );
};

export default MyForm;
~~~

![react-basics35.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40cbff08fc504f02a68a43373e60ae9d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1243&h=470&s=318510&e=gif&f=62&b=fefdfd)

改进下：（就是防止误操作导致数据丢失）

~~~js
import { useState } from "react";
import { Prompt } from "react-router-dom";

export default MyForm;
~~~

![react-basics36.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aeb6420af3634bf5bde7fe7901e33528~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1243&h=470&s=304601&e=gif&f=92&b=fefdfd)

### Redirect组件 重定向

在About组件中使用Redirect组件重定向到form中

~~~js
// components/About/index.js
import { Route, useRouteMatch, Redirect } from "react-router-dom";

{/* to 重定向到xxx
          from 从xxx 如 from={"/abc"} to={"/form"} 输入地址abc到form
           */}
        <Redirect from={"/abc"} to={"/form"} />
~~~

### Link 和 NavLink

~~~js
import { Link } from "react-router-dom";

// components/Menu/index.js
const Menu = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </div>
  );
};

export default Menu;
~~~

然后在App.js中导入并使用，当你点击两个链接时，它是不会向服务器重新发送请求的。但当你把 `Link` 换成 `a` 的话，那就不行了，`a` 会重新向服务器发送请求，不能这样干。

- `NavLink` 的功能会比 Link 更加丰富：它主要会涉及到样式

~~~css
/* components/Menu/index.module.css */
a:link,
a:visited {
  color: orange;
  text-decoration: none;
}

a:hover,
a.active {
  color: hotpink;
  text-decoration: underline;
}
~~~

~~~js
// components/Menu/index.js
import { NavLink } from "react-router-dom";
import classes from "./index.module.css";

const Menu = () => {
  return (
    <div>
      <ul>
        <li>
          {/* exact 严格匹配
              activeClassName 激活的样式（或activeStyle={{}}） */}
          <NavLink exact activeClassName={classes.active} to="/">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink exact activeClassName={classes.active} to="/about">
            About
          </NavLink>
        </li>
      </ul>
    </div>
  );
};

export default Menu;
~~~

看，不管你咋跳转，它都不会发请求，当你跳转到对应页面时，它就会显示对应路径的链接粉色加下划线。

### 两种 Router

- HashRouter 会通过url地址中的hash值来对地址进行匹配（就是根路径后多个 `#` 号）

- BrowserRouter 直接通过url地址进行组件的跳转，（不带 `#` 号）

当通过点击NavLink构建的链接进行跳转时，跳转并没经过服务器，这没问题

但当刷新页面时或通过普通链接跳转时，会向服务器发送请求加载数据，这时的请求并没有经过react router，所以返回404

- 解决方案：

- 使用HashRouter 重新构建并粘贴。服务器是不会处理带hash值的地址，所以使用HashRouter后请求将有react route处理

- 修改服务器的配置，将所有请求都转发到index.html。找到nginx下的conf目录，打开nginx.conf，找到对应字段并进行如下修改： `try_files $uri /index.html;` 意思就是不管你访问啥url地址，最后都给俺转发到index.html里

![Snipaste_2024-02-01_11-17-40.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/626300f5135f4cbd9f4692eb34409f17~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=682&h=223&s=23721&e=png&b=011626)

重新加载一下服务器 `.\nginx.exe -s reload` 。可能会打印错误，俺没用过nginx就用了比较死板的法子，打开任务管理器，停止nginx服务。然后再点击nginx.exe文件重启服务就行了。

nginx服务器：[nginx news](https://nginx.org/)

下载后，解压，点击 `nginx.exe` 即可启动服务器，访问 `127.0.0.1`

![Snipaste_2024-02-01_10-29-37.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/009d7a193687495b9511c77f190b55cc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1267&h=378&s=30365&e=png&b=ffffff)

项目打包后，将其目录下所有文件粘贴到nginx下的html目录里。

要想停止服务的话，在nginx安装目录下打开终端：

![Snipaste_2024-02-01_10-38-04.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10aedd81960e4f6998a26b8dd8e98872~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=483&h=198&s=13718&e=png&b=0c0c0c)

![react-basics23.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36f58c5e30014d129bba5bcaef39430f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1027&h=520&s=103909&e=gif&f=45&b=fefefe)

## ReactRouter6

之前讲的ReactRouter都是5的知识点，ReactRouter6相对于5来讲改动还是很大的，把很多东西都化繁为简了，体积相对于之前的版本也小了很多比如 Switch，history，match等在6中都没有了，被其他东西替代了

~~~cmd
npm i react-router-dom
~~~

~~~js
import { Route, Routes } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Menu from "./components/Menu";

const App = () => {
  return (
    <div className="App">
      <h1>Hello React!</h1>
      <Menu />
      {/* Routes v6中的新组件 作用和Switch类似，都是用于Route的容器
            v6中 component render children 都没了，需要通过element来挂载组件
            并且那个 / 还可省略
      */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;
~~~

- 可以通过useParams() 来获取参数：

~~~js
import { useParams } from "react-router-dom";

const STU_DATA = [
  {
    id: 1,
    title: "React"
  },
  {
    id: 2,
    title: "Zustand"
  },
  {
    id: 3,
    title: "Router"
  },
  {
    id: 4,
    title: "Webpack"
  }
];

export default Student;

// App.js
<Route path="student/:id" element={<Student />} />
~~~

- useLocation() 还在：获取当前地址的信息

~~~js
const location = useLocation();
  console.log(location);
~~~

- useMatch() 检查当前url是否匹配某个路由

~~~js
const match = useMatch("/about");
  console.log(match);
~~~

如果路由匹配，则返回个对象，不匹配返回null

- useNavigate() 获取一个用于页面跳转的函数：

~~~js
const navigate = useNavigate();
  const clickHandler = () => {
    // navigate("/student/1"); // 使用push 会产生历史记录 可回退
    navigate("/student/1", { replace: true }); // 使用replace 不会产生历史记录 不可回退
  };
~~~

### v6中的嵌套路由

- 通过子路由来对Good进行映射 /about/good：

~~~js
// App.js
<Route path="about/*" element={<About />} />

// components/About/index.js
<Routes>
        <Route path="good" element={<Good />} />
      </Routes>
~~~

v6中是默认严格匹配的，在后面加上 ***** 后就可不按照严格匹配来了。

**注意了：** 你看这，App.js中有路由，About组件中又有路由，要是每个组件都设置路由的话，那是不是非常不便于管理和维护。想要的是所有的路由可以统一写在一个位置，你可以这样：

~~~js
// App.js
<Route path="about" element={<About />}>
          {/* 嵌套路由 */}
          <Route path="good" element={<Good />} />
        </Route>
~~~

嵌套路由也用了，但当你访问 `/about/good` 时并没有出现Good组件的页面，此时你还需要一步，在About组件中使用Outlet组件，它用来表示嵌套路由中的组件，当嵌套路由中的路径匹配成功，Outlet则表示嵌套路由中的组件，反之啥也不显示

~~~js
import { Outlet } from "react-router-dom";

// components/About/index.js
const About = () => {
  return (
    <>
      <h1>Welcome to the About Page!</h1>
      <ul>
        <li>React</li>
      </ul>
      <Outlet />
    </>
  );
};
~~~

### Navigate组件 路由跳转

Navigate 组件用来跳转到指定的位置，默认使用push跳转，回退不了，要想回退的话，加个 replace

~~~js
<Navigate to={"/student/3"} replace />
~~~

### NavLink组件

改了一种方式去设置样式：

~~~js
<NavLink
            style={({ isActive }) => {
              return isActive ? { color: "black" } : null;
            }}
            to="/student/2"
          >
            Student
          </NavLink>
~~~

## ReactRouter 工程化

~~~js
// index.js
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

// 创建router实例对象并配置路由对应关系
const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/about",
    element: <About />
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // 路由绑定
  <RouterProvider router={router} />
);
~~~

### 抽离路由模块

工程化即模块化，router示例写在index.js中的话就不符合了。能不能创建个单独的模块，将router相关的放到其中，可以抽离路由模块。

- 在src下创建 `pages` : 用于放页面的；并在src下兴建 `router` ，专门用来放路由相关的

![Snipaste_2024-02-03_18-24-26.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57f2133d1c9c48489a59bae1b20fa8b8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=407&h=306&s=16785&e=png&b=02192b)

~~~js
// router/index.js
import { createBrowserRouter } from "react-router-dom";
import About from "../pages/About";
import Home from "../pages/Home";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/about",
    element: <About />
  }
]);

export default router;
~~~

接着再导入到index.js中并使用

~~~js
import router from "./router";
~~~

### 路由导航

1. 前面讲的Link、NavLink、useNavigate() 都可用于路由跳转，要说区别的话

-   声明式导航：`Link、NavLink` （会被转义为a链接）
-   编程式导航：`useNavigate()` 通过该钩子函数使用导航

2. 通过 `useSearchParams()` 也可以实现路由传参

~~~js
// Home/index.js
<button onClick={() => navigate("/about?id=1&name=jack")}>
        跳转传参
      </button>

// About/index.js
const About = () => {
  const [params] = useSearchParams();
  const id = params.get("id");
  return (
    <>
      <h1>我是关于页！{id}</h1>
    </>
  );
};
~~~

### 路由嵌套

- 通过 `children` 配置子路由：

~~~js
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/home",
        element: <Home />
      },
      {
        path: "/about",
        element: <About />
      }
    ]
  }
]);
~~~

- 在Layout组件中添加二级路由出口：**<Outlet />**

~~~js
const Layout = () => {
  return (
    <>
      <h1>我是布局！</h1>
      <ul>
        <li>
          <Link to={"home"}>Home</Link>
        </li>
        <li>
          <Link to={"about"}>About</Link>
        </li>
      </ul>
      {/* 二级路由出口 */}
      <Outlet />
    </>
  );
};
~~~

- 如何在显示Layout组件的同时，显示Home组件，默认二级路由就是将 `path: "/home"` 换成 `index: true`
- 当路由找不到时，用404路由兜底

~~~js
{
    path: "*",
    element: <NotFound />
  }
~~~

- 要想将路由模式换成hash模式直接将 `createBrowserRouter` 换为 `createHashRouter`

## 样式相关

**补充：** 好像之前也没有说到样式相关的内容，那就在这里补充一下吧。希望不会太晚😅

### 内联样式和样式表

- 通过在标签内直接使用 `style={{}}` ：

~~~js
// components/Home/index.js
const Home = () => {
  return (
    <div>
      <h1
        style={{
          color: "red",
          backgroundColor: "#bfc",
          border: "blue solid 2px"
        }}
      >
        Welcome to the Home Page!
      </h1>
    </div>
  );
};

export default Home;
~~~

- 当内联样式多的话，可以把它提出来：

~~~js
// components/Home/index.js
const Home = () => {
  const h1Style = {
    color: "red",
    backgroundColor: "#bfc",
    border: "blue solid 2px"
  };
  return (
    <div>
      <h1 style={h1Style}>Welcome to the Home Page!</h1>
    </div>
  );
};

export default Home;
~~~

- 动态设置样式：需要借助 `useState`

~~~js
// components/Home/index.js
import { useState } from "react";

export default Home;
~~~

内联样式肯定不适合大项目。

- 样式表的话：

~~~css
/* components/Home/index.css */
.title {
  color: red;
  background-color: #bfc;
  border: blue solid 2px;
}

.title1 {
  border: black solid 2px;
}
~~~

~~~js
// components/Home/index.js
import { useState } from "react";
import "./index.css";

const Home = () => {
  const [blackBorder, setBlackBorder] = useState(true);

return (
    <div>
      <h1 className={`title ${blackBorder ? "" : "title1"}`}>
        Welcome to the Home Page!
      </h1>
      <button onClick={() => setBlackBorder(!blackBorder)}>有种戳我呀</button>
    </div>
  );
};

export default Home;
~~~

它也不适合，有缺点，`import "./index.css";` 这样如果是在App.js中引入那就是全局引入，如果再在 `src/index.js` 下引入的话那就会形成样式冲突（类名重复的话），不适合大范围的使用，这种方式适合引入一些通用样式。

### CSS Module

> 模块化CSS，适合大范围的使用（一种自动写类名的方式）。
>
> **使用步骤：** 
>
> 1. 创建css文件时，以 `xxx.module.css` 命名，说明你创建的时一个css模块
> 2. 在组件中引入css，`import classes from "./index.module.css";`
> 3. 通过 `classes` 来设置类，`className={classes.title}`。CSS模块可以动态的设置唯一的class值（类名都是自动生成的，就是确保唯一性）

~~~css
/* components/Home/index.module.css */
.title {
  color: red;
  background-color: #bfc;
  border: blue solid 2px;
}

.title1 {
  border: black solid 2px;
}
~~~

~~~js
// components/Home/index.js
import { useState } from "react";
import classes from "./index.module.css";

const Home = () => {
  const [blackBorder, setBlackBorder] = useState(true);

return (
    <>
      <h1 className={`${classes.title} ${blackBorder ? "" : classes.title1}`}>
        Welcome to the Home Page!
      </h1>
      <button onClick={() => setBlackBorder(!blackBorder)}>有种戳我呀</button>
    </>
  );
};

export default Home;
~~~

### Fragment

**拓展：** 在上图中，你可能会看到这个 `<></>` ,不知道你会不会对这玩意产生好奇，也不管你了，爱咋咋地，俺先简单说下这是个什么东西。

在react中，组件都必须有个跟容器，然后在跟标签里编写子标签。好，那俺在每个组件写个div父容器呗，但绝大多数都用不上这个div呀（就是个多鱼的结构）。但俺就是不想加那个div，俺就感觉难受。好，那俺有三种法子来解决：

1. 方法一：自定义个组件：组件直接引入父容器Out并使用就行了

~~~js
// src/Out.js
const Out = (porps) => {
  // 只会返回子元素
  return porps.children;
};

export default Out;
~~~

2. 方法二：使用 Fragment：它是由React提供的专门作为父容器的组件，它只会讲里面的子元素直接返回，不会创建任何多鱼的元素

~~~js
import { Fragment } from "react";

const Good = () => {
  return (
    <Fragment>
      <h1>Welcome to the Good Page!</h1>
    </Fragment>
  );
};
~~~

3. 方法三：使用空标签 `<></>` ，它是react提供的语法糖

# 工程化

😁😁😁，总算是把React的常用知识点讲完了，接下来，俺将向工程化进发了

![不听也不看的小熊二_7_枳酒._来自小红书网页版.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7897a6473f2941e7987dd10d5f1bd56d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=884&h=863&s=142590&e=jpg&b=ca9961)

## 逗逗的钱包 —— doudou-wallet（记账本）

~~~powershell
npx create-react-app doudou-wallet
~~~

- 项目辅助依赖：

~~~powershell
npm i zustand react-router-dom dayjs classnames antd-mobile axios --save
~~~

移动端组件库：[Ant Design Mobile - Ant Design Mobile](https://mobile.ant.design/zh)

- 该留留该删删

### 路径解析

1. 路径解析配置（webpack），把 `@/` 解析为 `src/` ：借助 `craco` 插件，不建议暴露内置的webpack配置
2. 路径联想配置（vscode）输入 `@/` 时，自动联想出来对应的 `wrc/` 下的子级目录：`jsconfig.json`

> 那如何使用 `craco` 插件：
>
> - 安装 `craco` ：**npm i @craco/craco -D ** 
> - 根目录下创建配置文件 **craco.config.js** ，然后再里面添加需要的配置
> - `package.json` 中配置启动和打包命令

![Snipaste_2024-02-03_22-59-17.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3ad6afe42824ebaaf15e5c3a37cf0d8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=757&h=432&s=38099&e=png&b=011727)

![Snipaste_2024-02-03_22-55-06.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d84e91f6a484db0933ef4d5746b1b3d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=629&h=243&s=22728&e=png&b=021727)

启动成功后，试下使用@后会不会报错。

有点纳闷，俺配置了路径联想配置，怕配置没生效，俺还关了vscode再打开重启项目，结果没想到，居然不行。算了，不纠结了，等会重置下电脑看看

![熊二：俺小时候可是整个狗熊岭最可爱的狗熊_8_阿语在努力_来自小红书网页版.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74f07786d73943a3bf9e568ae89125fb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1062&h=946&s=107377&e=jpg&b=8c6640)

配置的话就这样：

![Snipaste_2024-02-03_23-14-23.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0330a795424141b09050574e7aec3d51~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=502&h=481&s=23933&e=png&b=021728)

### Mock数据 json-server

在开发项目时，前后端一般都是同时进行的。当你需要用到数据时发现，后端没写好，就是不给你，此时你的心情

![熊二生气也超可爱🐻_1_SH._来自小红书网页版.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4467fcd09454b7b9265a094b0d91f45~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1000&h=1000&s=125965&e=jpg&b=896a46)

这个时候，你就知道Mock数据的好了😁

~~~cmd
npm i json-server -D
~~~

- 准备个json文件：在根目录创建个 `server/data.json`

- 添加启动命令：

~~~json
"server": "json-server --watch server/data.json --port 3001"
~~~

完事启动命令瞅瞅能不能运行成功。

# 工程化启动

😁😁😁，总算是把React的常用知识点讲完了，接下来，俺将向工程化进发了

俺就搭一个建议的后台管理系统的模板吧，通过模板，了解项目工程化的构建。

~~~cmd
npx create-react-app guten-admin
~~~

该删删，该改改。

## AntD

~~~cmd
npm install antd --save
~~~

AntD官网：[Ant Design - 一套企业级 UI 设计语言和 React 组件库 (antgroup.com)](https://ant-design.antgroup.com/index-cn);

## craco

官网：[Configure CRA without ejecting. | CRACO](https://craco.js.org/);

使用CRA创建的项目，若你想修改编译配置，你先别想着运行 `npm run eject` 暴露webpack配置，不建议哈，这玩意它不可逆呀，你咋晓得你改的就没毛病来。对于新手，你可以看看它 **craco** ，通过它可以覆盖 react-script 中的相关配置。

1. 安装：

~~~cmd
npm i @craco/craco -D
~~~

2. 项目根目录创建：`craco.config.js` (先来个路径解析配置，把 `@/` 解析为 `src/`)

~~~js
// craco.config.js
const path = require("path");
module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  }
};
~~~

3. 修改 package.json 的 scripts 命令

![Snipaste_2024-02-03_22-55-06.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d84e91f6a484db0933ef4d5746b1b3d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=629&h=243&s=22728&e=png&b=021727)

启动成功后，试下使用@后会不会报错。

有点纳闷，俺配置了路径联想配置，怕配置没生效，俺还关了vscode再打开重启项目，结果没想到，居然不行。算了，不纠结了，等会重置下电脑看看

配置的话就这样：

![Snipaste_2024-02-03_23-14-23.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0330a795424141b09050574e7aec3d51~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=502&h=481&s=23933&e=png&b=021728)

1. 打包时，实时显示进度条：

~~~cmd
# 安装依赖
npm install webpackbar -D
~~~

~~~js
// craco.config.js
const path = require("path");
const WebpackBar = require("webpackbar");

module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src")
    },
    plugins: [new WebpackBar()]
  }
};
~~~

~~~cmd
# 打包
npm run build
~~~

![Snipaste_2024-02-05_17-47-05.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b34138bbdf2746889224cb576b4b86bb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=836&h=546&s=47024&e=png&b=011727)

2. 打包时实时显示`loader`和`plugin`的耗时情况：

~~~cmd
npm install --save-dev speed-measure-webpack-plugin
~~~

module.exports = {
  webpack: smp.wrap({
    alias: {
      "@": path.resolve(__dirname, "src")
    },
    plugins: [new WebpackBar()]
  })
};
~~~

![Snipaste_2024-02-05_17-55-07.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecfbc68323b2453fa3cf7a739fb7862e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=487&h=534&s=37394&e=png&b=011727)

3. 打包时，可将打包的模块内容可视化，以便分析项目结构：

~~~cmd
npm install --save-dev webpack-bundle-analyzer
~~~

~~~js
// craco.config.js
const path = require("path");
const WebpackBar = require("webpackbar");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  webpack: smp.wrap({
    alias: {
      "@": path.resolve(__dirname, "src")
    },
    plugins: [new WebpackBar(), new BundleAnalyzerPlugin()]
  })
};
~~~

默认访问 `http://127.0.0.1:8888/` 查看结果

![Snipaste_2024-02-05_18-05-12.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2abc5ebf2af74c979f962f3199476762~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=994&s=114966&e=png&b=75ddda)

以上三个，一般在本地开发时，是用不上的，还延长了打包效率，只有当项目开发完后，大概率都会用上。项目开发完，它只是具备了能正常跑的能力，距离上线还远远不够，需要对项目进行层层优化。

### 环境区分

@craco/craco 提供了 `whenDev、whenProd、whenTest、when` 函数，用于区别不同的环境，其中：

-  `whenDev、whenProd、whenTest` 分别对应的是 `process.env.NODE_ENV` 的 3 种值（`development`、`production`、`test`），需要接收两个参数

- 而 `when` 是区分环境的万金油函数，需要接收 3 个参数

### 拓展配置

> 要想拓展 webpack 配置的话，可以在configure 函数中编写，它可以扩展所有的 webpack 配置。

可修改下模块内容可视化的配置：其中的配置可看：[GitHub - webpack-contrib/webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)

~~~js
// craco.config.js
const { whenDev, whenProd, when } = require("@craco/craco");
const path = require("path");
const WebpackBar = require("webpackbar");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  reactScriptsVersion: "react-scripts",
  webpack: smp.wrap({
    configure: (webpackConfig, { env, paths }) => {
      if (env !== "development") {
        webpackConfig.plugins = webpackConfig.plugins.concat(
          new BundleAnalyzerPlugin({
            analyzerMode: "server",
            analyzerHost: "127.0.0.1",
            analyzerPort: 8888,
            openAnalyzer: true, // 构建完打开浏览器
            reportFilename: path.resolve(__dirname, `analyzer/index.html`)
          })
        );
      }
      return webpackConfig;
    },
    alias: {
      "@": path.resolve(__dirname, "src")
    },
    plugins: [new WebpackBar()]
  })
};
~~~

当然还有很多其他的配置，可以看官网或者这篇文章 [基于craco配置的react项目的webpack构建优化 - 掘金 (juejin.cn)](https://juejin.cn/post/7154351787246354462) （还行，讲的挺全的）

## 目录结构

# 中后台工程启动

😁😁😁，总算是把React的常用知识点讲完了，接下来，俺将向工程化进发了

俺就搭一个建议的后台管理系统的模板吧，通过模板，了解项目工程化的构建。

## 技术栈

- 框架：[React](https://react.dev/);
- 构建和打包工具：[Vite](https://cn.vitejs.dev/);
- 状态管理：[Zustand](https://zustand-demo.pmnd.rs/);
- 组件库：[Ant Design](https://ant-design.antgroup.com/index-cn);
- 路由：[React Router](https://reactrouter.com/en/main);
- 包管理工具：[pnpm](https://pnpm.io/zh/);
- 脚本：[TypeScript](https://www.typescriptlang.org/zh/);
- 样式：**SASS**;

## 项目初始化

- 安装：

~~~cmd
pnpm create vite guten-admin --template
~~~

- css配置：

~~~cmd
pnpm i sass -D
pnpm i sass-loader -D # scss解析器
~~~

~~~ts
// vite.config.ts
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/global.scss";`
      }
    }
  }
})
~~~

- 配置文件引入：使用 **@**

~~~cmd
pnpm i @types/node -D
~~~

~~~js
// vite.config.ts
import { fileURLToPath, URL } from "node:url";

export default defineConfig({
  plugins: [],
  css: {},
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})
~~~

在 `tsconfig.json` 添加如下代码：vscode提示路径

![Snipaste_2024-02-06_14-23-27.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6be50222912045ec9511b443e54f53fd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=561&h=340&s=30862&e=png&b=021728)

有点纳闷，俺配置了路径联想配置，怕配置没生效，俺还关了vscode再打开重启项目，结果没想到，居然不行。算了，不纠结了，等会重置下电脑看看😂

## 工程目录

- 初始时项目目录

- 工程化后目录

~~~diff

~~~

## Mock数据

在开发项目时，前后端一般都是同时进行的。当你需要用到数据时发现，后端没写好，就是不给你，此时你的心情

这个时候，你就知道Mock数据的好了😁

~~~cmd
pnpm i json-server -D
~~~

- 准备个json文件：在根目录创建个 `server/data.json`

- 添加启动命令：

~~~json
"serve": "json-server --watch server/data.json --port 3001"
~~~

完事启动命令瞅瞅能不能运行成功。

## 反向代理

~~~ts
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [],
  css: {},
  resolve: {},
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
~~~

## AntD

AntD官网：[Ant Design - 一套企业级 UI 设计语言和 React 组件库 (antgroup.com)](https://ant-design.antgroup.com/index-cn);

~~~cmd
pnpm install antd
pnpm install @ant-design/icons
~~~

## 代码规范

为了在团队开发中避免一些不必要的操作

### editorconfig

- 下载拓展：

![Snipaste_2024-02-11_14-41-22.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b2a6669be484c35b6030a88a4320510~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=832&h=198&s=37446&e=png&b=011727)

- 在跟目录下新建 `.editorconfig` :

~~~diff
# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
~~~

### ESLint

~~~cmd
pnpm install eslint eslint-config-mature eslint-plugin-import -D
~~~

`eslint` 用于检查代码质量。进入 `.eslintrc.cjs` 文件，按自身需求添加[配置](https://link.juejin.cn/?target=https%3A%2F%2Fzh-hans.eslint.org%2Fdocs%2Flatest%2Fuse%2Fconfigure%2Frules)。

~~~js
module.exports = {
  // 指定代码的运行环境
  env: {
    es2020: true,
    node: true,
    browser: true,
  },
  settings: {
    // 自动检测React的版本，从而进行规范代码
    react: {
      pragma: 'React',
      version: 'detect',
    },
  },
  extends: [
    // ESLint
    'eslint:recommended',
    // Typescript
    'plugin:@typescript-eslint/recommended'
  ],
  parser: '@typescript-eslint/parser', // 解析 TypeScript 代码
  parserOptions: {
    parser: '@babel/eslint-parser', // 指定 eslint 可以解析 JSX 语法。
    sourceType: 'module',
    ecmaVersion: 'latest',
    ecmaFeatures: {
      jsx: true
    },
  },
  plugins: ['react-refresh', '@typescript-eslint'],
  rules: {
    'semi': "off", // 不强制在语句末尾使用分号
    'arrow-body-style': 'off', // 不强制在箭头函数体周围使用大括号
    'no-console': 'off', // 允许使用 console 语句
    'no-undef': 'off', // 允许使用未声明的变量
    'no-shadow': 'off', // 允许变量覆盖声明
    'react/jsx-uses-react': 'off', // 无须在组件中显式 import React
    'react/react-in-jsx-scope': 'off', // 确保已经正确引入了 React 库
    "@typescript-eslint/no-explicit-any": ["off"], // 允许使用 any 类型
  },
};
~~~

~~~js
module.exports = {
  root: true,
  env: { browser: true, es2023: true },
  extends: [
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'eslint-config-mature/prettier', // 主要用于格式化模板，优先级应更低
    'eslint-config-mature',
    'eslint-config-mature/ts',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: "latest",
    ecmaFeatures: {
      "jsx": true
    },
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
  plugins: ['react', 'react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
~~~

然后，在根目录下新建 `.eslintignore` 文件，告诉 `eslint` 在进行规则校验时要跳过的文件和目录。

~~~diff
.idea
.vscode 
node_modules

/build 
/public 
/docs 
/bin

*.sh
*.md 
*.woff 
*.ttf 
.husky 
.local

*.d.ts
~~~

### prettier

`prettier` 专注于代码格式化，对代码不做质量检查。首先，在项目中安装 `prettier`：

~~~cmd
pnpm i prettier -D
~~~

创建 `.prettierrc.cjs` 配置文件，按自身需求添加[配置](https://link.juejin.cn/?target=https%3A%2F%2Fwww.prettier.cn%2Fdocs%2Foptions.html)。以下是我自己使用的部分配置：

~~~js
module.exports = {
  printWidth: 100, // 单行长度
  tabWidth: 2, // 缩进长度
  useTabs: false, // 使用空格代替tab缩进
  semi: false, // 句末使用分号
  singleQuote: true, // 使用单引号
  quoteProps: 'as-needed', // 仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', // 多行时尽可能打印尾随逗号
  bracketSpacing: true, // 在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, // 多属性html标签的‘>’折行放置
  arrowParens: 'always', // 箭头函数单参数时包裹圆括号
  requirePragma: false, // 无需顶部注释即可格式化
  insertPragma: false, // 在已被preitter格式化的文件顶部加上标注
  htmlWhitespaceSensitivity: 'ignore', // 对HTML全局空白不敏感
  endOfLine: 'auto', // 不检查结束行形式
  embeddedLanguageFormatting: 'auto', // 对引用代码进行格式化
};
~~~

接下来，新建 `.prettierignore` 文件，告诉 `prettier` 在代码格式化时要跳过的文件和目录。

~~~diff
# Ignore artifacts:
build
coverage
server
public

# Ignore all HTML files:
*.html
~~~

## 初始化样式

~~~cmd
pnpm install reset-css
~~~

~~~tsx
// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
// 初始化样式
import 'reset-css'
// 全局样式
import '@/styles/global.scss'
import App from '@/App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
~~~

~~~scss
// styles/global.scss
body {
  background-color: $--gd-global-color;
  box-sizing: border-box;
  // 禁止文字选中
  user-select: none;
}

img {
  // 禁止拖动图片
  --webkit-user-drag: none;
}
~~~

## 路由

~~~cmd
pnpm install react-router-dom
~~~

## 打包

- 如果在文件中指定了 `minify: terser`，需要安装 `terser` 插件

~~~cmd
pnpm i terser -D
~~~

~~~ts
import { defineConfig } from 'vite';
import * as path from 'path';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  publicDir: 'public',
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') }, // 配置路径别名
    ],
  },
  build: {
    target: 'modules', // 浏览器兼容目标
    outDir: 'dist', // 打包输出路径
    assetsDir: 'assets', // 静态资源存放路径
    cssCodeSplit: true, // 允许 css 代码拆分
    sourcemap: false, // 不生成 sourceMap 文件
    minify: 'terser', // 缩小文件体积
    terserOptions: {
      compress: {
        drop_console: true, // 取消 console
        drop_debugger: true, // 取消 debugger
      },
    },
  },
  server: {
    host: 'localhost', // 指定监听的IP地址
    port: 3333, // 指定服务器端口
    open: true, // 开发服务器启动时，自动在浏览器打开
    strictPort: false, // 若端口已被占用，就尝试下一个可用端口
    https: false, // 不开启 https 服务
    cors: true, // 允许跨域
    // 配置代理
    proxy: {
      '/api': {
        target: 'http://127.0.0.1: 8000', // 接口地址
        changeOrigin: true, // 接口跨域
        secure: false, // 启用 https 服务时需要配置
      },
    },
  },
  plugins: [react()],
});
~~~

Hello World

学习React

我是一个React的组件！

我是一个React的组件！

我是一个React的组件！

我是一个类组件

学习React

{props.desc}

{counter}

{counter}

{counter}--{user.name}--{user.age}

....

我是标题{count}

{this.state.count}---{this.state.text}

{this.state.obj.name}---{this.state.obj.age}

Hello CodeSandbox