国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

react中高階組件

cjie / 2288人閱讀

摘要：高階組件深入理解作用以及應用本文主要以通俗易懂的語言表達自己對高階組件的一些見解，希望大家多多提問高階組件深入理解高階組件就是一個函數，傳給它一個組件，它返回一個新的組件。新的組件使用傳入的組件作為子組件。

react高階組件深入理解、作用以及應用

本文主要以通俗易懂的語言表達自己對高階組件的一些見解，希望大家多多提問

高階組件深入理解

高階組件就是一個函數，傳給它一個組件，它返回一個新的組件。新的組件使用傳入的組件作為子組件。

首先根據定義我們明白它就是一個函數，而且它必須有返回值，返回值是一個組件，當然這里我們高階組件可以嵌套（這里是一篇入門的文章，之后我會更新高階組件多層嵌套）

高階組件的作用

一直以來我們都是看到新的知識都是一直學習，一直看官方文檔，沒有靜下心來想一想到底為什么這個新知識能夠在這個時候出現？為什么它剛出現就這么火？它到底在什么情況下用？它能解決什么問題……等等這一系列的問題

我第一次見到這個詞是在redux中解讀connect組件時，看到這個詞，官方文檔也有具體說明個人推薦到這里去看，比官方文檔，解釋的更好

其實高階組件就是把公用的一些部分提出來，把修改的部分以參數的形勢傳進去，在這里可能有人會說這那需用什么高階組件，我自己封裝一個組件也可以達到同樣的效果，簡單的組件在這里你可能通過封裝來實現，但是我舉兩個例子大家在想一下怎么通過組建封裝來實現：1、antd組件的form組件，2、我們在redux中組件頂部寫一行代碼@connect之后就可以在組件中通過this.props訪問store中的數據和一些修改數據的方法

這里也許也會有一些大牛說我可以實現，但是大牛畢竟比較少，可能許多程序員在心理都會覺得自己是大牛，在這里我可以告大家一個檢測自己實力的方法：就是沒事的時候把建立投一下阿里或者是京東，然后去面試一下，我敢保證許多人就會現行；

高階組件的用處

說了那么多廢話，說點有用的吧，高階組件一般用在那些地方呢

我們從一個實際問題來理解并學習高階組件：有類似的幾個組件但是組件內部只有少部分是不同的，它們身上都還有一些公用的方法，并且這些少部分組件組件都還要調用大組件的方法或者訪問它的一些數據

我們來分一下：1，這幾個組件的大部分樣式和功能是相同的，我們可以可以思考能不能只寫一次；2、它們不同的地方還會觸發一些相同的方法；3、不同的地方只是內部的一小部分

如果我們按照組件封裝的方法來實現的的話，我們封裝一個大組件，然后把不同的小組件傳進去，然后通過props把方法傳到小組件，通過回調觸發，但是這里有一個問題，我們寫這幾個組件的時候每次都要把大組件寫一遍然后把子組件嵌入進去

加入這里我們采用高階組件來實現的話，我們只需要把公用的方法和數據寫到高階函數返回的組件中，然后把組件傳進去就可以了，最后在每個調用這個大組件的地方直接調用這個函數就可以了。

在上圖中我們的代碼可以這樣來實現

//先寫高階組件
export default class HigherOrderComponent(InputComponent){
    return class NewComponent extends Component{
        constructor(){
            super()
            this.state={
                initalState:123
            }
        }
        commonFunc=()=>{
        }
        render(){
            return(
                
            )
        }
    }
}
//再來寫outerComponent
import HigherOrderComponent from "HigherOrderComponent";
import MinComponent1 from "MinComponent1";
import MinComponent2 from "MinComponent2";
class OuterComponent extends Component{
    render(){
        return(
            

                {HigherOrderComponent(minComponent1)}
                {HigherOrderComponent(minComponent2)}
            

        )
    }
}
這樣這個outerComponent就寫完了,直接在這個編輯器里寫的，代碼可能會有以下小的錯誤，大家諒解

