使用React Hook提高代碼復用性

KevinYan 發布于2019-08-23 17:16 / 3385人閱讀

摘要：看完代碼應該就能很好的理解的使用了吧，具體代碼的運行點擊在線演示查看在線演示總結給我們帶來的就是在函數的基礎上可以加入狀態和生命周期等函數不曾有的特性，這個特性的加入能夠讓我們更好的抽象組件，提高代碼的復用性。

Hook 簡介

Hook 是 React 16.8 的新增特性。是對 React 函數組件的一種擴展，通過提供一些特殊的函數，讓無狀態的組件擁有狀態組件才擁有的能力。

沒有Hook之前寫組件有兩種形式，分別為

函數組件

class組件

函數組件特點如下

所有的數據都是依賴props傳入的，沒有內部state

沒有生命周期

沒有this(組件實例)

實際開發中因為業務復雜，一般使用函數組件無法滿足，所以大家默認都是使用class組件進行開發，這是一個不會出錯的選擇。函數組件大家平時應該都挺少會去用的，因為函數組件能提供的功能比較局限。但是引入Hook后，函數的能力就被擴展了許多，因為函數的特性，非常適合抽象成可復用的組件。

解決哪些問題 不同組件間與狀態有關的邏輯復用問題

平時寫組件的方式就是通過props傳遞給下一個組件，有些簡單的情況這樣也挺好的。但是當項目不斷迭代，會發現當組件被多個模塊多次引用，還是會多寫一些重復的邏輯。因為受到到狀態或者生命周期的影響，導致這部分邏輯卻又很難拆出來。

引入Hook就可以將受狀態或生命周期影響的組件抽出來。

業務發展導致組件日益龐大

最外層的代碼集中維護許多state狀態，導致頁面引入越來越多毫無關聯的模塊，代碼的可讀性大大降低，有時候因為多個生命周期里面有大量不相關的邏輯，這樣雜亂的代碼容易引起bug，也增加了其它開發人員維護的難度。

Hook將組件中每一個相關的小模塊拆分成一個函數，這樣能夠讓組件即使龐大結構也是清晰的。

用法

State Hook：在函數組件中使用state

Effect Hook：在函數組件中使用生命周期

Custom Hook：自定義Hook，可以將組件邏輯提取到函數中。(注意：自定義 Hook 是一個函數，其名稱以 “use” 開頭，函數內部可以調用其他的 Hook)

Hook 規則

Hook 本質就是 JavaScript 函數，但是在使用它時需要遵循兩條規則

只在最頂層使用 Hook(不要在循環，條件或嵌套函數中調用)

只在 React 函數中調用 Hook

ESLint 插件

強制執行 hooks 的最佳實踐

eslint-plugin-react-hooks

如何使用

詳細的一些概念官方文檔已經寫得很全面了，可以參考：Hook的官方文檔。

接下來就用一個實際的例子來說明一下State Hook的使用

示例

產品第一版本需求如下：

現在有小A，小B 兩位同學，每位同學都處于未穿鞋的狀態，小A穿鞋需要2s，小B穿鞋需要5s，在頁面一中用文字描述兩位同學的穿鞋狀態變更( 如果小A正在穿鞋中，則在頁面上顯示 "小A正在穿鞋子"，如果小A已經穿好了鞋子，則將文字替換為 "小A已經穿好鞋子")

使用class組件實現如下：

src/demo1.js

import React from "react";

class Page extends React.Component {
  state = {
    data: [
      { id: 1, name: "小A", time: "2000" },
      { id: 2, name: "小B", time: "5000" }
    ]
  };

  start(item) {
    this.setState({
      [item.id]: "穿鞋子"
    });

    setTimeout(() => {
      this.setState({
        [item.id]: "穿好鞋子"
      });
    }, item.time);
  }

  componentDidMount() {
    this.state.data.forEach(item => {
      this.start(item);
    });
  }

  render() {
    return (
      
        {this.state.data.map(item => {
          return (
            
              {this.state[item.id] === "穿鞋子"
                ? `${item.name}正在穿鞋子...`
                : `${item.name}已經穿好鞋子了`}
            
          );
        })}
      
    );
  }
}

export default Page;

使用Hook組件實現如下：

自定義hook如下：

src/useHook.js

import React, { useState } from "react";

function useHook(item) {
  const [status, setStatus] = useState("穿鞋子");

  setTimeout(() => {
    setStatus("穿好鞋子");
  }, item.time);

  return (
    
      {status === "穿鞋子"
        ? `${item.name}正在穿鞋子...`
        : `${item.name}已經穿好鞋子了`}
    
  );
}

export default useHook;

引用hook的函數組件

src/hookDemo1.js

import React from "react";
import useHook from "./useHook";

function Page() {
  const data = [
    { id: 1, name: "小A", time: "2000" },
    { id: 2, name: "小B", time: "5000" }
  ];
  return (
    
      {data.map(item => {
        return useHook(item);
      })}
    
  );
}

export default Page;

好了，實現完上面的需求，現在覺得hook的好處并沒有什么體現，接下來產品又發布了第二版需求，要求我們在另一個頁面顯示另外兩位同學的狀態。需求如下：

