React 高阶组件 renderprops hooks 有什么区别，为什么要不断迭代

[lgwebdream]

[lgwebdream]

扫描下方二维码，获取答案以及详细解析，同时可解锁800+道前端面试题。

[LoveWei0]

一 高阶组件

接收一个组件作为参数,返回一个组件的函数

import React from 'react'

export default function withSubscription (WrapperdComponent, selectData) {
  return class extends React.Component {
    consturctor (props) {
      super(props)
      this.state = {
        data: selectData(DataSource, props)
      }
    }
    render () {
      return <WrapperdComponent data={this.state.data} {...this.props} />
    }
  }
}

二 render props

render props是一种在react组件之间使用一个值为函数的prop共享代码技术,具体来说就是:Render prop是一个告知组件,需要渲染什么内容的函数prop

import React, { Component } from 'react'

export default class DataProvider extends Component {
  state = {
    name: 'Alice'
  }
  render () {
    return (
      <div>
        <p>共享数据组件自己的内部render</p>
        {this.props.render(this.state)}
      </div>
    )
  }
}
<DataProvider render={data => (<p>共享的render{data.name}</p>)} />

三 hooks

import React from 'react'

export default function useSubscription () {
  const data = DataSource.getComments()
  return [data]
}

function CommentList (props) {
  const { data } = props
  const [subData] = useSubscription()
  return (
    <div>
      this is data :{data}
      this is subData:{subData}
    </div>
  )
}

• 这三者都能用来进行逻辑复用,区别在于高阶组件为接收组件,对其进行包装
• render props为在render中渲染共享数据
• hooks是以函数调用的形式共享数据.

为什么迭代 ?

• 重名问题
• 嵌套问题
• 无法在return之外访问数据的问题
• 数据来源不清晰