React之 React Hooks 阅读笔记

参考文档

添加hooks动机

• 在组件之间复用状态逻辑很难
• 复杂组件变得难以理解
• 难以理解的class

Hook是什么 ？

• Hook 是一个特殊的函数，它可以让你 “Hook” React 的特性。例如： useState 是允许你在React 函数组件中添加 state 的 Hook，另外它们的名字通常是以 use 开始

什么时候我会用 Hook ？

• 如果你在编写函数组件并意识到需要向其添加一些 state， 以前的做法是必须将其转化为 class。 现在你可以在现有的函数组件中使用 Hook。

Hook 使用规则：

Hook 就是JavaScript函数，但是使用它们会有两个额外的规则

• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用
• 只能在React的函数组件中调用Hook。不要在其它JavaScript函数中调用。（还有一个地方可以调用Hook — 就是自定义的Hook中）

常用的Hook：

• useState
• useContext：不使用组件嵌套可以订阅React的Context
• useReducer： 可以通过reducer来管理组件本地的复杂state

class  Example extends React.Component {
	constructor(props) {
		super(props);
		this.state = { 
			count: 0
		};
	}
}

import React, { useState } from ‘react’;

function Example() {
  // 声明一个叫”count” 的 state 变量
const [count, setCount ] = useState(0);
}

说明：

• 调用 useState 方法时做了什么 ？ 定义了一个带state的变量 count，功能与class里面的this.state 提供的完全相同。一般来说，在函数退出后变量就会“消失”。而state中的变量会被React保留
• useState需要哪些参数？useState()方法里面唯一的参数是初始state。不同于class的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。如果state中要存储多个变量，只需要调用useState()多次即可。
• useState方法的返回值是什么？ 返回值为：当前state以及更新state的函数。

读取 State

• 在class中： <p>You clicked {this.state.count} times</p>
• 在函数中： <p>You clicked {count} times</p>

更新 State

• 在class中： <button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button>
• 在函数中： <button onClick={() => setCount(count + 1)}>Click me</button>