react的Hook-09

2019-12-15  本文已影响0人  逝去丶浅秋

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。
注意的问题：

四、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

写在最后：

上一篇下一篇

猜你喜欢

热点阅读