一起来React Hook学习怎么用吧

什么是Hook?

官方文档解释：

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

• Hook是一些可以让你在函数组件里“钩入”React state以及生命周期等特性的函数。Hook不能在class组件里使用–这使得你不适用class也能使用React。

熟悉有状态组件（class组件）和无状态组件（函数组件）的区别的人，看了官方解释应该就能懂Hook的作用。不熟悉有状态组件和无状态组件的小伙伴可以先去了解他们的区别及用法。它就是可以让你在无状态组件里使用state以及生命周期等特性。

使用State Hook : useState

useState用于在函数组件中添加一些内部state。它会返回一对值：当前状态和一个让你更新的函数。

官方例子：

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

const [count, setCount] = useState(0); // useState唯一的参数就是初始state ,则count的初始值为0，setCount则是更新函数，类似于setState的效果。

使用Effect Hook : useEffect

useEffect是给函数组件增加了操作副作用的能力。即为函数组件提供了生命周期等特性。

副作用：你之前可能已经在React组件中执行过数据获取、订阅或者手动修改过DOM.我们统一把这些操作称为“副作用”，或者简称为“作用”。

官方例子：

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

组件首次渲染时会执行一次useEffect(相当于componentDidMount),在count只改变是也会执行一次useEffect(相当于compoentDieUpdate)。

结尾

这里我只记录了一些Hook的基础知识，像还有什么如何“清除”副作用、自定义Hook之类更深入的学习，请参考React官方文档。有什么写的有问题的地方请多多指教，感谢观看！

作者：YellowGun
链接：https://juejin.im/post/5e5fa31e6fb9a07cd74f5f53