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
js

动态执行js的方法

在网页中动态执行 JavaScript 代码片段有多种方法，以下是几种常见的方法：

1. 使用 eval 函数

eval 函数可以将字符串作为代码执行。但是，eval 存在安全风险，因为它可以执行任意的 JavaScript 代码，可能会导致安全问题。

1
eval('console.log("Hello, World!");');

2. 使用 new Function 构造函数

new Function 构造函数可以创建一个新的函数，并将字符串作为代码执行。这种方法比 eval 更安全，因为它不会直接执行字符串，而是创建一个新的函数。

1
2
const code = 'console.log("Hello, World!");';
new Function(code)();

3. 使用 <script> 标签

你可以使用 <script> 标签来动态加载和执行 JavaScript 文件或代码片段。这种方法是最常用的，因为它简单且安全。

1
2
3
<script>
  console.log('Hello, World!');
</script>

4. 使用 appendChild 方法

你可以使用 appendChild 方法将 <script> 标签添加到 DOM 中，从而动态执行 JavaScript 代码。

1
2
3
const script = document.createElement('script');
script.textContent = 'console.log("Hello, World!");';
document.body.appendChild(script);

5. 使用 importScripts 方法

如果你正在使用 Web Worker，可以使用 importScripts 方法来动态加载和执行 JavaScript 文件。

1
importScripts('path/to/your/script.js');

6. 使用 setTimeout 或 setInterval

你可以使用 setTimeout 或 setInterval 函数来延迟执行 JavaScript 代码。

1
2
3
setTimeout(function() {
  console.log('Hello, World!');
}, 1000);

7. 使用 requestAnimationFrame

requestAnimationFrame 方法会在浏览器下一次重绘之前执行指定的回调函数，可以用于动态执行 JavaScript 代码。

1
2
3
requestAnimationFrame(function() {
  console.log('Hello, World!');
});

8. 使用 MutationObserver

MutationObserver 可以监视 DOM 的变化，并在变化发生时执行指定的回调函数。

1
2
3
4
5
const observer = new MutationObserver(function() {
  console.log('Hello, World!');
});

observer.observe(document.body, { childList: true });

9. 使用 WebAssembly

WebAssembly 是一种新的二进制格式，可以在浏览器中运行高性能的代码。你可以将 JavaScript 代码编译为 WebAssembly，然后动态加载和执行。

1
2
3
4
fetch('path/to/your/module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => results.instance.exports.myFunction());

注意事项

  • 在使用 eval、new Function 和 setTimeout 等方法时，要确保代码的安全性，避免执行不可信的代码。
  • 动态执行 JavaScript 代码可能会影响网页的性能，因为浏览器需要解析和执行新的代码。
  • 在使用 <script> 标签、importScripts 和 WebAssembly 等方法时，要确保加载的 JavaScript 文件或 WebAssembly 模块是可信的，避免加载恶意代码。

以上是几种常见的动态执行 JavaScript 代码片段的方法，你可以根据具体的需求选择合适的方法。