React無狀態組件與高階組件

無狀態組件在需要生命周期時，可以通過高階組件來實現

如下：

1.無狀態組件作為高階組件的參數，並在最后通過調用高階函數  導出 一個高階組件

//這是一個無狀態組件 TableComponent 
import React from 'react'
import { Table } from './table'   // 高階函數
const TableComponent = (props) => {
        return (
            <div>
                
                {props.dataSource}
            </div>
        )
}
export default Table(TableComponent);

2.寫一個高階組件，里面寫任何需要的生命周期

import React from 'react'
export const Table = (ComposedComponent) => {
    return class extends React.Component {
      constructor(props) {
          super(props)
      }  
      componentDidMount() {
          console.log('componentDidMount');
      }
      render() {
        return (
            <ComposedComponent {...this.props}/>
        )
      }
    }      
}

 

3.直接在需要的地方引入高階組件調用即可，跟其他組件引用一樣