換了工作環境,接觸了全新的專案,一打開react專案,恩…滿滿的stateless component,稍微整理一下相關資訊。這邊要來介紹使用stateless component的時候,常會搭配使用的Higher Order Components,之前有看到「高階組件」這區塊,被他名字誤會了,實際上一點也不高階,他就只是一個function 函式,接受參數元件然後回傳全新元件,簡易的範例如下。

React官方說明 - 高階組件是一個函數,能夠接受一個組件並返回一個新的組件。

react

stateless component

ps.以下混雜使用es6 解構、展開運算子(Spread Operator)寫法,在react中處理大量props很方便。

//stateless component  預設props會作為參數
function NameCard(props){
return <h2>Hello,{props.name}</h2>
}

//接到一個參數的元件 然後加上props 回傳有加入props的元件
function Warpper(Item){
const props = {name:'Chu'}
return <Item {...props}/>
}
const element = Warpper(NameCard);

ReactDOM.render(element, document.getElementById('root'));


範例連結

HOC component

ps.es6 arrow function 產生 return function 邏輯

const Wrapper = (a) => (b)=>{
console.log(a,b)
}

// babel 會編譯為如下
var Wrapper = function Wrapper(a) {
return function (b) {
console.log(a, b);
};
};

接下來就改使用return function 來傳遞額外資料

//建立 Person 元件
function Person(props) {
const {name,age,status} = props;
return <h1>Hello, {name} is {age} years old,ohhh and so {status}</h1>;
}

//建構包裹的function
const Warpper = (child) => (props)=>{
//加入物件 status 判斷age 大於18 true=>產生old false =>產生young
props = {...props, status: props.age>18?'old':'young'};
return (
child({...props})
)
}

const person1 = {name:'ian',age:28};
const element = Warpper(Person)(person1);

ReactDOM.render(element, document.getElementById('root'));


範例連結

核心概念就是將元件包裹上我們想要增加的屬性,舉凡是props、lifecycle等等,我們可以將許多元件共用的函式,整理建立一個專門用來處理HOC 的function,然後各元件重複使用。redux的connect也是同樣使用HOC的觀念,將mapStateToProps、mapDispatchToProps在處理成我們要的props傳遞給元件。

主要是網路看不到stateless component這方面的介紹,所以才寫這篇解釋一下下HOC在幹嘛。

以上如果有錯誤,再麻煩留言提醒。感謝!