復用是元件化開發體系的立命之本，可以說元件化的初衷就是為了復用性。但是元件化的復用方式也存在一定的問題，其中拆分粒度就是其中乙個繞不開的話題，今天咱們就來講一講 react 當中的乙個不太常用的 api：cloneelement，他如何幫組我們更好得進行元件拆分。
假如我們有乙個layout元件，那麼一般來說這個元件主要接收的就是children，把它放在主要內容的部分，然後元件本身的節點來控制布局，那麼這個時候如果我們這個布局包含兩個部分呢，比如還有乙個header部分，是跟主要內容有明顯區分的。
比如：
那麼我們這個時候會如何設計這個元件呢？
function
layout() div>
div>
)}複製**
layout的props傳入進來，然後按照元件的寫法把它寫入到元件渲染內容之中。
我們想要使用這個元件，一般會像下面這樣：
function
header()
;header=>
content herediv>
layout>
複製**
header的時候指定props
如果header有props，那麼就我們只能硬編碼在layout裡面，不能在使用header元件的地方進行宣告，所以如果我們想要復用乙個header元件，我們可能需要再宣告乙個元件，比如我們給header元件乙個叫做message的prop用來指定顯示的文字內容
function
header() h1>
}複製**
function
bigheader()
複製**
props較多的情況下，也可以達到一定的復用效果，但是追求極致的我們肯定不希望僅僅侷限於此。
那麼有沒有辦法讓我們可以在使用時能指定props呢？答案肯定是有的，我們可以將layout的header這個prop接收的不是元件本體，而是具體的reactelement。
function
layout() div>
classnmae='content'>div>
div>
)}複製**
props
}>
content here
複製**
reactelement。因為我們大部分時候寫react元件的時候用的都是jsx，所以很多同學可能並不知道reactelement的存在。
其實jsx經過babel翻譯之後得到的是如下**：
// jsx
;id='id'>contentdiv>
// js
react.createelement('div', , 'content')
複製**
最後他返回的是乙個叫做reactelement型別的物件，他會包含後續 react 渲染過程中需要用到的乙個節點包含的所有資訊，我們的props.children其實就是最典型的reactelement。
所以在上訴例子中，我們傳入的header就是乙個reactelement，所以可以直接作為其他節點的children而使用。
同時使用這種方式我們還獲得來乙個非常大的優勢，那就是我們甚至可以重新定義乙個元件，就可以直接使用layout。
content here
複製**
那麼是否到這裡我們就大功告成來呢？no，no，no，我們還是有值得優化的地方。
試想一下，如果我們的layout中接收來header是乙個節點，但是呢他希望對傳入的元件的一些props有強制的要求呢？比如我們的header元件如果還有另外乙個prop叫color，用來指定文字內容的顯示顏色：
function
header() }>h1>
}複製**
layout要求所有傳入的header必須顏色是green，顯示我們也可以在使用header元件的時候自己指定這個prop，但是如果我們需要強制指定的prop很多，而且使用layout的地方也很多，那麼明顯我們會寫很多重複**，而且如果後面我們需要修改這個要求的時候也會導致多次修改，甚至有些地方忘了修改而導致 bug。那麼這時候我們該怎麼做呢？
我們可以使用乙個 api，這個 api 並不常用，但是在這種場景下，他卻非常有用，這就是react.cloneelement，我們來修改一下layout
function
layout() )}
div>
classnmae='content'>div>
div>
)}複製**
header他的props.color就永遠都是green。那麼這個 api 是啥意思呢？
顧名思義，他是用來轉殖乙個reactelement,他接收三個引數，第乙個是目標element，第二個是props，第三個是children。可見他跟createelement非常像，唯一的區別是第乙個引數從元件變成來節點。
他做的事情其實就是拷貝目標element，並把後面兩個引數覆蓋原element的props，以此建立乙個新的reactelement。
那麼到此，我們的優化過程也差不多來，當然 demo 顯然是非常簡單的**，現實中的問題往往要複雜很多，比如接收的如果不是乙個reactelement而是陣列，字串該如何處理。那麼這些問題在這裡就不再繼續深入來，留給各位小夥伴自己去思考吧，畢竟萬變不離其宗，知道了核心思路之後，其他問題也就可以迎刃而解來。
react 中元件狀態的一些理解
元件狀態 即state 只有當state發生變化時，元件才會更新。當乙個html標籤的值依賴於state的值得時候，如果state的值沒有更新時，這個標籤的值無論如何也是不會更新的。看下面示例 class test extends react.component render this.state ...
元件化程式設計一些思考
你想修一棟漂亮的房子，元件就比乙個書桌，乙個房子有幾個房間，需要幾個書桌，也就是幾個元件。系統好比乙個路由器，每個房間都需要wifi,乙個路由器其實也夠用，當然每個房間也可以單獨安裝但是成本太高。靜態幫助函式這種 片段，好比螺絲刀工具，可能電視機 冰箱 路由器都需要，工具太多很難找，分不同的工具箱裝...
labview一些元件
在controls 即控制項選板 modern 即現代 decorations 即裝飾 horizontal smooth box，然後設為最底層就好顏色盒，將輸入數值型控制項，右鍵替換為顏色盒，位置在前面板 新式 數值 帶邊框顏色盒 程式框圖 程式設計 對話方塊與使用者介面 顏色盒常量 或者程式設...