初识React Hook

作为一个用惯了Class、用惯了生命周期开发的前端老鸟，接触到React Hook的心情是这样的

image.png

真的有趣又神奇！
而且，它还很简单。有了它，我们可以省略很多的代码，简化很多的逻辑，给我的感觉，它就是一个带有状态和生命周期的加强版的公共方法。当然这是个人感觉，我们还需要知道官方给它的定义，即

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

一、组件类的缺陷

关于组件类的缺陷，官网已明确给出3个，即

1. 组件之间复用状态逻辑很难
2. 复杂组件变得难以理解
3. 难以理解的class

当然，这样太抽象，我们看一个具体的例子，来直观地感受一下它的好。
如果我们需要写一个计数器的组件类，原先我们会这样写

import React from 'react'
class Example extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }
  
    render() {
      return (
        

          
You clicked {this.state.count} times
           this.setState({ count: this.state.count + 1 })}>
            Click me
          
        
      );
    }
  }
  export default Example

而现在我们只需要这样写

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}
export default Example

哇哦，如此简单。这还只是一个极其简单的组件，如果是一个比较复杂的组件，可想而知，我们会精简多少代码，就好像一个负重前行的人，扔掉了一堆无用的东西，开始轻装简行，走得更快，更潇洒了。
so,这么好的东西，就让我们见识一下它的具体用法吧。

二、常用钩子

• useState()
• useEffect()

以上，是我们最常用的钩子，下面我们来一一介绍

三、 useState() 状态钩子

还是计数器的例子

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}
export default Example

做了什么: 可以看到，useState为我们定义了一个叫做count的'state变量'。
参数： useState的唯一参数，就是初始state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。
返回值: 当前 state 以及更新 state 的函数。
如果，你想定义多个state，那就多次使用useState就可以了，就像这样

  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);

四、 useEffect() 副作用钩子

ok，现在我们可以使用state,然后，不可避免地，我们还需要做一些其他操作，比如更改dom,发送网络请求等，这样我们该如何做呢？

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 (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}
export default Example

像这样，我们将dom操作放进useEffect钩子里，就可以了。我们仍然从三个方面来剖析一下
做了什么:通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。

为什么在组件内部调用 useEffect？:将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。

useEffect 会在每次渲染后都执行吗？: 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。

ok,学习到这里，希望大家应该对React Hook有了初步的印象，你可以把他拆分成两部分 状态 + 副作用(代码逻辑) 去理解。

既然是初识，就求个简单明了。有机会再给大家带来Hook的更多玩法啦~~~

参考:

React官方文档