React 高階組件

高階組件就是一個函數，傳給它一個組件，它返回一個新的組件。 新的組件使用傳入的組件做爲子組件。

**高階組件的做用就是代碼複用，**能夠把組件之間可複用的代碼、邏輯抽離到高階組件當中。新的組件和傳入的組件經過props傳遞信息。

高階組件有助於提升咱們代碼的靈活性，邏輯的複用性。

高階組件就是在傳入組件和傳入組件的父組件之間新增一箇中間層

下列實例是一個簡單的獲取和保存聊天信息的高階組件應用

import React, { Component } from 'react'

const wrapWithLoadData = (WrappedComponent, localDataName) => {
    return class extends Component {
        componentWillMount () {
            this._getLocalData()
        }
        _getLocalData () {
            const data = localStorage.getItem(localDataName)
            try {
                this.setState({ data: JSON.parse(data) })
            } catch (err) {
                this.setState({ data })
            }
        }
        _postLocalData (data) {
            try {
                localStorage.setItem(localDataName, JSON.stringify(data))
            } catch (err) {
                localStorage.setItem(localDataName, `${ data }`)
            }
        }
        render () {
            const props = {
                data: this.state.data,
                saveData: this._postLocalData.bind(this),
                ...this.props   // 這裏的意思是把剩餘的參數原封不動的傳遞給被包裝的組件
            }
            return (
                <WrappedComponent { ...props } /> ) } } } export default wrapWithLoadData 複製代碼