大家可以考慮一下這個組件加入要用我們組件封裝嵌套的方式寫的話能不能也寫的簡單點，歡迎大家在評論區寫上自己的實現方式，方便大家一起討論

高階組件的應用

上面一不小心連高階組件的應用也寫了，大概就是這么個過程，希望可以對大家有一些幫助

下班了，看明天有時間我把那兩個小組件也更新一下，我們在小組件中可以通過this.props來訪問高階組件的方法和數據

謝謝……

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

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

相關文章

  • React 深入系列6：高階組件

    摘要：在項目中用好高階組件，可以顯著提高代碼質量。高階組件的定義類比于高階函數的定義。高階函數接收函數作為參數，并且返回值也是一個函數。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 1. 基本概念 高階組件是React 中一個很重要且比較復雜的概念，高階組件在很多第三方庫（如Redux）中都...

    2shou 評論0 收藏0

  • React高階組件

    摘要：結語高階函數對于初學者來說可能不太好理解，但當你深入其中，了解其中的原理之后，我們可以使用高階函數來完成很多的工作。 前段時間在工作中寫Hybrid頁面時遇到了這樣的一個場景，公司需要一系列的活動組件，在每個組件注冊的時候都需要調用App端提供的一個接口。一開始也考慮了幾種方式，包括mixin、組件繼承以及react高階組件。但經過了種種衡量，最后選擇使用了高階組件的做法。 1、Mix...

    ThinkSNS 評論0 收藏0

  • 從零開始學習 React 高階組件

    01、介紹 React 高階組件也叫做 React HOC(High Order Component), 它是react中的高級技術, 用來重用組件邏輯。 但高階組件本身并不是React API。它只是一種模式，這種模式是由react自身的組合性質必然產生的。 那么在學習高階組件之前有一個概念我們必須清楚，就是高階函數。 02、高階函數 概念：高階函數是一個函數，它接收函數作為參數或將函數作...

    _Dreams 評論0 收藏0

  • 當初要是看了這篇，React高階組件早會了

    摘要：也就是說，如果能處理名為的這個高階組件返回的組件則完全無視這個。先展示我是一個組件，我設置了兩秒，之后展示倒計時完成 概況： 什么是高階組件？ 高階部件是一種用于復用組件邏輯的高級技術，它并不是 React API的一部分，而是從React 演化而來的一種模式。 具體地說，高階組件就是一個接收一個組件并返回另外一個新組件的函數！ 這是官方文檔說的，我沒有截全，因為后面的解釋會造成誤解...

    Yi_Zhi_Yu 評論0 收藏0

  • react進階系列：高階組件詳解（二）

    摘要：高階組件可以封裝公共邏輯，給當前組件傳遞方法屬性，添加生命周期鉤子等。二是基礎組件的靜態方法也會因為高階組件的包裹會丟失。如果在開發中確實遇到了必須使用它們，就一定要注意高階組件的這個問題并認真解決。 高階組件可以封裝公共邏輯，給當前組件傳遞方法屬性，添加生命周期鉤子等。 案例： 一個項目中有的頁面需要判斷所處環境，如果在移動端則正常顯示頁面，并向用戶提示當前頁面所處的移動端環境，如果...

    JouyPub 評論0 收藏0

  • 七進七出React高階組件

    摘要：為了提高代碼的復用性和可維護性，高階函數應運而生。使用過的同學，不知道有沒有使用過，高階函數的作用和它是一樣的。高階函數在編程中扮演的角色就是火鍋鍋底的角色，它有公用的方法和屬性，而各種組件就是肉和蔬菜。 為什么要使用高階組件？ 想想以前用原生和jQuery的項目，上千行的code映入眼簾，瞬間有種昏死過去的沖動。代碼難以維護，改一個bug可能出現N個bug，真的是很痛苦。于是乎組件化...

    miguel.jiang 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<