React学习笔记

React 学习笔记

初始化

创建项目

1
npx create-react-app <项目名称>

使用 sass

1
npm i -save-dev sass

**注意：**使用 less 需要进行额外的配置

路由 React-router

安装

1
npm i react-router-dom

**注意：**不要遗忘-dom

二级路由设置默认渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const routes = createBrowserRouter([
	{
		path: "/",
		element: <App />,
		children: [
			{
				path: "/", // 这里将根路径 '/' 设置为要默认渲染的子路由
				element: <MainComponent />,
			},
			{
				path: "/learning1",
				element: <Learnig1 />,
			},
		],
	},
	{
		path: "*",
		element: <NotFound />,
	},
]);

集中状态管理

Zustand

安装

1
npm i zustand

使用

定义一个 store：src/store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import { create } from "zustand";

const useStore = create((set) => ({
	bears: 0,
	increase: () =>
		set((state) => ({
			bears: state.bears + 1,
		})),
	reset: () => set({ bears: 0 }),
	decrease: () => set((state) => ({ bears: state.bears - 1 })),
}));

export default useStore;

在组件中使用App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import useStore from "@/store";

export default function App() {
	// 获取bears值
	const bears = useStore((state) => state.bears);
	// 获取整个store
	const defaultStore = useStore();
	// 解构
	const { bears, increase, decrease } = useStore();

	return (
		<div>
			<small onClick={increase}>Bears值为：{bears}</small>
		</div>
	);
}

Redux

安装

1
npm i @reduxjs/toolkit react-redux