超性感的React Hooks（一）：爲什麼她獨具魅力

正如標題所示，我準備寫一系列文章介紹React Hooks。

過去大半年裏，我將React Hooks應用到了許多大型項目，其中5個全新重構，其餘項目因爲時間關係少許使用。

這些項目包括

• React Native
• 基於ant-design-pro重構的中後臺應用
• 基於React，專一於小程序開發的Taro應用
• 以create-react-app爲基礎，自主構建的web應用
• 基於beidou框架的改造的同構應用等

截止目前爲止，其中一個項目useState使用2053次。

在大量使用了React Hooks以後，我有不少東西想要跟你們分享，也算是對本身這一年的成長作一個總結。

網上有大量的文章可以教會你們如何使用React hooks，但不多有文章可以指引咱們如何用好。而這，也是我此次總結的目的所在。

這系列文章將不只僅只是簡單的介紹React Hooks相關的api，也不會爲了逼格而過於深刻源碼，我會專一於實踐應用，恰到好處的把該說的東西說得通俗易懂。也算是本身對知識是否掌握牢固的一次有效檢驗。

文章會有不少篇，只能利用空餘時間寫，可能要一個多月甚至更久才能寫完，但願感興趣的同窗能有點耐心，文章會優先在個人公衆號不知非攻中發佈。本文就先總結一下爲何React Hooks值得入手，而且萬萬不能錯過。

閱讀本系列文章，須要有相對紮實的JS基礎，而且對React有簡單的瞭解。若是你以爲本身還不具有這樣的條件，不要緊，關注個人公衆號，我以前寫的基礎進階系列文章一定可以幫助你們夯實基礎。

這系列文章雖然主要是分析React hooks，可是也能夠做爲React的入門教程，我會盡可能通俗易懂。

React Hooks是React的一次成功自我顛覆。

這是我大量使用React Hooks以後的真實感覺。

React團隊隨時都在想着如何顛覆本身。對於主攻React的童鞋來講，真的是幸福又痛苦。

而React Hooks給個人感受，無疑是幸福大於痛苦的。

1、肉眼可見的簡潔

先用一張圖簡單對比一下：

左側的代碼，是學習React入門的經典demo。 右側的代碼，則是使用新的方式實現一樣的功能。

固然，簡潔力度有限，還不夠震撼，說服力不夠強。 再來一個例子。

基於上面的簡單計數組件，強行套一個受控組件的思惟，下圖是實現對比圖。

代碼行數，整整少了幾乎一半。

import React, { useState, useEffect } from 'react';

interface Props {
  value: number,
  onChange: (num: number) => any
}

export default function Counter({ value, onChange }: Props) {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    value && setCount(value);
  }, [value]);

  return [
    <div key="a">{count}</div>,
    <button key="b" onClick={() => onChange(count + 1)}>
      點擊+1
    </button>
  ]
}
複製代碼

我想，全部人都知道，代碼少一半，意味着什麼！

2、上手更簡單

當一個團隊選擇了React做爲主要的技術棧，面臨的一個大的問題，就是招人相對困難<至少成都是這樣>，這一點，我深有體會，10個投來的簡歷，9個都是會vue的，還有一個會React的，都是騙人的，2年時間，我愣是沒有招到一個會React的人。大概，你們都以爲vue更好學吧。

我找了一篇好久之前的文章，記錄了本身初學React時的感覺。

當時以爲React學習難，一度認爲本身沒法掌握好，因此還在寫文章勸你們學習angular。如今想一想真的有點點搞笑。

對初學者來講，React上手其實並不容易，那難在哪裏呢？以我本身的經驗總結一下：

生命週期難以理解，更難熟練運用

咱們可以相對容易的把生命週期記憶下來，可是運用到實踐裏倒是另一回事。幾個運行時的生命週期理解起來更是不易。而如何作性能優化，這些生命週期又是重中之重。若是不當心，你寫的代碼甚至可能讓程序翻車。

可以正確理解生命週期並熟練運用，是React開發者成爲高手的必備條件。

可這，也是咱們前進路上的第一條攔路虎。

成熟靠譜的組件化思惟，造成困難

即便是擁有多年開發經驗的大佬，有可能組件化思惟這一項也不過關。糟糕的組件劃分帶來的就是難以維護的糟糕代碼。

