一、react的组件
react的核心是组件，react有两种组件类：有状态组件（class）和无状态组件（function）。
有状态组件（class）常常使代码变的冗余而复杂，例如下面一个简单的button组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import React, { Component } from "react";
export default class Button extends Component {
constructor() {
super();
this.state = { buttonText: "Click me, please" };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(() => {
return { buttonText: "Thanks, been clicked!" };
});
}
render() {
const { buttonText } = this.state;
return <button onClick={this.handleClick}>{buttonText}button>;
}
}
|
可以看出代码已经很重了。
Redux 的作者 Dan Abramov 总结了组件类的几个缺点。
- 大型组件很难拆分和重构，也很难测试。
- 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
- 组件类引入了复杂的编程模式，比如 render props 和高阶组件。
因此，组件的最佳实现方式应该是函数，而不是类。
二、react hooks——加强版函数组件
Hook 这个单词的意思是”钩子”。
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。 React Hooks 就是那些钩子。
所有的钩子默认使用use前缀命名。
比如以下几个常见的钩子：
- useState()
- useContext()
- useReducer()
- useEffect()
- useCallback()
三、状态钩子useState()
useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。
经过状态钩子改造后的button代码：
1
2
3
4
5
6
7
8
9
10
11
| import React, { useState } from "react";
export default function Button() {
const [buttonText, setButtonText] = useState("Click me, please");
function handleClick() {
return setButtonText("Thanks, been clicked!");
}
return <button onClick={handleClick}>{buttonText}button>;
}
|
再看一个例子，钩前组件代码（有状态）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} timesp>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
button>
div>
);
}
}
|
加钩子后的代码（无状态）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} timesp>
<button onClick={() => setCount(count + 1)}>
Click me
button>
div>
);
}
|
useState()这个函数接受状态的初始值，作为参数。该函数返回一个数组，数组的第一个成员是一个变量，指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名。
四、共享状态钩子useContext()
现在有两个组件 Navbar 和 Messages，我们希望它们之间共享状态。
1
2
3
4
| <div className="App">
<Navbar/>
<Messages/>
div>
|
第一步就是使用 React Context API，在组件外部建立一个 Context。并封装它：
1
2
3
4
5
6
7
8
9
| const AppContext = React.createContext({});
<AppContext.Provider value={{
username: 'superawesome'
}}>
<div className="App">
<Navbar />
<Messages />
div>
AppContext.Provider>
|
上面代码中，AppContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。
Navbar 组件的代码如下：
1
2
3
4
5
6
7
8
9
| const Navbar = () => {
const { username } = useContext(AppContext);
return (
<div className="navbar">
<p>AwesomeSitep>
<p>{username}p>
div>
);
}
|
还有许多hooks的示例用法可以参考官网。根据已有的hooks，还可以组合封装，创建出新的hooks来使用。
参考文献：
- React Hooks 入门教程
- React Hooks
