关于 react createFactory 的小技巧

官网说明

React.createFactory

factoryFunction createFactory(
  string/ReactClass type
)

上面函数返回一个用于生成给定类型的ReactElement的函数，类似于 React.createElement。对于type参数可以是html标签名字（例如：“div”，“li”, 运行以后生成一个 jsx 对象

官方🌰

创建一个 ul

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById(content));

先介绍基本用法，然后介绍和 hoc 结合在一起使用

结合 hoc

我最近写组件的时候 要给所有的页面加上返回的主页的头，再想怎么最省事。懒病发作

方法一 传统组件形式

// Layout 是头部组件
 < Layout>{this.props.children}</Layout>

但是每个页面都要加 layout 头，太烦了太烦了

方法二 extends

import React, { Component } from 'react'
// Component.js
class App extends Component {
     
      render () {
        return (
            <Layout/>
              {this._render()}
            </Layout>
        )
      }
  }
}
export default Hoc App
// 调用
import  Component from  './Component'
class Home extends Component {
    ...
    _render () => hello
}

这样也是 ok 的但感觉总有点奇怪没有 render 方法

方法三 hoc + createFactory

import React, { Component, createFactory } from 'react'
import { compose  } from 'recompose'
const app = (BaseComponent) => {
  return class extends Component {
      handleClick = () => {
        this.props.history.goBack('/home')
      }
      render () {
        return <div>
          <Layout>
            <BaseComponent {...this.props} {...this.state} />
          <Layout/>
        </div>
      }
  }
}
// const Hoc = (c) => createFactory(app(c))
export default compose(
    createFactory, app
)
// route 这边可以直接这么调用
import { Hoc } from 'lib'
const routes = [
  {
    title: '首页',
    path: '/home',
    component: Hoc(Home),
    exact: true
  }
  ]

这里我为何用 createFactory 这么包一层呢，正常我们不包的话用的时候估计要这样使用

const Button = Hoc(<BaseComponent />)
<Button>1234</Button>

这样也是 ok 的，但是你要多个变量来接收，对于取名强迫症的我是无法接受的，特别有很多路由的情况下，所以综上对比方法三最好用

结语

这个小技巧只是我无意中发现的，估计很多人都已经用上了甚至。但是我还是小小的总结一下，😆😆