react-hook入门讲解

hook是react16.8新增的功能，我看了一下，截止到我写这篇文章的时间，react已经迭代到了18.2的版本了。根据react文档来看，16.8是2019年2月发布的，也就是hook已经发布了4年了，可喜可贺可喜可贺。不过我相信依然会有一些刚接触react的并没有使用过hook（有没有我也写到这里了，不能停了啊，毕竟是我23年第一篇文章），所以我的这篇文章就来当做一个hook的入门讲解吧。本文只是入门，没有任何深入讲解和源码分析。

react的函数组件

在hook之前，react也是可以使用函数作为组件的，不过这个时候的函数就和class里面的render函数一样，只负责执行，需要使用class里面的state作为参数或变量，或者作为静态组件展示在页面上面。这个时候的函数组件用法就和render函数一样，return元素就可以了。

虽然function组件只作为函数执行，但是依然有react组件的一贯问题，只能返回一个根组件，如果需要返回多个元素的话，建议使用fragment元素包裹。

hook出现

我感觉class组件这种形式挺方便的，但是有人认为class组件有点过于繁琐了，所以Facebook公司开始在函数组件上面发力了。我习惯把这个行为叫做挺能折腾，也有人会说这个行为是工作量不饱和。

原来的函数组件没有内部变量每次render函数执行的时候函数组件就执行一次，里面的变量会被重新声明赋值，如果不借助外部变量，这个函数组件就是一个静态组件。所以hook里面第一个api出现了，useState。

useState的使用方法

useState用法很简单。

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>
  );
}

这个是我从react官方文档里面复制过来的，可以看出来，想使用useState的第一步就是把从react组件里面获取到useState。这个操作有别于class组件里面的直接使用state和setState，hook需要先引入再调用，也就是说不止useState，hook相关的所有的方法，都需要先引入才可以使用。

变量的生命用const也好，let也好，都无所谓，都可以正常运行。useState的变量生命使用了结构赋值的方式，useState其实是返回了一个数组，第0位是声明的变量，第1位是改变变量的方法。当然也不是完全没有区别，如果用const变量无法直接修改，不过都用hook了，应该也很少有直接修改的吧。不过直接修改也有效，以上面复制的代码为例，如果直接讲const改为let，然后直接count = count + 1，这时候在hook里面count确实是加1了，但是页面并没有刷新，此时如果父组件变动导致组件刷新，count的加1就取消了，如果 Example组件的其他部分触发了组件刷新，count的加1状态就可以保留。

不过实际开发过程中不建议如此使用，容易意外频发不说，也不是太正规的使用方法，而且这样的话还会导致useEffect无法检测到count的变动，这个后面再说。

useState返回的两个值，count就相当于class组件state里面的变量，setCount就相当于setState。useState只支持一个参数，就是变量初始值，setCount也只支持一个参数，可以是变量值，也可以是回调函数。

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

还是用react官方文档的例子，setCount可以直接传一个值作为参数，那么count的值就变成了initialCount，或者传入一个回调函数，prevCount就是setCount运行时count的值，回调函数返回的值就是count的新值，我说的有点乱，大体上可以理解为setCount(prevCount => prevCount - 1)最终的结果是setCount(count-1)，不过绝对不可以这么理解，因为在异步执行的时候结果是不一样的，不过这篇文章只是入门文章，不讲那么深刻（起码我感觉有点深刻了）。

setState还有一个要求，就是不能和if语句一起执行

function Counter() {
  const [count, setCount] = useState(1);
  if(count === 1) {
      const [num, setNum] = useState(1);
  }
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(prevCount => prevCount +1)}>-</button>
    </>
  );
}

这种使用方法是不可以的，具体原因很复杂，我的理解是这样声明会让react无法理解，具体为什么无法理解还得从一个叫链表的数据结构说起，就复杂了，入门讲解，没有那么复杂。

useEffect的使用方法

这时候函数组件已经有了自己的变量了，但是不能把运行时需要的方法直接放到函数组件里面运行，这样会导致每次组件执行和更新的时候，这个方法都会运行，既浪费也没有意义。所以需要一个像生命周期一样的东西，在hook里面可以是useEffect。

useEffect可以先当生命周期来用，不过在细节上不太一样，毕竟都换成了hook了，再弄一个一模一样的生命周期也没有意义。

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:  
  useEffect(() => {    
      // Update the document title using the browser API    
      document.title = `You clicked ${count} times`; 
  });
  
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

还是那句话，react官方文档的例子。

函数组件执行的时候useEffect会执行一次，然后当setCount改变了count的值的时候，useEffect还会执行一次。可以和注释说的一样直接当做componentDidMount 和 componentDidUpdate用。

当然还是有区别的，我先放一个用的比较具体的useEffect例子，然后再做讲解。

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // 仅在 props.friend.id 发生变化时，重新订阅

我们先不管这些奇怪的变量都是什么，我先简单讲解一下这个useEffect的用法，我会对照这个class组件的生命周期来说。

useEffect支持两个参数，第一个参数需要是一个函数，函数没有默认参数，可以返回一个函数或者返回空，如果返回函数的话会在下一次useEffect执行之前先执行返回的函数。第二个参数是一个数组，数组里面是useEffect绑定的变量，如果没有发生变化则这个useEffect不执行，如果发生变化useEffect会执行。所以一个useEffect可以等价三个生命周期。

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate(prevProps) {    
      // 取消订阅之前的 friend.id    
      ChatAPI.unsubscribeFromFriendStatus( prevProps.friend.id, this.handleStatusChange);   
      // 订阅新的 friend.id   
      ChatAPI.subscribeToFriendStatus(this.props.friend.id,  this.handleStatusChange); 
 }
  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

一个hook里面可以有无数个useEffect和useState，如果一个useEffect第二个参数是一个[]，那么这个useEffect可以等价于componentDidMount和componentWillUnmount，也就是hook首次执行的时候执行一次，hook消失的时候执行一次返回的函数。前期使用的话这样就差不多了。

说的比较简单，毕竟入门讲解嘛。这两个方法大体上就能应对一些简单的开发项目了，等到项目复杂了之后估计还需要去学习useMemo，useCallback等等大量hook的api了，不过入门讲解不讲那么多，毕竟都入门了，我说那么多，能接受的人估计也不需要我这个入门的讲解了。