React 高级用法

React 组件逻辑的复用

• mixin 已经弃用（具体参考 vue mixin ，一样的）
• 高阶组件
• render prop

高阶组件 HOC

高阶组件不是一种功能，而是一种模式。

// 高阶组件不是一种功能，而是一种模式
const HOCFactory = (Component) => {
  class HOC extends React.Component {
    // 在此定义多个组件的公共逻辑
    render(){
      return <Component {...this.props} /> // 返回拼装的结果
    }
  }
  return HOC
}
const EnhancedComponent1 = HOCFactory(WrappedComponent1)
const EnhancedComponent2 = HOCFactory(WrappedComponent2)

示例参考 HOCDemo

redux 的 connect 就是一个高阶组件，应用如下

import { connect } from 'react-redux'

// connect 是高阶组件
const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoList)

export default VisibleTodoList

connect 源码结构如下

• connect 接收 mapStateToProps 和 mapDispatchToProps ，返回一个函数
• 该函数是一个高阶组件，接收 WrappedComponent ，返回新组件

export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
  class Connect extends Component {
    constructor () {
      super()
      this.state = {
        allProps: {}
      }
    }

    /* 中间省略 N 行代码 */

    render () {
      return <WrappedComponent {...this.state.allProps} />
    }
  }
  return Connect
}

render prop

Render Props 的核心思想是，通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件。

// Render Props 的核心思想
// 通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件
class Factory extends React.Component {
  constructor() {
    this.state = {
      /* state 即多个组件的公共逻辑的数据 */
    }
  }
  /* 修改 state */
  render(){
    return <div>{this.props.render(this.state)}</div>
  }
}
const App = () => (
    <Factory render={
        /* render 是一个函数组件 */
        (props)) => <p>{props.a} {props.b} ...</p>
    }/>
)

查看代码 demo

HOC 和 render prop 的对比

• HOC
  • 会增加层级关系，使结构变的复杂。但 HOC 可通过扩展参数实现更复杂的功能。（如 withMouse(App, a, b) 等这样扩展参数）
  • 需透传 props 给 wrapperComponent ，规范做不好的话，容易混乱
  • 比较好理解，易上手
• render props
  • 代码简洁 层级简洁
  • 不需要透传 props
  • 有一定学习成本 （render 和 prop 本来就是 React 的两个关键字，现在又组合起来，作为一个新的技术点，比较绕）

具体用哪个，自己根据实际情况判断