hooks概念

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

什么是hooks

Hooks的本质：一套能够使函数组件更强大，更灵活的“钩子”,能够像类组件一样拥有自己的状态，使得react更好的react(函数式编程) 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

useState的使用

useState 是一个hook ,在函数组件里执行它可以给组件添加内部state,组件重复渲染时会保留这个state,useStae会返回两个值，一个是状态另一个时更新这个状态并使组件重新渲染的函数。这个函数和setState非常像， 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体系里组件分为 类组件 和 函数组件

经过多年的实战经验，函数组件是更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生

Hooks解决了什么问题

Hooks的出现解决了俩个问题    1. 组件的状态逻辑复用  2.class组件自身的问题

1. 组件的逻辑复用
   在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式
   但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等 hooks不一样，hooks可以将逻辑抽离出来，做到逻辑和数据之间的解构
2. class组件自身的问题
   class组件就像一个厚重的‘战舰’ 一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this指向问题等等，而我们更多时候需要的是一个轻快灵活的'快艇'