这篇文章给大家带来的内容是关于react中的函数子组件和高阶组件的详解 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在接触过react项目后，大多数人都应该已经了解过或则用过了hoc(high-order-components)和facc(functions as child components)，因为这两个模式在大多数react的开源库里都存在。比如react-router里面的withrouter 就是典型的高阶组件，接受一个组件返回另外一个经过增强后的组件。而react-motion中的motion就是典型的facc的应用。
hoc和facc两者做的事也是非常相似的，都是类似设计模式里面的装饰者模式。都是在原有的实例或则单元上进行功能的增强。
当然不只是一些开源库中会使用，在平常的代码编写中，也有很多地方是适用于使用hoc和facc去封装一些逻辑。比如数据埋点，新特性的toggle，获取转换数据等。对于增强代码可读性和逻辑复用来说，非常有用的。
hoc高阶函数我们都用过，就是接受一个函数然后返回一个经过封装的函数：
const plus = first => second => (first + second)plus(1)(2) // 3
而高阶组件就是高阶函数的概念应用到高阶组件上:
const withclassname = composedcomponent => props => (   <composedcomponent {...props} classname='demo-class' />)// 使用const header = text => (<header>{text}</header>)const headerwitheclass = withclassname(header)
接受一个组件返回一个经过包装的新组件。在我们经常使用的withrouter就是在原有组件props上面在加上localtion等属性。除了添加props以外高阶组件还能做到：
在真正调用组件前后做一些事，比如埋点数据等
判断组件是否该render，或则应该render其他的东西，比如出错之后render错误页面
传递props并增加新的props
不render组件，转而做一些其他的事情，比如渲染一个外部的dom
对于上面的前三点都比较好理解，解释一下第4点。比如你在render了一个页面之后，需要改变一下页面的title.这是单页应用普遍存在的一个需求，通常你可以在具体router库中使用hook去实现。当然也可以通过hoc来实现：
const withtitlechange = composedcomponent => {  return class extends react.component {    componentdidmount () {      const { title } = this.props      document.title = title    }    render () {      const props = this.props      return <composedcomponent {...props} />    }  }}
facc同样facc也是用于增强原有组件能力的一种模式，其主要功能的实现在于react的props.children可以是任何东西，包括函数。我们可以拿上面class的例子用facc再实现一遍：
const classnamewrapper = ({ children }) => children('demo-class')// 使用const headwithclass = (props) => (  <classnamewrapper>    {(class) => <header classnmae={class} ></header>}  </classnamewrapper>)
在facc中你也可以像hoc一样在生命周期中做很多事对原有的组件进行封装，基本上hoc能做的facc也都能做。我所在的项目之前都是大范围的使用hoc，再经过一番讨论后，开始大范围的转变成facc。
区别两者都是用来增强原有组件的，具体该使用那种？那种是正确的模式？社区关于这一点也有很多讨论，比如就有人说facc是反模式：function as child components are an anti-pattern。他给出的理由是children并不语义化，会造成困惑，然后他提出了component injection的模式，有兴趣的同学可以读一读。
具体从几个方面做一下对比：
组合阶段
组合阶段意思就是hoc，facc和要被增强的组件的组合时候。可以很明显发现，facc对于前后组件对接依赖信息显示的更多，相对而言更容易理解。而hoc，相互之间如何桥接，你必须得深入到hoc内部读代码才可以知道这个hoc具体干了啥。
// hoc exampleimport view from './view'const detailpage = withserverdata(withnavigator(view))
// facc exampleimport view from './view'const detailpage = props => (  <fetchserverdata>    {      data => (        <navigator>          <view data={data} {...props} />        </navigator>      )    }  </fetchserverdata>)
如果在上面再增加2个hoc，上面组合的过程就变得十分难看。而facc相对而言，如何封装，数据源来自那里，组件接受了那些数据都比较显眼。
性能优化
在hoc中我们能接受到宿主的prop，因为props是从hoc往下传递的，所以我们也有完整的生命周期，我们可以使用shouldcomponentupdate优化。而facc则不然，无法在其内部做比较props，除非在组合的时候外部在包一个组件才能进行比较props。
灵活性
facc 在组合阶段相对hoc更为灵活，他并不规定被增强组件如何使用它传递下去的属性。而hoc基本上在编写完后就定死了。
另外，facc不会再去创建一个新的component，而hoc会创建一个新的component然后传递props下去。
总结社区中很多开源库已经使用了两种模式，也有很多的文章进行比较。也有很多激烈讨论，当然对于最后解决问题而言，两种模式都有好处。出于不同的考虑，可能选择不一样。
相关推荐：
react高阶组件实例解析
react中受控组件和非受控组件实例详解
以上就是react中的函数子组件和高阶组件的详解的详细内容。