對比分析元件邏輯復用的三種方案

一、復用元件邏輯的方案

1、通過高階元件hoc復用元件邏輯

import react from

'react'
// 高階元件
const
withmouse
=(component)
=>
}handlemousemove
=(event)
=>)}
render()
} onmousemove=
>
/>
<
/div>)}
}return withmousecomponent
}const
=(props)
=>
= props.mouse // 接收 mouse 屬性
return
(}>
the mouse position is(,
)<
/h1>
<
/p>
<
/div>)}
export
default
withmouse
// 返回高階函式

我的理解：

通過高階元件來復用元件公共邏輯的做法，實際上就是一種裝飾模式，即將所要使用的元件放到公共函式中裝飾一番，返回乙個具有公共邏輯的高階元件，其實還是那個元件，只不過「趟了一趟渾水」（函式封裝），粘帶了一些「泥潭」（公共邏輯）中「泥」（具體公共邏輯）而已。

import react from

'react'
import proptypes from
'prop-types'
class
mouse
extends
react.component
}handlemousemove
=(event)
=>)}
render()
} onmousemove=
>
<
/div>)}
}mouse.proptypes =
const
=(props)
=>
(}>
<
/p>
)=>
the mouse position is(,
)<
/h1>}/
>
<
/div>
)/**
* 即，定義了 mouse 元件，只有獲取 x y 的能力。
*/export

3、hook來實現元件的邏輯復用

import

from
'react'
function
usemouseposition()
// 繫結事件
document.body.
addeventlistener
('mousemove'
, mousemovehandler)
// 解綁事件
return()
=> document.body.
removeeventlistener
('mousemove'
, mousemovehandler)},
)return
[x, y]
}export
default usemouseposition

import react from

'react'
import usemouseposition from
'../customhooks/usemouseposition'
function()
}>
the mouse position is 
<
/p>
<
/div>
}export

react hook的這種處理，實際上就是把公共邏輯部分完全提取出去，通過傳入引數，返回結果的形式，處理了公共邏輯。這其實也正是函式的思想，在不使用hook處理的情況下，開發中有些公共邏輯的處理，也會封裝成工具函式。

在我看來，這種復用公共邏輯的方式，就是將工具函式hook化。

1、通過高階元件hoc復用元件邏輯

2、通過render props實現元件邏輯復用

3、hook來實現元件的邏輯復用

工廠模式 三種工廠模式對比分析

將構建過程封裝的好處不僅可以降低耦合如果某個產品構造方法相當複雜，使用工廠模式可以大大減少 重複。總而言之，簡單工廠模式就是讓乙個工廠類承擔構建所有物件的職責。呼叫者需要什麼產品，讓工廠生產出來即可。它的弊端也顯而易見 一是如果需要生產的產品過多，此模式會導致工廠類過於龐大，承擔過多的職責，變成超級...

Apache2 三種MPM對比分析

就最新版本的web伺服器apache 版本是apache 2.4.10，發布於2014年7月21日 來說，一共有三種穩定的mpm multi processing module，多程序處理模組 模式。它們分別是prefork，worker和event，它們同時也代表這apache的演變和發展。檢視我...

流式大資料處理的三種框架對比分析

許多分布式計算系統都可以實時或接近實時地處理大資料流。本文將對三種apache框架分別進行簡單介紹，然後嘗試快速 高度概述其異同。apache storm 在storm中，先要設計乙個用於實時計算的圖狀結構，我們稱之為拓撲 topology 這個拓撲將會被提交給集群，由集群中的主控節點 master...