Shulou(Shulou.com)06/01 Report--

Editor to share with you what Render props is, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Render props

Rrender prop refers to a simple technique of sharing code between React components using prop with a value as a function. Similar to HOC, it is a problem of logic reuse between components.

More specifically, Render prop is a function that tells the component what to render.

Let's look at a simple example:

The following components track the mouse position in the Web application:

Class Mouse extends React.Component {state = {x: 0, y: 0}; handleMouseMove = (event) = > {this.setState ({x: event.clientX, y: event.clientY});} render () {return (

The current mouse position is ({this.state.x}, {this.state.y})

);}} class MouseTracker extends React.Component {render () {return (move mouse);}}

As the cursor moves over the screen, the component displays its (xmemy) coordinates.

The question now is:

How do we reuse this behavior in another component?

In other words, if another component needs to know the mouse location, can we encapsulate this behavior so that we can easily share it with other components?

Suppose the product wants a feature to present a picture of a cat chasing a mouse on the screen.

We might use {this.setState ({x: event.clientX, y: event.clientY});} render () {return (

);}}

Bash ~ simple and rough, finish the task in one minute.

But what if you want to add a dog to the product next time?

The above example, although it can meet the requirement of cat chasing mouse, has not yet achieved the goal of truly encapsulating behavior in a reusable way.

When we want the mouse position to be used for different use cases, we must create a new component that presents something specifically for that use case.

This is also the origin of render prop:

We can provide a component with the function prop that dynamically determines what needs to be rendered instead of hard-coding it into the component.

Modify the above code:

Class Cat extends React.Component {render () {const mouse = this.props.mouse; return (

);}} class Mouse extends React.Component {state = {x: 0, y: 0}; handleMouseMove = (event) = > {this.setState ({x: event.clientX, y: event.clientY});} render () {return ({this.props.render (this.state)}

);}} class MouseTracker extends React.Component {render () {return (

Move the mouse! ()} / >

);}}

Provides a render method that lets you dynamically decide what needs to be rendered.

In fact, render prop is called render prop because of the pattern, and you don't have to use a prop named render to use this pattern.

Any function prop that tells the component what to render can technically be called "render prop".

In addition, an interesting thing about render prop is that you can use regular components with render prop to implement most high-level components (HOC).

For example, if you prefer to use withMouse HOC rather than components, you can easily create one using regular with render prop:

Function withMouse (Component) {return class extends React.Component {render () {return (()} / >);}

It is also very concise and clear.

It is important to note that if you create a function in a defined render function, using render prop will offset the advantages of using React.PureComponent.

Because you always get false when you compare props, and in this case each render will generate a new value for render prop.

Class Mouse extends React.PureComponent {/ / same code as above.} class MouseTracker extends React.Component {render () {return ((/ / this is not good! The value of each rendered `render` prop will be different. )} / >);}}

In such an example, each time it is rendered, it generates a new function as prop, thus offsetting the effect of components inherited from React.PureComponent.

To get around this problem, sometimes you can define a prop as an instance method, like this:

Class MouseTracker extends React.Component {renderTheCat (mouse) {return;} render () {return (

Move the mouse around!

);}} above is all the content of this article "what is Render props?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.