React——第三阶段(1)(高阶组件、context)

根据胡子大哈的文章学习,感谢大胡分享
胡子大哈-高阶组件、context

高阶组件

什么是高阶组件

高阶组件就是一个函数,传给他一个组件,他返回一个新的组件。这个新组件会使用传入的组件作为其子组件。

高阶组件体现的是——设计

核心思想:抽象具有相同需求逻辑的组件,用函数处理

例子:
可能有很多组件有这样需求:“在组件挂载阶段,从LocalStorage加载某字段”
定义高阶组件src/Component/wrapWithLoadData.js

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
}

使用高阶组件:

import wrapWithLoadData from './wrapWithLoadData'

class InputWithUserName extends Component {
  render () {
    return <input value={this.props.data} />
  }
}

InputWithUserName = wrapWithLoadData(InputWithUserName, 'username')
export default InputWithUserName

可以看到,InputWithUserName组件,在内部其从LocalStorage 加载字段的逻辑,直接是用的高阶组件包装。不用自己再写了。

那么高阶组件的作用也就一目了然了:组件之间代码复用。
组件们可能有某些相似的逻辑,把这些逻辑抽象,做成高阶组件,来达到复用效果。在高阶组件内部,通过props把数据传递给被包装的组件。

高阶组件的灵活性

高阶组件本质是装饰者模式,通过组合方式,达到很高的灵活性。

比如,上边的InputWithUserName不从LocalStorage加载,而是使用Ajax请求从服务器加载。那么,不需要修改组件逻辑,而是新写一个wrapWithAjaxData的高阶组件,然后包装InputWithUserName组件就可以了。

多层高阶组件

两个高级组件:wrapWithLoadData``wrapWithAjaxData
其中wrapWithAjaxData具体内容

...
      componentWillMount () {
        ajax.get('/data/' + this.props.data, (data) => {
          this.setState({ data })
      })    
...

我们的逻辑是,先从localStorage中拿到username,然后根据username从后台拿到用户的具体数据。
修改InputWithUserName

import wrapWithLoadData from './wrapWithLoadData'
import wrapWithAjaxData from './wrapWithAjaxData'

class InputWithUserName extends Component {
  render () {
    return <input value={this.props.data} />
  }
}

InputWithUserName = wrapWithAjaxData(InputWithUserName)
InputWithUserName = wrapWithLoadData(InputWithUserName, 'username')
export default InputWithUserName

React.js的context

全局空间:父组件设置context并放入某状态,其下每个孩子组件都可以从其取得状态,而不用一层一层的向下传递。(更改了,就会重新渲染一遍)
爷爷组件是访问不到context的。

写法

static childContextTypes = {
  <key>: PropTypes.<类型>
}

getChildContext () {
  return {
    <key>: <value>
  }
}

childContextTypes:是为context中的字段设置类型检查,必须设置
getChildContext():用来设置组件的context
若在子组件要使用,可以写

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

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

contextTypes首先要类型检查,必须的
this.context.<key>即可获取

总结

context打破了组件之间必须通过props传递状态的过程,类似一个全局变量空间,其内容能被随意接触修改。这样导致程序不可控。

这种机制,对于状态管理有很大帮助,redux-react就是充分利用了这个机制。

一般我们动手写context,而是利用第三方状态管理库。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 119,493评论 16 133
  • 高阶组件是对既有组件进行包装,以增强既有组件的功能。其核心实现是一个无状态组件(函数),接收另一个组件作为参数,然...
    柏丘君阅读 2,435评论 0 6
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 6,606评论 2 34
  • "柬埔寨供奉的神,恶神和善神是平等存在的。" 很长一段时间,我无法让自己相信,这个世界里有那么多丑陋的东西。看到那...
    松鼠丢铥阅读 66评论 0 0
  • 今天特殊原因,加班到很晚,选择继续阅读在公司读的书,无量之网 **读的什么书:《无量之网》 **阅读有效时间:30...
    小猫IDA阅读 348评论 0 49