React学习笔记
原创 于 2026-03-04 22:47:28 发布 · 粉丝可见 · 104 阅读 · 0 · 0 GEO检测 · 编辑
文章链接：https://blog.csdn.net/hacker_51/article/details/149236921
构建项目
1
| pnpm create vite@latest projectName
|
基础入门
什么是 TSX
概念：TSX是TypeScript和XML(HTML)的缩写，表示在ts代码中编写HTML模版结构,它是React中编写UI模版的方式
优势:
1.HTML的声明式模版写法
2.Ts的可编程能力
TSX的本质
TSX并不是标准的TS语法，它是TS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行。
在TSX中可以通过 大括号语法{} 识别TypeScript中的表达式，比如常见的变量、函数调用、方法调用等等。
使用引号传递字符串
使用TypeScript变量
函数调用和方法调用
使用TypeScript对象
注意：if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中。
事件
事件绑定
语法： on + 事件名称 = {事件处理函数} ，整体上遵循驼峰命名法。
获取事件对象参数
语法：在事件回调函数中 设置形参e。
传递自定义参数
语法：事件绑定的位置改造 成箭头函数的写法 ，在执行clickHandler实际处理业务函数的时候传递实参。
注意：不能直接写函数调用，这里事件绑定需要一个 函数引用
同时传递事件对象和自定义参数
语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应
组件
组件是什么
概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间 可以互相嵌套，也可以复用多次。
组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用。
React组件
在React中，一个组件就是 首字母大写的函数 ，内部存放了组件的逻辑和视图U，渲染组件只需要把组件 当成标签书写 即可。
定义自定义按钮组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const CustomButton = (
props: {
name?: string;
buttonName?: string;
}
) => {
const { buttonName,name } = props;
const handleClick = (name:string,e:React.MouseEvent<HTMLButtonElement>) => {
console.log(name,e);
alert('点击了 ' + name);
}
return (
<button onClick={(e) => handleClick((name ? name : 'Angindem'),e)}>
{buttonName ? buttonName : '按钮'}
</button>
);
}
export default CustomButton;
|
引用组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import CustomButton from './compoments/CustomButton';
const Study = () => {
return (
<div>
this is a study
<CustomButton
name="Acoisin"
buttonName="Angiendem-Button"
/>
</div>
);
}
export default Study;
|
useState 基础使用
useState 是一个 React Hook(函数)，它允许我们向组件添加一个 状态变量 ，从而控制影响组件的染结果。 （类似 Vue3 的ref ， 动态响应式变量声明）
本质：和普通 ts 变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化 (数据驱动视图)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import { useState } from 'react';
const Study = () => {
const [count, setCount] = useState(0);
const handleAdd = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleAdd}>
点击了 {count} 次
</button>
</div>
);
}
export default Study;
|
状态不可变
在React中，状态被认为是只读的，我们应该始终 替换它而不是修改它 ，直接修改状态不能引发视图更新。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
import { useState } from 'react';
const Study = () => {
const [count, setCount] = useState(0);
const handleAdd = () => {
count++;
};
const handleAdd2 = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleAdd}>
点击了 {count} 次
</button>
<button onClick={handleAdd2}>
查看次数 {count} 次
</button>
</div>
);
}
export default Study;
|
修改对象状态
规则：对于对象类型的状态变量，应该始终传给set方法一个 全新的对象 来进行修改。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
import { useState } from 'react';
const Study = () => {
const [form, setForm] = useState({
name: 'Angindem',
});
const handleChange = (obj:object) => {
setForm({
...form,
...obj
});
}
return (
<div>
<button onClick={() => handleChange({
name: 'Acoisin',
age: 18,
sex: '男'
})}>
修改
</button>
<div className='view'>
<textarea disabled value={JSON.stringify(form, null, 5)}
style={{
width: '100%',
height: '150px'
}}
></textarea>
</div>
</div>
);
}
export default Study;
|
组件样式处理
React组件基础的样式控制有俩种方式
scss样式
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.box {
width: 100px;
height: 100px;
background: red;
.box2 {
width: 50px;
height: 50px;
background: blue;
}
}
|
引用外部样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import style from './module/study.module.scss';
const Study = () => {
return (
<div className={style.box}>
<div className={style.box2}>
这是一个盒子
</div>
</div>
);
}
export default Study;
|
classnames优化类名控制
classnames是一个简单的JS库，可以非常方便的通过条件动态控制class类名的显示
示例：
现在的问题：字符串的拼接方式不够直观，也容易出错
安装：
使用后提高代码可读性
受控表单绑定
概念：使用React组件的状态(useState)控制表单的状态
React中获取DOM
在 React 组件中获取/操作 DOM，需要使用 useRef 钩子函数，分为两步：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import { useState, useRef } from 'react';
const Study = () => {
const [value, setValue] = useState<string>('');
const inputRef = useRef<HTMLInputElement>(null);
return (
<div>
<input type="text" ref={inputRef} value={value} onChange={(e) => setValue(e.target.value)} />
<button onClick={() => {
console.log(inputRef.current);
}}>提交</button>
</div>
);
}
export default Study;
|
