React hooks的使用及其差异

标题React hooks的使用及其差异

下面，我将我最近学习到的React Hooks相关的知识整理为博客，给大家一起分享！

Hooks是React 16.8中的新增功能。它们使开发者在不编写 class 的情况下使用 state 以及其他的 React 特性。

一、 使用Hooks的动机

早期的React 只支持纯函数组件，如

//纯函数组件
function Welcome(props) {
    return <h1>Hello, {
   props.name}</h1>;}

这种纯函数的写法有着重大限制，即不能包含状态，也不支持生命周期方法，因此，无法取代类。
而使用类进行开发又存在组件间状态逻辑难以复用、复杂组件难以理解等问题。
为了解决上述问题，React官方设计了Hooks，以实现加强函数组件的目的，进而让开发者可以在完全不使用“类”的状态下，就可以写出一个全功能的组件。
引入Hooks后的组件主体仍为返回组件的HTML代码，若开发者需要外部功能或其他操作（副作用），就可以用钩子函数把外部代码“钩”进来。
显然，React Hooks 指的即为那些钩子函数。

二、 Hooks的使用

由于副作用非常多，所以React Hooks有很多种，下面我将主要介绍几种常用的Hooks.
1. useState

// useState的函数签名
const [state, setState] =useState(initalState);

l 基本用法：
接受状态的初始值（initialState）为参数，返回一个数组。数组的第一个成员为状态的当前值（state），数组的第二个成员为更当前状态的函数（setState）。
l 注意：
（1）initialSta