react系列（22）共享逻辑算法

旧城等待， 2021-09-17 00:30 231阅读 0赞

render props实现了 子组件A共享父组件B的逻辑实现，换句话说，就是共享有关组件B的如：逻辑运算得出的状态值、dom节点的事件监听等。在dom结构上，子组件A被包裹在父组件B里面。实现的函数语句为：

render props尽量用在一些比较重复性的逻辑上的共享，如鼠标事件等，下面是一个完成的Demo，定义一个鼠标跟踪逻辑的组件Mouse.jsx：

import React from 'react';
    
    class Mouse extends React.Component {
    	constructor(props) {
    		super(props);
    		this.handleMouseMove = this.handleMouseMove.bind(this);
    		this.state = {
    			x: 0,
    			y: 0
    		};
    	}
    
    	handleMouseMove(event) {
    		this.setState({
    			x: event.clientX,
    			y: event.clientY
    		});
    	}
    
    	render() {
    		return(
                        <div id="mouseMove" style={
       {width: "0px",height: "0px"}} onMouseMove={this.handleMouseMove}>
            		{this.props.render(this.state)}
          		    </div>
    		);
    	}
    }
    
    export default Mouse;

另外，定义一个组件RenderPropsDemo.jsx来继承鼠标跟踪逻辑，即主要获取鼠标的x和y坐标：

import React from 'react';
    
    class RenderPropsDemo extends React.Component {
    	constructor(props) {
    		super(props);
    	}
    
    	render() {
    		const mouse = this.props.mouse;
    		console.log(mouse);
    		return(
    			<div style={
       {width: "500px",height: "500px",backgroundColor: "gray"}}>
    				{mouse.x},{mouse.y}
    			</div>
    		);
    	}
    }
    
    export default RenderPropsDemo;

逻辑共享实现：

import React from 'react';
    import Mouse from './components/hoc/Mouse.jsx'; 
    import RenderPropsDemo from './components/hoc/RenderPropsDemo.jsx'; 
    
    class App extends React.Component {
    	constructor(props) {
    		super(props);
    		this.state = {};
    	}
    
    	render() {
    		return(
          		<Mouse render={mouse => (
          			<RenderPropsDemo mouse={mouse} />
        		)}/>
    		);
    	}
    }
    
    export default App;

这样，组件RenderPropsDemo即使不添加鼠标移动监听，也可以实现鼠标跟踪的逻辑。注意，RenderPropsDemo组件是被包裹在Mouse组件里的，渲染的元素节点如下图所示：

![20181114183951601.png][]

[20181114183951601.png]: /images/20210813/7e8e337b958b4cc6bcbd394829f0f2ee.png