React Hooks实践

9月份开始，使用了react16.8的新特性React Hooks对项目进行了重构，果然，感觉没有被辜负，就像阮一峰老师所说的一样，这个 api 是 React 的未来。

Hooks

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

说是新的特性，但是与其他的版本的迭代不同，它不只是加一点api减一点api的改变。而是完整的一套解决方案。

一个简单的Hook

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官网关于react使用的第一个例子，使用Hooks的方式实现了一个计数器功能。
useState是什么？在这里我们认为useState就是一个Hook。
下面介绍 React 2个最常用的钩子，useState，useEffect。

useState

这个Hook，应该是我们使用最多的一个Hook了。通过在函数组件里调用它来给组件添加一些内部 state。
useState方法会返回一个包含2个值的数组，第一个值是当前状态。第二个值更新这个状态的函数，它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。我们一般会通过解构的方式获取其值。

使用

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

这里我们将内部状态count初始化为0，在count发生变化时，会引起组件的会重新渲染。同时，我们通过解构的方式，给该状态进行了赋值。

更新

<button onClick={() => setCount(count + 1)}>
        Click me
      </button>

直接调用useState返回值的第二个参数，即可完成更新。

useEffect

我在写React ，类组件的时候，最不愿意写的就是生命周期方法，一方面是因为生命周期方法比较多，另一方面其实也比较容易出bug。比如说，我们想要实现一个监听props的某个值的变化，进而进行一些特殊操作，就可能需要两种生命周期的方法配合。但是在Hooks里，我们只需要用到useEffect就可以实现了。

使用

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 类似于componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 更新文档的标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect方法接受2个参数，第一个参数是一个函数，是在第一次渲染以及之后更新渲染之后会进行的副作用，强调一点，该函数可以有返回值，但是该返回值必须是一个函数，会在组件被销毁时执行。
第二个参数是可选的，是一个数组，数组中存放的是需要监听的属性。即当数组中的属性发生变化时，第一个参数的函数会被调用，如果是空数组，则在第一次渲染时会被调用。
基于以上两个最主要的Hook，我们基本上可以满足于我们大部分的需求。但是如果想要对组件进行优化，则需要另外两个Hook。useCallback和useMemo。

useCallback

useCallback接收一个内联回调函数参数和一个依赖项数组（子组件依赖父组件的状态，即子组件会使用到父组件的值），useCallback 会返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。

useMemo

useMemo把创建函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

基于以上的Hook我们基本上可以完成大部分的功能了，除了上文重点介绍的useState和useEffect，react还给我们提供来很多有用的hooks useContext useReducer useRef useImperativeMethods useMutationEffect useLayoutEffect，这里就不一一介绍了，如果想要使用Hooks，这些api也是需要了解的，具体使用可以参考下面的文档。

参考文档:React 官网

原文：https://segmentfault.com/a/1190000021445588

链接: https://fly63.com/article/detial/7106