react 給一個引用的組件添加新屬性_高階組件在React中的應用

197d5595dd4026e5b669aab5beefb949.png

高階組件的定義

接受React組件作為輸入,輸出一個新的React組件。

概念源自于高階函數,將函數作為參數,或者輸出一個函數,如map,reduce,sort。

用haskell的函數簽名來表示:

hocFactory:: W: React.component => E: React.component 

使用場景

可以用來對組件進行二次加工和抽象,比如:對Input組件進行樣式改動、添加新的props屬性;某些可以復用的邏輯抽象后再注入組件。

所以 HOC 的作用大概有以下幾點:

  • 代碼復用和邏輯抽象
  • 對 state 和 props 進行抽象和操作
  • Render 劫持

如何實現

  • 屬性代理(props proxy):高階組件通過被包裹的React組件來操作props,從而能夠實現控制props、引用refs、抽象state。

1.1 控制props

import React, { Component, Fragment } from 'react';const MyContainer = WrappedComponent =>class extends Component {render() {const newProps = {text: 'newText',};return (<><span>通過 props proxy 封裝HOC</span><WrappedComponent {...this.props} {...newProps} /></>);}};

從這里可以看到,在render中返回來傳入WrappedComponent 的React組件,這樣我們就可以通過HOC在props中傳遞屬性、添加組件及樣式等等。

使用也是非常簡單:

import React, { Component } from 'react';
import MyContainer from './MyContainer.jsx';class App extends Component {...
}export default MyContainer(App);

當然也可以使用裝飾器@decorator:”接收一個類作為參數,返回一個新的內部類“,與HOC的定義如出一轍,十分契合。

import React, { Component } from 'react';
import MyContainer from './MyContainer.jsx';@MyContainer
class App extends Component {...
}export default App;

1.2 通過refs使用引用

import React, { Component } from 'react';const RefsHOC = WrappedComponent =>class extends Component {proc(wrappedComponentInstance) {wrappedComponentInstance.refresh();}render() {const props = Object.assign({}, this.props, { ref: this.proc.bind(this) });return <WrappedComponent {...props} />;}};export default RefsHOC;

render() 時會執行 ref 回調,即proc方法,該方法可以獲取 WrappedComponent 的實例,其中包含組件的 props,方法,context等。我們也可以在 proc 中進行一些操作,如控制組件刷新等。

1.3 抽象state

我們可以通過向 WarppedComponent 提供 props 和 回調函數抽象state,將原組件抽象成展示型組件,隔離內部state。

import React, { Component } from 'react';const MyContainer = WrappedComponent =>class extends Component {constructor(props) {super(props);this.state = {name: '',};}onHandleChange = e => {const val = e.target.value;this.setState({name: val,});};render() {const newProps = {name: {value: this.state.name,onChange: this.onHandleChange,},};return <WrappedComponent {...this.props} {...newProps} />;}};

我們將 input 組件中 name props 的 onChange方法提取到了高階組件中,這樣就有效的抽象了同樣的state操作。

import React, { Component } from 'react';
import MyContainer from './MyContainer.jsx';@MyContainer
class MyInput extends Component {render() {return <input type="text" {...this.props.name} />;}
}export default MyInput;

參考鏈接

深入React技術棧?book.douban.comJavascript 中的裝飾器?aotu.io
90185c597c6d63a550b4c97124ca6601.png

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/272866.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/272866.shtml
英文地址,請注明出處:http://en.pswp.cn/news/272866.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

雜想 · 警醒

今天無意間看到CSDN上一位大牛師姐的博客&#xff0c;真的是好驚訝啊&#xff01;很多時候總是太過自以為是&#xff0c;以為自己做不到的事情別人也很難做到。恰恰相反&#xff0c;成功總是伴隨那些謙遜、努力、認真的人的&#xff01;曾幾何時&#xff0c;自己或許也是一個認…

好好的活,簡簡單單過!

生命&#xff0c;每個人只有一次&#xff0c;或長或短&#xff1b;生活&#xff0c;每個人都在繼續&#xff0c;或悲或歡&#xff1b;人生&#xff0c;每個人都在旅途&#xff0c;或起或伏。人無完人&#xff0c;事無完美&#xff0c;有些小人&#xff0c;你不須計較&#xff0…

SQL Server 中創建數據庫、更改主文件組示例

以下示例在 SQL Server 實例上創建了一個數據庫。該數據庫包括一個主數據文件、一個用戶定義文件組和一個日志文件。主數據文件在主文件組中&#xff0c;而用戶定義文件組包含兩個次要數據文件。ALTER DATABASE 語句將用戶定義文件組指定為默認文件組。然后通過指定用戶定義文件…

lunixs 退出mysql_MySQL的基本操作

1、數據庫登錄格式&#xff1a;mysql -h主機地址 -u用戶名 -p用戶密碼 -P端口 -D數據庫 -e “SQL內容”[rootwulaoer ~]# mysql -uroot -p2、修改密碼格式&#xff1a;mysqladmin -u用戶名 -p舊密碼 password 新密碼[rootwulaoer ~]# mysqladmin -uroot password 123456注&…

交際中你所不知道的說話的12個技巧!

1.“有一說一”和“自以為是”不同&#xff0c;別把粗魯當成真性情與 他人相處&#xff0c;要遵循一個基本原則&#xff1a;己所不欲&#xff0c;勿施于人。你可以真摯地描述自己的感受&#xff0c;前提是不要帶有攻擊性&#xff0c;至于對他人做出評價和判斷&#xff0c;則需要…

寬客的人amp;amp;事件映射

看完《寬客》這本書&#xff0c;敘事介紹20世紀華爾街對沖基金、股票、投資者依賴股市從直覺交易數學家的早期演化、物理學家用數學模型開發過程中的交易&#xff0c;這些進入金融數學家、物理學家依靠大數據分析、稍縱即逝的交易機會來買入賣出&#xff1b;同一時候找出交易模…

