高阶组件与context

[shen1992]

目录：

• 1.高阶组件
• 2.context介绍
• 3总结

1.高阶组件

高阶组件，一个挺起来很高大上的词汇，但是使用起来却是相当简单。

高阶组件是一个函数，传给它一个组件，它返回一个新的组件

const newComponent = higherOrderComponent(OldComponent)

其实现原理

import React, { Component } from 'react'

export default (WrappedComponent, name) => {
  class NewComponent extends Component {
    constructor () {
      super()
      this.state = { data: null }
    }

    componentWillMount () {
      let data = localStorage.getItem(name)
      this.setState({ data })
    }

    render () {
      return <WrappedComponent data={this.state.data} />
    }
  }
  return NewComponent
}

它其实就是对WrappedComponent组件进行一些封装，比如说有一些公共的数据可以放在高级组件里面处理，然后传递给WrappedComponent，这样WrappedComponent就可以通过this.props拿到了。

这样做的好处是如果有多个组件需要相同的数据，可以把组件传递给高级组件即可。

2.context介绍

react是单向数据流，从父组件传入子组件。试想一下，当组件的层级非常的深，数据一层一层传递下去，这将会是一场灾难，react自身提供的解决办法就是使用context!

class Index extends Component {
 static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
      </div>
    )
  }
}

这样子组件就可以通过this.context拿到了。

class Header extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
    )
  }
}

但是不建议在开发中使用context，因为我们希望组件是一个纯组件，给其传入什么样的数据，它就会显示什么样的UI，当你使用了context，就意味着别人想复用你的组件就必须先定义context，这无疑不是一种优雅的做法。

但是这个功能确实很实用，于是就有人把context的部分抽象出来。形成了react-redux。

总结

这两个方法虽然不常用，但是在某些特定的场景下实用会有一个很好的效果。