前端时刻，打仗了hooks，研讨了一段时刻后觉得运用起来异常轻易，恰好公司开了一个新的小项目，恰好运用hooks来实践一下。

手艺选型

1.为何挑选umi

在之前的文章中我也引见过umi的长处，在运用过umi后，觉得本身的开辟效力有很大的提拔。umi的路由运用起来实在是让我爱不释手，细致的我就不过量引见了，有兴致的能够去看我之前的文章。

2.为何挑选TypeScript

TypeScript 是 Microsoft 开辟和保护的一种面向对象的编程言语。它是 JavaScript 的超集，包括了 JavaScript 的一切元素，能够载入 JavaScript 代码运转，并扩大了 JavaScript 的语法。在运用TypeScript编程时，它能协助你在写代码的过程当中考虑到各种范例上的题目，防止代码运转时涌现的意想不到的毛病。运用了TypeScript能够加强你代码的健壮性，迥殊是大型项目标开辟中，某些小小的修正都有能够对你的项目构成严峻的效果。

3.为何挑选Dva

实在运用React Hooks的目标就是为了去redux，那我为何还会运用基于redux-soga封装的dva呢？缘由就在于hooks虽然很轻易，但假如是一些很庞杂的状况须要去治理，这时刻运用hooks就会有点儿费力了。所以这时刻连系dva来处理这类迥殊庞杂的状况治理是很轻易的，原生的redux运用起来轻微有点儿贫苦，dva用起来很简朴，很爽，这就是我挑选dva的缘由。

4.为何挑选React Hooks

这个是这篇文章的重点了，你在react开辟过程当中有无碰见这三个题目。

（一） 在组件组件复用状况逻辑很难

React 没有供应将可复用性行为“附加”到组件的门路（比方，把组件连接到 store）。假如你运用过 React 一段时刻，你或许会熟习一些处理此类题目标计划，比方 render props 和 高阶组件。然则这类计划须要重新组织你的组件构造，这能够会很贫苦，使你的代码难以明白。假如你在 React DevTools 中视察过 React 运用，你会发明由 providers，consumers，高阶组件，render props 等其他笼统层构成的组件会构成“嵌套地狱”。只管我们能够在 DevTools 过滤掉它们，但这说明了一个更深条理的题目：React 须要为同享状况逻辑供应更好的原生门路。

（二） 庞杂的组件变得难以明白

我们经常保护一些组件，组件早先很简朴，然则逐步会被状况逻辑和副作用充溢。每一个生命周期经常包括一些不相关的逻辑。比方，组件经常在 componentDidMount 和 componentDidUpdate 中猎取数据。然则，同一个 componentDidMount 中能够也包括许多别的的逻辑，如设置事宜监听，而以后需在 componentWillUnmount 中消灭。互相关联且须要对比修正的代码被举行了拆分，而完整不相关的代码却在同一个要领中组合在一起。云云很轻易发作 bug，而且致使逻辑不一致。在多半情况下，不能够将组件拆分为更小的粒度，由于状况逻辑无处不在。这也给测试带来了肯定应战。同时，这也是许多人将 React 与状况治理库连系运用的缘由之一。然则，这往往会引入了许多笼统概念，须要你在差别的文件之间往返切换，使得复用变得越发难题。

（三） 难以明白的class

除了代码复用和代码治剖析遇到难题外，class 是进修 React 的一大屏蔽。你必需去明白 JavaScript 中 this 的工作方式，这与其他言语存在庞大差别。还不能遗忘绑定事宜处理器。没有稳固的语法提案，这些代码异常冗余。人人能够很好地明白 props，state 和自顶向下的数据流，但对 class 却束手无策。即使在有履历的 React 开辟者之间，关于函数组件与 class 组件的差别也存在不合，以至还要辨别两种组件的运用场景。

假如你也被这三种题目所搅扰，这时刻打仗hooks，你会发明打开了新世界的大门。从面向对象编程转为函数式编程，我觉得释放了本身，写代码变得又爽又飞快。

项目搭建

由于运用了umi，所以该项目也是用umi来搭建的，具体要领可检察之前文章。挑选ts版本，然后依据本身编程习气，设置一下tslint划定规矩就ok了。
这里要注意一件主要的事变，晋级react和react-dom的版本为16.8.0以上，由于umi脚手架搭建的项目react版本为16.7.0，而16.8.0是react正式支撑hook的版本。

Hooks运用

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

