Hook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的react特性。
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。
hook的优点：
1、可以解决在无需修改组件结构的情况下复用状态逻辑。
2、可以将组件中相互关联的的部分拆分成更小的函数。
3、hook是一种复用状态逻辑的方式，它不复用state本身，每次调用都有一个完全独立的state。
4、可以使用Effect Hook，可以把它看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
使用hook应该注意：
1、不能在class组件中使用。
2、只能在函数最外层(顶层)调用hook，不要在循环、条件判断或者嵌套函数中调用。
3、只能在react的函数组件中调用hook，不要在其他JavaScript函数中调用。
一、Hook的使用
在使用Hook时我们需要useState，所以我们要引入useState，一个简单的例子：
示例1：
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>
);
}
对于Hook而言，上面代码中的state其实是个叫作count的变量，它是独立的，属于这个Hook。
二、State Hook
如示例1中的代码，useState返回一对值，即当前的state(count)和一个让你更新state的函数setCount。useState唯一的参数就是初始state，上面例子中初始state就是0，这个初始state参数只有在第一次渲染时会被用到。
1、在一个组件中可以多次使用state hook
如果我们想要在 state 中存储两个不同的变量，只需调用 useState() 两次即可。
function ExampleWithManyStates() {
// 声明多个 state 变量！
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}
在函数组件中，我们没有this，所以不能读取this.state，我们直接在组件总调用useState hook。useState和class组件里的this.state提供的功能完全相同。
2、读取state
在class组件中读取count，我们使用this.state.count
在函数中，我们直接使用count：
<p>You clicked {count} times</p>
如果在字符串中使用count需要这样写：
`You clicked ${count} times`
3、更新state
在class中，我们需要调用this.setState()来更新count值。
在函数中，我们有了setCount和count变量，我们不需要this：
const [count,setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>Click me</button>
4、const [count, setCount] = useState(0)的意思
等号左边的count和setCount是useState返回的两个值，可以自己取名字。
这种JavaScript语法叫数组解构，它意味着我们同事创建了count和setCount两个变量。它等价于下面的代码：
var countArr = useState(0); // 返回一个有两个元素的数组
var count = countArr[0]; // 数组里的第一个值
var setCount = countArr[1]; // 数组里的第二个值
三、Effect Hook
useEffect给函数组件增加了执行效率方面的能力，相当于class组件中的componentDidMount、componentDidUpdate 和 componentWillUnmount合并到一块。
默认情况下，react会在每次渲染后调用Effect函数，包括第一次渲染的时候。
effect可以通过一个return函数在组件卸载时来执行的操作。例如在effect中写了好友上线后的在线状态的代码，在组件卸载时通过return写取消订阅好友在线状态的代码。
react将按照effect声明的顺序依次调用组件中的每一个effect。
1、可以在组件中多次使用useEffect
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
通过hook可以把组件内相关的部分组织在一起，而不用把他们拆分到不同的生命周期函数里。
2、通过跳过Effect进行性能优化
因为effect每次渲染后都会执行，而有时我们的数据并没有发生变化，所以这样会导致性能问题，为了解决这个问题在useEffect中传递数组[count]作为第二个可选参数。
useEffect(()=>{
document.title = `clicked ${count} times`;
},[count]);
如上面例子，传入了[count]作为第二个参数，react将对前一次渲染的count和后一次的进行对比，如果改变就会调用effect，如果没有改变就不会调用这个effect。
注意的问题：
- 要确保传入的数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则会引用到先前渲染中的旧变量
- 如果想要只执行一次的effect（仅在组件挂载和卸载时执行），可以传递一个空数组[]最为第二个参数。这就告诉react你的effect不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。
- 如果你传入了一个空数组（[]），effect 内部的 props 和 state 就会一直拥有其初始值。
- react会等待浏览器完成画面渲染之后才会延迟调用useEffect。
四、Hook使用规则
Hook本质就是JavaScript函数，使用时需要遵循两条规则。react提供了一个linter插件来强制执行这些规则。
1、只在最顶层使用 Hook
不要在循环，条件或嵌套函数中调用 Hook，遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。
2、只在 React 函数中调用 Hook
确保组件的状态逻辑在代码中清晰可见。
3、ESLint插件强制执行这两条规则
npm install eslint-plugin-react-hooks --save-dev
// 你的 ESLint 配置
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
"react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
}
}
4、React 靠的是 Hook 调用的顺序，来使useState和state对应
根据代码的顺序，hook在多次渲染之间保持一致，如果在条件语句中，可能导致渲染会跳过一些hook，hook的调用顺序发生了改变，后面的effect调用都被提前，导致bug的产生。
如果想要有条件的执行一个effect，可以将判断放到hook的内部。
五、自定义hook
我们可以把订阅和取消订阅的逻辑抽取到一个叫做useFriendStatus的自定义Hook里：
import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
它将 friendID 作为参数，并返回该好友是否在线，这样我们就可以在其他的组件中使用。
1、自定义hook的使用规则
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
return isOnline;
}
自定义Hook不需要具有特殊的标识，我们可以自由决定它的参数是什么，以及返回什么。
- 自定义Hook必须以"use"开头
- 两个组件中使用相同的Hook，但是它们的state不会共享，完全隔离
- 每次调用Hook，都会获取独立的state
六、其他Hook
- useContext：不使用组件嵌套就可以订阅React的Context
- useReducer：通过reducer来 管理组件本地的复杂state
写在最后：
- 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
- 文章我也会根据所学到新的知识不断更新。
网友评论