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 复制代码