React Higher Order Components 初探觀念

React Higher Order Components 初探觀念
  1. javascript
    /
  2. React Higher Order Components 初探觀念

May 08, 2018

·

4 min read

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

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"));
[範例連結 ](https://codepen.io/chu1228/pen/vjpRrW?editors=0010 "範例連結")

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"));
[範例連結 ](https://codepen.io/chu1228/pen/VxyQOa?editors=0010 "範例連結")

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

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

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

react.js