render-props and higher order components

1. Overview of React component reuse

• Think: What if some of the functions in two components are similar or the same?
• Processing method: reuse similar functions (associative function encapsulation)
• Reuse what?1.state 2.Method of operating state (component state logic)
• Two ways: 1. render props mode 2. Higher-order components (HOC)
• Note: These two methods are not new APIs, but a fixed pattern (writing method) evolved by using the coding skills of React's own characteristics.

2. Analysis of ideas

• idea: encapsulate the state to be reused and the method of operating the state into a component
• Question 1: How to get the state reused in the component
• When using a component, add a prop whose value is a function, and get it through the function parameter (requires internal implementation of the component)
• Question 2: How to render arbitrary UI
• Use the return value of this function as the UI content to be rendered (requires internal implementation of the component)

3. Steps to use

• Create a Mouse component and provide reused state logic code (1. state 2. method of operating state) in the component
• Use the state to be reused as the parameter of the props.render(state) method, exposed to the outside of the group
• Use the return value of props.render() as the content to render

4. Demonstrate the reuse of Mouse components

//The way the React scaffolding introduces picturesimport img from './images/open.png'class Mouse extends React.Component{state={x:0,y:0}handleMouseMouve= e=>{this.setState({x:e.clientX,//Get the mouse position in real timey:e.clientY,})}//listen for mouse movement eventscomponentDidMount(){window.addEventListener('mousemove',this.handleMouseMouve)}render(){return(this.props.render(this.state))}}class App extends React.Component{render(){return(
render props mode
 {//It feels a bit like a callback functionreturn(
The position of the mouse: x:{mouse.x} y:{mouse.y}
)}}>{/* move image */}{return({position:'absolute',top:mouse.y-16,left:mouse.x-32}}/>)}}>
)}}ReactDOM.render(,document.getElementById('root'))

5.children replace the render attribute (recommended)

• Note: It's not that the pattern is called render props and you must use a prop named render, in fact you can use any prop with any name
• The technique of making a prop a function and telling a component what to render is called the render props pattern
• Recommended: use children instead of the render attribute

//Usage in context:

    {data=>data parameter indicates the received data---data}

class App extends React.Component{render(){return(
render props mode
{mouse=>{return(
mouse position:{mouse.x},{mouse.y}
)}}

6. Code optimization

• Recommended: add props validation to render props mode
• should unbind mousemove event on unmount

Mouse.propTypes={children:PropTypes.func.isRequired}//unbindcomponentWillUnmount(){window.removeEventListener('mousemove',this.handleMouseMouve)}

For propType errors, please refer to the article:http://t.csdn.cn/nQtzz