React Hook 系列（一）初識

時間 2020-05-21

標籤 react hook 系列欄目 React 简体版

原文原文鏈接

前言

這篇文章主要是講Hook的動機，優缺點之類的；
有須要看實戰的夥伴歡迎直接跳到第二章

探究

主要從3個方面研究React Hookjavascript

根據黃金思惟圈（What、How、Why）java

What

什麼是Hook？react

打開Google翻譯，獲得的解釋：鉤、鉤子ajax

再看看React官網的解釋：They let you use state and other React features without writing a class.（它可讓你在不編寫 class 的狀況下使用 state 以及其餘的 React 特性。）數組

因此，結合一下。我我的的理解是這樣的：對於函數式的組件，能夠用鉤子（Hook）將想要的外部功能給「鉤」進來。框架

在React Hook出來以前，函數式組件都是無狀態的組件，最多就是根據props來加一些判斷的邏輯；而在React Hook出來以後就能夠在函數式組件裏面加入狀態（useState），類生命週期（useEffect），甚至是一些本身的複用邏輯（自定義Hook）等等這些外部的功能。異步

How

怎麼使用Hook？async

你們一塊兒看一下官網的一個例子。函數

題目：顯示一個計數器。當你點擊按鈕，計數器的值就會增長。post

Class組件：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div>
    );
  }
}
複製代碼

函數式組件（使用了React Hook）：

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 Hook 實踐，關於一些官方提供的Hook晚點會介紹。

Why

爲何會有Hooks？
Hook能解決什麼問題？

作任何一件事情我以爲都應該理清這個兩個問題，這樣的話就會事半功倍。

咱們先看看React官方是怎麼解釋「Why」的

在組件之間複用狀態邏輯很難

複雜組件變得難以理解

難以理解的 class

本人我的認爲第三點是來湊數的....

爲何這麼說？

由於React用了這麼久了基本都是在使用Class組件，這個是在以前，哪怕是如今學習React的必經之路吧！因此，這點我接下來就會跳過了😂

在組件之間服用狀態邏輯很難

其實高階組件或者說是props都是很好的解決了複雜的聚合業務邏輯，那爲何說在組件之間服用狀態邏輯很難呢？

其實道理很是簡單。

舉個簡單的例子，方便你們理解。

場景：有請求A，請求B，請求C，請求D。他們的請求都有相互依賴關係好比，發請求B的時候必須拿到請求A的結果中的某個值，而請求C也必須拿到請求B的結果中的某個值。以此類推請求D。

Promise出來以前是怎麼作的呢？

$.ajax({
    type:"post",
    success: function(){//成功回調
        //再次異步請求
        $.ajax({
            type:"post",
            url:"...",
            success:function(){//成功回調
              //再次異步請求
              $.ajax({
                  type:"post",
                  url:"...",
                  success:function(){
                      .......//如此循環
                  }
              })
          }
        })
    }
})
複製代碼

這還只是3層，若是是100層呢？那看起來就很是的難受了！

Promise較好的解決了這個問題

new Promise(f1)
 .then(f2)
 .then(f3)
 .then(f4)
 .then(f5)
 .then(f5)
…………
複製代碼

而後是async/await。這裏就不展開了，有興趣的能夠本身去了解一下。

結論

之因此這麼大費周章的講是爲了解釋，React中的高階組件（HOC）。他的邏輯其實和回調地獄相似，一個兩個其實都還算優雅或者說舒服，一旦多了的話。。。

export default withHover(
  withTheme(
    withAuth(
      withRepos(Profile)
    )
  )
)

// 就會變成這樣，不夠優雅
<WithHover>
  <WithTheme hovering={false}>
    <WithAuth hovering={false} theme='dark'>
      <WithRepos hovering={false} theme='dark' authed={true}>
        <Profile 
          id='JavaScript'
          loading={true} 
          repos={[]}
          authed={true}
          theme='dark'
          hovering={false}
        />
      </WithRepos>
    </WithAuth>
  <WithTheme>
</WithHover>
複製代碼

並且每一個高階組件的邏輯複用咱們可能還要一個個去研讀。

複雜組件變得難以理解

其實，這點很是好理解。舉一個很是簡單常見的例子你們就會明白了。

場景：假如我有一個子組件Child，他的功能是這樣的：父組建會給一個id，在組件建立的時候獲取一下有關信息，在id改變的時候再從新獲取。

Class組件

componentDidMount () {
    this.fetch(this.props.id)
 }
componentDidUpdate (prevProps) {
  if (prevProps.id !== this.props.id) {
    this.fetch(this.props.id)
  }
}
fetch = id => {
  this.setState({ loading: true })
  fetchInfo(id)
    .then(info => this.setState({
    info,
    loading: false
  }))
}
複製代碼

React Hook：

const fetch = id => {
  this.setState({ loading: true })
  fetchInfo(id)
    .then(info => this.setState({
    info,
    loading: false
  }))
}
useEffect(() => {
  fetch(this.props.id)
}, [this.props.id])
複製代碼