React之高階組件

React之高階組件

注意：本章節運行環境在React項目構建章節之上。

高階組件

1. let Root = props => <div>{props.schoolName}</div>;如果要在Root組件進行增強，例如將Root外部再加入其它div。

   import React from 'react';
   import ReactDom from 'react-dom';
   
   let Wrapper = function (Component){
   function _wrapper(props){
       return (
       <div>
           {props.scholName}<hr />
           <Component />
       </div>
       );
   }
   return _wrapper;
   }
   let Root = props => <div>Root</div>;
   
   let NewComp = Wrapper(Root) //返回一個包裝後的元素
   
   ReactDom.render(<NewComp scholName="xdd" />,document.getElementById("root"));
   

   • 在_wrapper(props)中本身就是一個無狀態組件，內部包囊這一個傳入的組件，可以看做增強了傳入的組件。傳入的組件作爲返回的新組件的子組件

2. 簡化高階組件

   import React from 'react';
   import ReactDom from 'react-dom';
   
   let Wrapper = Component => props => (
       <div>
           {props.scholName}<hr />
           <Component />
       </div>
       );
   
   let Root = props => <div>Root</div>;
   
   let NewComp = Wrapper(Root) //返回一個包裝後的元素
   
   ReactDom.render(<NewComp scholName="xdd" />,document.getElementById("root"));
   

裝飾器

• 新版ES2016中增加了裝飾器的支持，因此可以使用裝飾器來改造上面的代碼。
• ES 2016的裝飾器只能裝飾類，不能裝飾函數

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = Component => props => (
      <div>
        {props.scholName}<hr />
        <Component />
      </div>
    );


@Wrapper // 等價於 A = Wrapper(A)
class A extends React.Component{
  render(){
    return <div>A</div>
  }
}

ReactDom.render(<A scholName="B" />,document.getElementById("root"));

• 讓Toot也顯示出schoolName的值

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = Component => props => (
      <div>
        {props.scholName}<hr />
        <Component {...props} />
      </div>
    );


@Wrapper // 等價於 A = Wrapper(A)
class A extends React.Component{
  render(){
    return <div>A {this.props.scholName}</div>
  }
}

ReactDom.render(<A scholName="B" />,document.getElementById("root"));

• 使用<Component {...props} />相當於給組件增加了屬性

帶參裝飾器

• 上面例子中如果想給裝飾器添加其他參數，可以如下實現

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = id => Component => props => (
      <div id = {id}>
        {props.scholName}<hr />
        <Component {...props} />
      </div>
    );


@Wrapper("xdd") // 帶參裝飾器
class A extends React.Component{
  render(){
    return <div>A {this.props.scholName}</div>
  }
}

ReactDom.render(<A scholName="B" />,document.getElementById("root"));