社交中的黃金法則,你要細細體會品味

1&#xff0c;不要急著用你的嘴&#xff0c;來為你的眼睛辯護什么。因為天知道你的嘴說出什么來。2&#xff0c;假如有人朝你扔石頭&#xff0c;就收起來。因為那會是你日后建高樓的基石。3&#xff0c;能忍則忍&#xff0c;忍不了就改變&#xff0c;改變不了就認了哇。4&#…

Jsp筆記(1)

1. jsp頁面中出現中文亂碼怎么解決&#xff1f; 1 <% page contentType"text/html; charsetGB2312"%> 2 <% page language"java" import"java.util.*" pageEncoding"UTF-8"%> 用上面這兩行代碼去替換自動生成的代碼&#…

這些略帶幽默句子,笑的同時多感悟一下吧(收好)

1、窮&#xff0c;并不可怕&#xff0c;我怕窮著窮著就習慣了。2、世界上唯一不用努力&#xff0c;就能得到的只有年齡。3、我是你轉身就忘的路人甲&#xff0c;憑什么陪你蹉跎年華到天涯&#xff1f;4、世界上最快樂的事情就是吃&#xff0c;第二快樂的是待會再吃。5、琴棋書畫…

java 異常機制_深入理解Java異常處理機制

一、引子try…catch…finally恐怕是大家再熟悉不過的語句了&#xff0c;而且感覺用起來也是很簡單&#xff0c;邏輯上似乎也是很容易理解。不過&#xff0c;我親自體驗的“教訓”告訴我&#xff0c;這個東西可不是想象中的那么簡單、聽話。不信&#xff1f;那你看看下面的代碼&…

ThreadLocal http://blog.jobbole.com/20400/

d轉載于:https://www.cnblogs.com/hansongjiang/p/4875332.html

做人:失信是最大的破產!

一個人最大的破產是信用的破產&#xff01;哪怕你一無所有&#xff0c;但只要信用還在&#xff0c;就還有翻身的本金。保護好信用&#xff0c;珍惜別人給你的每一次信任&#xff01;因為有時候我們只有一次機會&#xff01;朋友有時候就像鈔票&#xff0c;有真也有假。我們需要…

c#和WIN32 調用

作者&#xff1a;劉鐵猛日期&#xff1a;2005-12-20關鍵字&#xff1a;C# .NET Win32 API版權聲明:本文章受知識產權法保護&#xff0c;如果閣下想轉載,在轉載的時候煩勞閣下連同在下的姓名一起轉載,并向bladeytom.com發一個Mail,我很想知道我的文章都去哪里了.謝謝.小序Win32 …

【干貨】微信公眾號運營必備工具(完整版)

做微信公眾號運營最基本的要素有兩點&#xff1a;一是內容要強大&#xff08;內&#xff09;&#xff0c;二是排版要美觀&#xff08;外&#xff09;。做好前者&#xff0c;你需要有充足的知識儲備以及精彩獨到的文筆作為支撐&#xff0c;而做好后者則相對簡單許多&#xff0c;…

java定時線程池_java 定時器線程池(ScheduledThreadPoolExecutor)的實現

前言定時器線程池提供了定時執行任務的能力&#xff0c;即可以延遲執行&#xff0c;可以周期性執行。但定時器線程池也還是線程池&#xff0c;最底層實現還是ThreadPoolExecutor&#xff0c;可以參考我的另外一篇文章多線程–精通ThreadPoolExecutor。特點說明1.構造函數public…

iOS 關于關鍵字高亮

- (NSMutableAttributedString *)colorStr: (NSString *)originalStr // originalStr : 需要高亮傳入的字符串 { NSMutableAttributedString *dataStr [[[NSMutableAttributedString alloc] initWithString:originalStr] autorelease]; for (int i 0; i < originalStr.l…

成功,要“借力”,不要“盡力”(深刻!)

01每個人都喜歡成功&#xff0c;卻又時常感覺自己力不從心一個小男孩在院子里搬一塊石頭&#xff0c;父親在旁邊鼓勵&#xff1a;“孩子&#xff0c;只要你全力以赴&#xff0c;一定搬得起來&#xff01;”但是石頭太重&#xff0c;最終孩子也沒能搬起來。他告訴父親&#xff1…

java 網站開發實例_完整的javaweb項目

【實例簡介】主要功能有以下幾個&#xff1a;1.用戶注冊 2.用戶登錄 3.用戶列表展示 4.用戶信息修改 5.用戶信息刪除【實例截圖】【核心代碼】javaweb└── javaweb├── src│ └── com│ ├── dao│ │ ├── UserDaoImpl.java│ │ └── UserDao.java│…

Nginx+Php-fpm+MySQL+Redis源碼編譯安裝指南

說明&#xff1a;本教程由三部分組成如下&#xff1a; 1. 源碼編譯安裝Nginx 2. 源碼編譯安裝php以及mysql、redis擴展模塊 3. 配置虛擬主機 文中所涉及安裝包程序均提供下載鏈接&#xff0c;歡迎使用 執行環境以及前置條件&#xff1a;Ubuntu 12.04 LTS 已安裝…

NetFramework各個版本的特性筆記

我的博客&#xff1a;http://www.cnblogs.com/hgmyz/p/6916064.html公式記憶&#xff1a;.Net 2.0CLRBCLC#(VB.Net)Win FormWeb Form.Net 3.0.Net 2.0WCFWPFWFWCS.Net 3.5.Net 3.0Asp.Net AjaxSliverlightLinq.Net 4.0 增加了并行的支持&#xff0c;與舊的Framwork并行工作。默…