一直对前端都比较感兴趣，虽然有在学，但是既不系统化，也没有产生什么实际的作用。然后，某一天，在 YTB 上看到大佬在一周内学会了 React 并开发出了一个博客项目，感慨颇深。
学习需要带着目标进行，目标完成就足够了。而不是像之前的我一样，对很多技术念念不忘，甚至还列出计划要去学习，但总是不了了之了。
所以，我也差不多花了一周左右的时间，重新学了一次 React，并写了一个小项目出来：iris-react。只是，初期的设计工作没做好，以及开发过程中，根本不会整样式，所以很简陋。。
#
简单介绍
本项目采用了 React+Redux+TypeScript+AntDesign 进行编写，可以在这里进行预览。
#
聊一聊
其实吧，我也不知道该说啥。
#
State 的初始化问题
果然，在用上 TS 之后，就会出现各种刁钻的问题。本来是想把 state 初始化为空对象，然后在 componentDidMount 钩子里进行更新的，但是编译器一直报错。
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
|
interface IState {
app: {
name: string;
},
list: Array<String>
}
// 定义state的初始值
const initState = {
app: {
name: "Home",
},
// 数组可以直接new出来
list: new Array<String>
} as IState;
class Home extends React.Component<{}, IState, {}> {
// 初始化为空对象会直接报错：空对象没有类型信息
// state = {};
state = initState;
render() {
// 由于初始化是空对象，获取不到具体的类型信息
const { app } = this.state;
// 通过这种语法，可以让编译器不提示错误
return (<div> {{ app?.name }} </div>);
}
}
|
#
常用的 Hooks
React 中比较常用的 HOOK 包括useState, useEffect, useSelector, useDispatch。
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
// 定义从全局State中取demo的SSelector
const demoSelect = (state: RootState) => state.demo;
// Functional Component
function Demo() {
// Declare a new state variable, which we'll call "count"
// const [count, setCount] = useState(0); // function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
// 定义本地state以及更新函数
const [fruta, setFruta] = useState("banana");
// 使用useSelector获取数据
const demo = useSelector(demoSelect);
const { count, fruit } = demo;
// 1. useEffect的第二个参数传递空数组：仅在组件mount的时候，调用 useEffect 函数。
// 2. useEffect的第二个参数传递需要参数：当前组件会监听参数，根据变化重新生成组件。
useEffect(() => {
const fetchDetail = async () => {
const result = await queryDetail(fruit);
setFruta(result.data.data);
};
fetchDetail();
}, [fruta]);
// 使用useDispatch获取dispatch对象, 直接触发action
const dispatch = useDispatch();
const setCount = () => {
dispatch({
type: constants.COUNT,
payload: {
count: count + 1,
},
});
};
const setFruit = (fruit: string) => {
dispatch({
type: constants.FRUIT,
payload: {
fruit,
},
});
};
// Similar to componentDidMount and componentDidUpdate:
// useEffect(() => {
// // Update the document title using the browser API
// document.title = `You clicked ${count} times`;
// });
return (
<div>
<p>You clicked {count} times</p>
<Button onClick={() => setCount()}>Click me</Button>
<div>
<p>今天该吃 {fruit} 了</p>
<div style={{ width: 360, margin: "auto" }}>
<Search
placeholder="吃什么呢"
enterButton="吃这个"
onChange={(e) => setFruta(e.target.value)}
onSearch={() => setFruit(fruta)}
/>
</div>
</div>
</div>
);
}
|
#
最后
总的来说，还是不太行，没有站在一个高度看待 React，或者说找准角度，很多概念理解起来十分笼统。写这个的时候，脑子里基本上是一团浆糊，找不出什么可以写的，也没有一个大致的思路。以己之昏昏，岂能使人昭昭。
不管怎么样，我的 React 学习之路就这样告一段落了，毕竟工作中也用不上。如果有机会用的话，希望下一次能达到一个新的高度。
#
参考链接
