欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

談?wù)凴eact中的Render Props模式

 更新時間:2018年12月06日 14:05:06   作者:小小小小小亮  
這篇文章主要介紹了談?wù)凴eact中的Render Props模式,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

概述

Render Props模式是一種非常靈活復(fù)用性非常高的模式,它可以把特定行為或功能封裝成一個組件,提供給其他組件使用讓其他組件擁有這樣的能力,接下來我們一步一步來看React組件中如何實現(xiàn)這樣的功能。

簡要介紹:分離UI與業(yè)務(wù)的方法一直在演進(jìn),從早期的mixins,到HOC,再到Render Prop,本文主要對比HOC,談?wù)凴ender Props

1 . 早期的mixins

早期復(fù)用業(yè)務(wù)通過mixins來實現(xiàn),比如組件A和組件B中,有一些公用函數(shù),通過mixins剝離這些公用部分,并將其組合成一個公用集合,然后將這個集合傳遞給每個組件調(diào)用。

//公有的函數(shù)部分
const someMixins={
 printColor(){
 console.log(this.state.color);
 }
 printWeight(){
 console.log(this.state.weight);
 }
}
class Apple extends React.Component{
 //僅僅作為演示,mixins一般是通過React.createClass創(chuàng)建,并且ES6也沒有key:value這種寫法
 mixins:[someMixins]
 constructor(props){
 super(props);
 this.state={
  color:'red',
  weight:'100g'
 }
 this.printColor=this.printColor.bind(this);
 }
 render(){
 return <div className="m-box" onClick={this.printColor}>
    這是一個蘋果
   </div>
 }
}
class Banana extends React.Component{
 mixins:[someMixins]
 constructor(props){
 super(props);
 this.state={
  color:'yellow',
  weight:'200g'
 }
 this.printColor=this.printColor.bind(this);
 }
 render(){
 return <div className="m-box" onClick={this.printColor}>
    這是一個香蕉
   </div>
 }
}

 上述的例子中,Apple和Banana都具有printColor和printWeight方法,通過mixins分離公共業(yè)務(wù)。mixins已經(jīng)在React16.0版本移除,這里僅僅做一個介紹。

2 . HOC

HOC簡單理解就是組件工廠,接受原始組件作為參數(shù),添加完功能與業(yè)務(wù)后,返回新的組件。下面來介紹HOC參數(shù)的幾個例子。

(1)參數(shù)僅為原始組件,比如:

const redApple = withFruit(Apple);

 (2)參數(shù)為原始組件和一個對象,比如:

const redApple = withFruit(Apple,{color:'red',weight:'200g'});

但是這種情況比較少用,如果對象中僅僅傳遞的是屬性,其實完全可以通過組件的props實現(xiàn)值的傳遞,我們用HOC的主要目的是分離業(yè)務(wù),關(guān)于UI的展示,以及一些組件中的屬性和狀態(tài),我們一般通過props來指定比較方便

(3)參數(shù)為原始組件和一個函數(shù),比如:

const redApp=withFruit(App,()=>{console.log('I am a fruit')})

這種是HOC的典型例子,原始組件參數(shù)表示UI部分,函數(shù)參數(shù)表示處理邏輯,在HOC工廠中進(jìn)行耦合后生成新的組件。

(4)柯里化

最常見的是僅以一個原始組件作為參數(shù),但是在外層包裹了業(yè)務(wù)邏輯,比如react-redux的conect函數(shù)中:

class Admin extends React.Component{

}
const mapStateToProps=(state)=>{
 return {
 };
}
const mapDispatchToProps=(dispatch)=>{
 return {

 }
}

const connect(mapStateToProps,mapDispatchToProps)(Admin)

 這里不是嚴(yán)格的柯里化,但是思想是一樣的,在HOC的工廠函數(shù)中在包一層父函數(shù),用于指定業(yè)務(wù)邏輯。

3 . HOC的缺點

下面我們來看看HOC的缺點:

(1)難以溯源,且存在屬性覆蓋問題

如果原始組件A,先后通過工廠函數(shù)1,工廠函數(shù)2,工廠函數(shù)3….構(gòu)造,最后生成了組件B,我們知道組件B中有很多與A組件不同的props,但是我們僅僅通過組件B,并不能知道哪個組件來自于哪個工廠函數(shù)。同時,如果有2個工廠函數(shù)同時修改了組件A的某個同名屬性,那么會有屬性覆蓋的問題,會使得前一個工廠函數(shù)的修改結(jié)果失效。

(2)HOC是靜態(tài)構(gòu)建的

