There are two questions:

  • What is the difference between React high-order components, Render props and hooks?
  • Why iterate?

Let’s look at the first question, and the first question, if we want to make clear the difference between these three, we have to understand what they are.

React Advanced components

HOC is a technique used in React to reuse component logic. Its essence is:

Returns a function of a component that takes a component as an argument

Here’s an example:

function withSubscription(WrapperdComponent, selectData) {
	return class extend React.Component {
		consturctor(props) {
			super(props)
			this.state = {
				data: selectData(DataSource, props)
			}
		}

		render() {
			return <WrapperdComponent data={this.state.data} {. this.props} / >}}}Copy the code

Advanced components have the following advantages and disadvantages:

  • advantages
    • Logic reuse
    • Does not affect the internal logic of the wrapped component
  • disadvantages
    • Overwriting occurs if the props passed by the higher-order component to the wrapped component have the same name

Render props

Render props is a technique for sharing code between React components using a prop function with a value of function:

Render Prop is a function prop that tells components what to Render

Here’s an example:

Class DataProvider extends React.Components {
	state = {
		name: "Alice"
	}	
	render() {
		return (
			<div>
				<p>Share the data component's own internal render</p>
				{ this.props.render(this.state) }
			<div/>
		)
	}
}

<DataProvider render={
data= >(<p> render {data.name}</>)} />Copy the code

Compared to hooks and hoc, render props uses fewer scenarios and has the following advantages and disadvantages:

  • Advantages:
    • Data sharing
    • Logic reuse
  • Disadvantages:
    • Data cannot be accessed outside the return statement
    • nested

Hooks

Hooks are new in React 16.8. It will allow you to use State, Lifecycle, and React features without writing a class.

Through custom hook, logic reuse can be easily realized.

Let’s look at an example:

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/>
	)
}

Copy the code

You can see that the hooks structure is clear and has the following advantages:

  • Use intuitive
  • There is no problem with the same name for hoc
  • There is no nesting problem for render props
  • Data can be accessed outside of return

answer

Now that you know what each of the three is, and what their pros and cons are, the initial question is easy to answer.

What is the difference between React high-order components, Render props and hooks?

All three can be used for logical reuse. The difference is that the higher-order components are receiving components that wrap them, the Render props are rendering shared data in Render, and the hooks are sharing data in the form of function calls.

Why iterate?

In most cases, both the higher-order components and the Render props have their own defects:

  • The nuptial problem
  • Nesting problems
  • Problem with not being able to access data outside of return
  • Problems with unclear data sources
  • .

Iteration is designed to solve the above problems, allowing us to reuse component logic in a more concise way, making writing code easier and more enjoyable.