React Render Props共享代码技术

import React from 'react'
class Mouse extends React.Component {
	// 省略操作方法
	render(){
		return this.props.render(this.state)
	}
}
//根组件
export default class App extends React.Component {
	render(){
		<Mouse render={ mouse => (
			<div>当前鼠标位置 {mouse.x} {mouse.y}<div>
		)}/>
		//此处的mouse参数实际上为Mouse组件的state，因为这个函数是在Mouse组件的render()中传参调用的
	}
}

import React from 'react'
class Mouse extends React.Component {
	// 省略操作方法
	render(){
		return this.props.children(this.state)
	}
}
//根组件
export default class App extends React.Component {
	render(){
		<Mouse>
			{ mouse => (
				<div>当前鼠标位置 {mouse.x} {mouse.y}<div>
			)}
		</Mouse>
	}
}

import PropTypes from 'prop-types'
Mouse.propTypes = {
	children: PropTypes.func.isRequired
}

class Mouse extends React.PureComponent {
  // 与上面相同的代码......
}
class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  // 定义为实例方法，`this.renderTheCat`始终
  // 当我们在渲染中使用它时，它指的是相同的函数
  renderTheCat(mouse) {
    return <Cat mouse={mouse} />;
  }
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={this.renderTheCat} />
      </div>
    );
  }
}