固然這不只僅限制於React，全部的組件化思惟框架，都會有一樣的挑戰。組件化思惟很是重要，他是最底層的思惟核心。更良好的組件化思惟，寫出來的代碼一定更優雅，可維護性更高。反之，可能就是災難。

最火的狀態管理解決方案 Redux，概念多， 難以理解

Redux的思惟很是優秀，可實際理解起來並不簡單。 再加上許多人學習Redux時，都是經過 Redux中文文檔，我認爲它加深了學習的難度，學完以後反而懵逼！

特別是自學的同窗，極可能會由於redux，而將React拒之門外。

高階組件理解起來不容易

React Hooks出來以前，高階組件是不管如何也必需要掌握好的知識點。

然而許多同窗基礎知識不紮實，高階函數沒有搞明白，面向對象也有點小問題，在學習高階組件時天然也是似懂非懂。

// 傳入基礎組件做爲參數
const withRouter = (Component) => {

  // 建立中間組件
  const C = (props) => {
    const { wrappedComponentRef, ...remainingProps } = props;
    return (
      <Route render={routeComponentProps => (
        // wrappedComponentRef 用來解決高階組件沒法正確獲取到ref的問題
        <Component {...remainingProps} {...routeComponentProps} ref={wrappedComponentRef} />
      )} />
    )
  }

  C.displayName = `withRouter(${Component.displayName || Component.name})`;
  C.WrappedComponent = Component;
  C.propTypes = {
    wrappedComponentRef: PropTypes.func
  }

  // hoistStatics相似於Object.assign，用於解決基礎組件由於高階組件的包裹而丟失靜態方法的問題
  return hoistStatics(C, Component);
}

export default withRouter;
複製代碼

優秀的解決方案都在社區，許多人用React很長一段時間都沒法知曉

React自己其實很是簡單，但是圍繞React的一系列解決方案，卻沒有途徑告知你們。學完了React，但不必定知道如何使用React實現一個走馬燈，也可能不知道使用React如何實現一個日曆。

比較熱門的Redux，React-router等，都不算是React的官方解決方案。更多的方案例如 redux chunk，redux saga等等，不少React學習者都不知道有這些東西。在這種狀況下，學習成本就變相增長不少。

和之前相比，React hooks的出現讓React的學習成本下降了不少。具體體現爲：

1. 生命週期能夠不用學。react hooks使用全新的理念來管理組件的運做過程。
2. 高階組件不用學。React hooks可以完美解決高階組件想要解決的問題，而且更靠譜。
3. redux再也不是必須品。咱們可以經過其餘方式管理組件狀態。

3、超棒的開發體驗

和class語法相比，函數組件一直都更受歡迎。可是之前函數組件沒法維護本身的狀態，所以在不少時候不得不選擇class來實現目的。

React Hooks 讓函數組件維護內部狀態成爲了可能。

在我看來，React Hooks，是可以最快實現心中所想的開發方式。

4、與Typescript結合更簡單

咱們幾乎不用關注React hooks組件與typescript如何結合使用。這是class組件不具有的優勢。

羣裏的許多朋友在學習typescript時，經常會很是困惑，如何將typescript應用與React中？這樣的問題在高階組件時疑惑可能更大。相信吃過這個苦的同窗都深有體會。

即便知道如何解決，也並非那麼簡單。例如咱們試圖使用ts清晰的描述Demo組件props傳入的數據類型，不得不定義額外的interface。

import React from 'react';
import { connect } from 'net';

interface ConnectProps {
  dispatch: any,
  history: any
}

interface DemoProps {
  name: string,
  age: number
}

interface InjectedProps extends DemoProps, ConnectProps {}

@connect
export default class Demo() {
  get injected() {
    return this.props as 
  }
  render() {
    return (
      <div>hello, world.</div>
    )
  } 
}
複製代碼

React Hooks組件做爲函數組件，幾乎不會有這樣的煩惱。他就和普通函數同樣，沒有新增額外的負擔。

總的來講，React Hooks是React開發體驗的一次全面提高，也是一次效率的革命。若是你正在使用React，卻尚未用上React Hooks，我敢保證，對你而言，這是一次遺憾。

本着不裝逼不引戰的原則，本系列文章主觀上不針對vue/angular等前端框架發表其餘發表任何意見和見解。若是有忘乎所以，吹噓過分之處，請勿往這方面思考 ~

本系列文章的全部案例，均可以在下面的地址中查看

github.com/advance-cou…

本系列文章爲原創，請勿私自轉載，轉載請務必私信我