react的Hook-09

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

---

写在最后：

• 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
• 文章我也会根据所学到新的知识不断更新。