运用起来异常简朴，函数式编程让你不必再继承Component，直接定义一个变量就行，能够给这个变量看作你之前写react中state的一个值。运用Hooks以后你不必再挪用setState来变动state中的值，能够运用你本身定义的变动要领，上面代码中就是运用setCount来变动count的值，是否是很轻易？

怎样在hooks中运用TypeScript？

假如你运用Component来编写你的组件，你须要经由过程interface来定义你state中值的范例，运用Hooks，你只须要如许：

const [count, setCount] = useState<number>(0)

2.useEffect

Effect Hook 能够让你在函数组件中实行副作用操纵，下面是官方代码。

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 (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

这段代码中运用了useEffect，能够让你在屏幕中显现你点击的次数。useEffect最大的优点我以为就是去生命周期钩子函数了，运用以后你不必再运用任何生命周期钩子函数，这一点来看是否是就迥殊爽？useEffect为何会完成去生命周期钩子的作用呢？你能够在函数中写一个console.log，检察掌握台后你便会发明掌握台会一向打印你的console.log,所以useEffect会在组件的生命周期中一向被挪用，我们在运用的时刻能够通知useEffect什么时刻才会被挪用来举行机能优化。比方上面代码我们能够如许修正：

useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
},[count])

如许修正后useEffect会在count的值发作转变后才被挪用。

怎样消灭在useEffect中挪用的函数？

在开辟过程当中我们能够会运用到定时器，而异步行列中的定时器在组件被烧毁后也会继承实行，如许便会构成内存走漏，在Component中我们会挪用componentWillUnmount函数来消灭定时器，在useEffect中我们该怎样办呢？

import React, { useState, useEffect }  from 'react'
import moment from 'moment'
export default function () {
  const [nowTime, setNowTime] = useState(moment().format('YYYY年MM月DD日 ddd HH:mm'))

  useEffect(() => {
    const timer = setInterval(() => {
      setNowTime(moment().format('YYYY年MM月DD日 ddd HH:mm:ss'))
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  },[nowTime])

  return (
    <>{nowTime}</>
  )
}

上面代码就是一段很简朴的显现当前时刻的代码，我们能够经由过程return函数在组件烧毁的时刻消灭useEffect中的定时器

运用Hooks来编写一个表格组件

从后端猎取数据，然后在表格中衬着应该是很罕见的一个功用了，下面我们来看一下运用Hooks以后怎样写这类组件

import React, { useState, useEffect }  from 'react'
import { Table } from 'antd'
export default function () {
  const [tableData, setTableData] = useState<any[]>([])
  const [page, setPage] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(15)
  const [count, setCount] = useState<number>(0)
  const [loading,setLoading] = useState<boolean>(true)

  useEffect(() => {
    fetch('www.baidu.com').then( function(data) {
        if(data) {
          setTableData(data.result)
          setCount(data.count)
          setLoading(false)
        }
    })
  },[page,pageSize])

  const onChangePage = (pageNumber: any) => setPage(pageNumber)

  const onChangePageSize = (value: number) => setPageSize(value)

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '电话',
      dataIndex: 'tel',
    },
    {
      title: '性别',
      dataIndex: 'gender',
    },
    {
      title: '岁数',
      dataIndex: 'age',
    },
  ]

  return (
    <>
      <Table
        bordered={false}
        rowKey={(r, i) => (i + '')}
        columns={columns}
        loading={loading}
        dataSource={tableData.length ? tableData : []}
        pagination={false}
        style={{ marginTop: 10 }}
        size="small"
      />
      <Row>
        <Col span={8}>
          <span>搜刮到{props.count}条数据</span>
          <span style={{ margin: '0 20px' }}>共{Math.ceil(count / pageSize)}页</span>
          <Select defaultValue={15} onChange={onChangePageSize}>
            <Option value={10}>10条/页</Option>
            <Option value={15}>15条/页</Option>
            <Option value={20}>20条/页</Option>
            <Option value={30}>30条/页</Option>
          </Select>
        </Col>
        <Col span={14} push={2} style={{display:'flex', justifyContent:'flex-end', marginRight: 10}}>
           <Pagination 
             showQuickJumper={true} 
             current={page} 
             pageSize={pageSize} 
             total={count} 
             onChange={onChangePage}
           />
        </Col>
      </Row>
    </>
  )
}

如许就写完一个功用完美的表格组件了，追念一下你之前是用Component面向对象编程时怎样写的，再看一下用Hooks函数式编程的代码是否是简朴许多？赶忙来尝尝hooks吧，会让你有写代码停不下来的觉得。