現在有小C，小D 兩位同學，每位同學都處于未穿鞋的狀態，小A穿鞋需要4s，小B穿鞋需要8s，在頁面二中用文字描述兩位同學的穿鞋狀態變更( 如果小A正在穿鞋中，則在頁面上顯示 "小C正在穿鞋子"，如果小C已經穿好了鞋子，則將文字替換為 "小C已經穿好鞋子")

接下來再第一個版本的基礎上來實現第二個需求

使用class組件實現如下：

src/demo2.js

import React from "react";

class Page extends React.Component {
  state = {
    data: [
      { id: 1, name: "小C", time: "4000" },
      { id: 2, name: "小D", time: "8000" }
    ]
  };

  start(item) {
    this.setState({
      [item.id]: "穿鞋子"
    });

    setTimeout(() => {
      this.setState({
        [item.id]: "穿好鞋子"
      });
    }, item.time);
  }

  componentDidMount() {
    this.state.data.forEach(item => {
      this.start(item);
    });
  }

  render() {
    return (
      
        {this.state.data.map(item => {
          return (
            
              {this.state[item.id] === "穿鞋子"
                ? `${item.name}正在穿鞋子...`
                : `${item.name}已經穿好鞋子了`}
            
          );
        })}
      
    );
  }
}

export default Page;

使用Hook組件實現如下：

src/hookDemo2.js

import React from "react";
import useHook from "./useHook";

function Page() {
  const data = [
    { id: 1, name: "小C", time: "4000" },
    { id: 2, name: "小D", time: "8000" }
  ];
  return (
    
      {data.map(item => {
        return useHook(item);
      })}
    
  );
}

export default Page;

第二次的代碼明顯比第一次少了許多，而且如果之后產品如果增加了一個狀態，那明顯使用Hook實現的方式可以更快的適應需求的變更，代碼的維護性也變高了許多。

看完代碼應該就能很好的理解hook的使用了吧，具體代碼的運行點擊在線演示查看

在線演示

總結

Hook給我們帶來的就是在函數的基礎上可以加入狀態和生命周期等函數不曾有的特性，這個特性的加入能夠讓我們更好的抽象組件，提高代碼的復用性。

GPU云服務器云服務器代碼復用提高代碼性能 react使用webrtc js代碼提高安全性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104086.html

React Hooks入門: 基礎

摘要：當組件安裝和更新時，回調函數都會被調用。好在為我們提供了第二個參數，如果第二個參數傳入一個數組，僅當重新渲染時數組中的值發生改變時，中的回調函數才會執行。前言　　首先歡迎大家關注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵，希望大家多多關注呀！React 16.8中新增了Hooks特性，并且在React官方文檔中新增...

mrli2016 2019-08-23 15:36 評論0 收藏0
React Hook 不完全指南

摘要：使用完成副作用操作，賦值給的函數會在組件渲染到屏幕之后。如此很容易產生，并且導致邏輯不一致。同時，這也是很多人將與狀態管理庫結合使用的原因之一。當我們通過的第二個數組類型參數，指明當前的依賴，就能避免不相關的執行開銷了。前言本文內容大部分參考了 overreacted.io 博客一文，同時結合 React Hook 官方文章，整理并歸納一些筆記和輸出個人的一些理解什么是 Hoo...

Lin_R 2019-08-26 13:50 評論0 收藏0
React Hook起飛指南

摘要：起飛指南作者元瀟方凳雅集出品目前放出來了個內置，但僅僅基于以下兩個，就能做很多事情。行代碼實現一個全局元瀟根組件掛上即可子組件調用隨時隨地實現一個局部元瀟的本質是的一個語法糖，感興趣可以閱讀一下的類型定義和實現。 React Hook起飛指南作者：元瀟方凳雅集出品 16.8目前放出來了10個內置hook，但僅僅基于以下兩個API，就能做很多事情。所以這篇文章不會講很多API，...

姘擱『 2019-08-26 10:47 評論0 收藏0
淺談React Hooks

摘要：另外也不利于組件的，及。所以在使用時，盡量將相關聯的，會共同變化的值放入一個。有同學可能會想，每次后都會執行，這樣會不會對性能造成影響。另外必須以開頭來命名，這樣工具才能正確檢測其是否符合規范。由于工作的原因我已經很長時間沒接觸過React了。前段時間圈子里都在討論React Hooks，出于好奇也學習了一番，特此整理以加深理解。緣由在web應用無所不能的9012年，組成應用的C...

yearsj 2019-08-23 15:33 評論0 收藏0
React-hooks 簡介

摘要：比如在條件判斷中使用，在循環，嵌套函數中使用，都會造成執行順序不一致的問題。而比如定時器，事件監聽。第一個參數的返回值，會在組件卸載時執行，相當于，可以清理定時器，移除事件監聽，取消一些訂閱。什么是 Hooks？不通過編寫類組件的情況下，可以在組件內部使用狀態(state) 和其他 React 特性(生命周期，context)的技術 Hooks 為什么會出現在之前的 React ...

incredible 2019-08-23 17:15 評論0 收藏0