所謂靜態(tài)構(gòu)建,也就是說生成的是一個新的組件,并不會馬上render,HOC組件工廠是靜態(tài)構(gòu)建一個組件,這類似于重新聲明一個組件的部分。也就是說,HOC工廠函數(shù)里面的聲明周期函數(shù),也只有在新組件被渲染的時候才會執(zhí)行。

(3)會產(chǎn)生無用的空組件

4. render props

class Cat extends React.Component {
 render() {
 const mouse = this.props.mouse;
 return (
  <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
 );
 }
}

class Mouse extends React.Component {
 constructor(props) {
 super(props);
 this.handleMouseMove = this.handleMouseMove.bind(this);
 this.state = { x: 0, y: 0 };
 }

 handleMouseMove(event) {
 this.setState({
  x: event.clientX,
  y: event.clientY
 });
 }

 render() {
 return (
  <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

  {/*
   Instead of providing a static representation of what <Mouse> renders,
   use the `render` prop to dynamically determine what to render.
  */}
  {this.props.render(this.state)}
  </div>
 );
 }
}

class MouseTracker extends React.Component {
 render() {
 return (
  <div>
  <h1>Move the mouse around!</h1>
  <Mouse render={mouse => (
   <Cat mouse={mouse} />
  )}/>
  </div>
 );
 }
}

上述是官網(wǎng)給出的例子,我們來看主要是部分是下面這兩句:

Class Mouse extends React.component{
 ...
 {this.props.render(this.state)}
 ...
}


......
<Mouse render={mouse => (
   <Cat mouse={mouse} />
  )}/>

在使用Mouse組件的時候,通過一個render屬性,傳遞一個可用組件Cat給父組件Mouse,而在Mouse組件中,可以將本身的state對象傳遞給Cat組件,Cat組件中的mouse屬性的值與Mouse父組件中的state相同。

精簡來說: 就是父組件可以將自己的state傳遞給子組件,而子組件可以根據(jù)父組件的state對象,來進(jìn)行render。

這樣做的好處是:

(1)不用擔(dān)心props的命名問題

(2)可以溯源,子組件的props一定是來自于直接父組件

(3)是動態(tài)構(gòu)建的。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • React.memo函數(shù)中的參數(shù)示例詳解

    React.memo函數(shù)中的參數(shù)示例詳解

    這篇文章主要為大家介紹了React.memo函數(shù)中的參數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 詳解React native fetch遇到的坑

    詳解React native fetch遇到的坑

    這篇文章主要介紹了詳解React native fetch遇到的坑,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • React無限滾動加載列表組件的封裝實現(xiàn)

    React無限滾動加載列表組件的封裝實現(xiàn)

    無限下拉加載技術(shù)是用戶在大量成塊的內(nèi)容面前一直滾動查看,本文主要介紹了React無限滾動加載列表組件的封裝實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
    2023-12-12
  • React Render Props共享代碼技術(shù)

    React Render Props共享代碼技術(shù)

    render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的技術(shù)。簡單來說,給一個組件傳入一個prop,這個props是一個函數(shù),函數(shù)的作用是用來告訴這個組件需要渲染什么內(nèi)容,那么這個prop就成為render prop
    2023-01-01
  • 基于React.js實現(xiàn)簡單的文字跑馬燈效果

    基于React.js實現(xiàn)簡單的文字跑馬燈效果

    剛好手上有一個要實現(xiàn)文字跑馬燈的react項目,然后ant-design上面沒有這個組件,于是只能自己手?jǐn)]一個,文中的實現(xiàn)方法講解詳細(xì),希望對大家有所幫助
    2023-01-01
  • React BootStrap用戶體驗框架快速上手

    React BootStrap用戶體驗框架快速上手

    這篇文章主要介紹了React BootStrap用戶體驗框架快速上手的相關(guān)知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-03-03
  • React腳手架config-overrides.js文件的配置方式

    React腳手架config-overrides.js文件的配置方式

    這篇文章主要介紹了React腳手架config-overrides.js文件的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React 組件轉(zhuǎn) Vue 組件的命令寫法

    React 組件轉(zhuǎn) Vue 組件的命令寫法

    本文先介紹兩個框架的組件共性和不兼容的地方,再介紹react-to-vue的使用和原理,需要的朋友可以參考下
    2018-02-02
  • 詳細(xì)聊聊React源碼中的位運算技巧

    詳細(xì)聊聊React源碼中的位運算技巧

    眾所周知在React中,主要用到3種位運算符 —— 按位與、按位或、按位非,下面這篇文章主要給大家介紹了關(guān)于React源碼中的位運算技巧的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • React Hook 父子組件相互調(diào)用函數(shù)方式

    React Hook 父子組件相互調(diào)用函數(shù)方式

    這篇文章主要介紹了React Hook 父子組件相互調(diào)用函數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論