React——第三阶段（1）（高阶组件、context）

转载

wx60d4764eb475e 2022-03-29 15:16:06

文章标签 ajax 加载字段 文章分类 代码人生

根据胡子大哈的文章学习，感谢大胡分享

胡子大哈-高阶组件、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>即可获取