[JavaScript知识库]React Hook详解

Hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

什么是Hooks？

Hook是一些可以让你在函数组件例钩入React state及生命周期等特性的函数，Hooks不能在class组件中使用

Hook和函数组件

const Example = (props) => {
	// 你可以在这使用Hook
	return <div />;
}
// 或者是
function Example (props) {
	// 你可以在这使用Hook
	return <div />;
}

读取State

// 在class组件中
<p>You clicked {this.state.count} times<p>

// 在函数组件中，直接使用count
<p>You clicked {count} times</p>

更新State

// 在class中，需要调用this.setState()来更新值
<button
	onClick={() => this.setState({ count: this.state.count + 1})}
>
	Click me
</button>

// 在函数中，有setCount和count变量，所以不需要this
<button
	onClick={() => setCount(count + 1)}
>
	Click me
</button>

方括号

这中语法叫数组解构，意味着同时创建了count和setCount两个变量，count的值为useState返回的第一个值，setCount是返回的第二个值，它等价于下面的代码：

var countState = useState(0); // 返回一个有两个元素的数组
var count = countState[0]; // 数组里的第一个值
var setCount = countState[1]; // 数组里的第二个值

useState

语法

/*
	count 初始状态
	更新count状态的函数
*/
const [state, setState] = useState(initialState)

useState会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数，类似于class组件的this.setState，但是它不会把新的state和旧的state进行合并

// 例
import React, { useState } from 'react';

function Example () {
	// 声明一个新的叫做"count"的state变量
	const [count, setCount] = useState(0);
	
	return (
		<div>
			<p>You clicked {count} times</p>
			<button
				onClick={() => setCount(count + 1)}
			>Click me</button>
		</div>
	)
}

声明多个state变量

function Example () {
	// 声明多个state变量
	const [age, setAge] = useState(42);
	const [fruit, setFruit] = useState('banana');
	const [todos, setTodos] = useState([{ text: 'Learn Hooks'}]);
	// ...
}

惰性初始State

initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略，如果初始state需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的state，此函数只在初始渲染时被调用

const [state, setState] = useState(() => {
	const initialState = someExpensiveComputation(props);
	return initialState;
});

useEffect

// 例: 使用useEffect在函数组件中执行副作用操作
import React, { useState, useEffect } from 'react';

function Example () {
	const [count, setCount] = useState(0);
	
	useEffect(() => {
		document.title = `You clicked ${count} times`;	
	});
	
	return (
		<div>
			<p>You clicked {count} times</p>
			<button
				onClick={() => setCount(count + 1)}
			>
				Click me
			</button>
		</div>
	)
}

数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用，如果你熟悉React class的生命周期函数，你可以把useEffect Hook看做componentDidMount，componentDidUpdate，componentWillUnmount这三个函数的组合

React组件中有两种常见副作用的操作，需要清除和不需要清除的

无需清除的effect

在React更新DOM之后运行一些额外的代码，比如：发送网络请求，手动变更DOM，记录日志等

// 使用useEffect
import React, { useState, useEffect } from 'react';

function Example () {
	const [count, setCount] = useState(0);
	
	useEffect(() => {
		document.title = `You clicked ${count} times`;
	});
	
	return (
		<div>
			<p>You clicked {count} times</p>
			<button
				onClick={() => setCount(count + 1)}
			>
				Click me
			</button>
		</div>
	)
}

需要清除的effect

比如：订阅外部数据源，防止引起内存泄漏

import React, { useState, useEffect } from 'react';

function FriendStatus (props) {
	const [isOnline, setIsOnline] = useState(null);
	
	useEffect(() => {
		function handleStatusChange (status) {
			setIsOnline(status.isOnline);
		}
		ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
		return function cleanup () {
			ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
		}
	});
	
	if (isOnline === null) {
		return 'Loading...';
	}
	return isOnline ? 'Online' : 'offline';
}

为什么要在 effect 中返回一个函数？ 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分

提示：通过跳过Effect进行性能优化

在某些情况下，每次渲染后都执行清理或者执行 effect 可能会导致性能问题。在 class 组件中，我们可以通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决：

componentDidUpdate(prevProps, prevState) {
	if (prevState.count !== this.state.count) {
		document.title = `You clicked ${this.state.count} times`;
	} 
}

如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：

useEffect(() => {
	document.title = `You clicked ${count} times`;
}, [count]); // 仅在count更改时更新

上面这个示例中，我们传入[count]作为第二个参数，如果count的值是5，而且组件重渲染的时候count还是等于5，React将对前一次渲染的[5]和后一次渲染的[5]进行比较，因为数组中的所有元素都是相等的（5 === 5），React会跳过这个effect，实现了性能优化
当渲染时，如果count的值更新成了6，React将会把前一次渲染时的数组[5]和这次渲染的数组[6]中的元素进行对比，这次因为 5 !== 6,React就会再次调用effect

如果想执行只运行一次的effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数，就告诉React你的effect不依赖与props或state中的任何值，所以它永远都不需要重复执行

Hook 规则

只在最顶层使用Hook

不要在循环，条件或嵌套函数中调用Hook，就保证React能够在多次的useState和useEffect调用之间保持hook状态的正确

只在React函数中调用Hook

不要再普通的JavaScript函数中调用Hook