前言思考：如果两个组件中的部分功能相似或相同，该如何处理？处理方式：复用相似的功能复用什么？state操作state的方法两种方式：render props模式高阶组件（HOC）注意： 这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式，接下来我们以render-props模式为例，一步一步演示其使用流程。案例分析

我们以鼠标移动获取坐标为例，该案例是未优化过的代码，我们发现ui都限制在了render中。

  import { Component } from 'react'  import PropTypes from 'prop-types'  export default class Mouse extends Component {    static propTypes = {      children: PropTypes.func.isRequired    }    state = {      x: 0,      y: 0    }​    componentDidMount() {      window.addEventListener('mousemove', this.handleMouseMove)    }​    handleMouseMove = e => {      this.setState({        x: e.clientX,        y: e.clientY      })    }    render() {      return (        // ui都限制在了render中        <div>          x: {this.state.x}          y: {this.state.y}        </div>      )    }  }​​

优化思路分析思路：将要复用的state和操作state的方法封装到一个组件中如何拿到该组件中复用的state在使用组件时，添加一个值为函数的prop，通过函数参数来获取

 <Mouse render={(mouse) => {}} /> 

如何渲染到任意的UI使用该函数的返回值作为要渲染的UI内容

 <Mouse render={(mouse) => {     return <p>         x: {mouse.x}         y: {mouse.y}     </p>  }} /> 

使用步骤创建Mouse组件，在组件中提供复用的逻辑代码将要复用的状态作为 props.render(state)方法的参数，暴露到组件外部使用props.render() 的返回值作为要渲染的内容

  render() {    // return (    //   <div>    //     {/* mouse */}    //     x: {this.state.x}    //     y: {this.state.y}    //   </div>    // )    return this.props.render(this.state)  }​

示例demo

class Mouse extends React.Component {    // 鼠标位置状态    state = {        x: 0,        y: 0    }​    // 监听鼠标移动事件    componentDidMount(){        window.addEventListener('mousemove',this.handleMouseMove)    }    handleMouseMove = e => {        this.setState({            x: e.clientX,            y: e.clientY        })    }    render(){        // 向外界提供当前子组件里面的数据        return this.props.render(this.state)    }}class App extends React.Component {    render() {        return (            <div>                App                <Mouse render={mouse => {                    return <p>X{mouse.x}Y{mouse.y}</p>                }}/>            </div>        )    }}ReactDOM.render(<App />,document.getElementById('root'))

children代替render属性注意：并不是该模式叫 render props就必须使用名为render的prop，实际上可以使用任意名称的prop把prop是一个函数并且告诉组件要渲染什么内容的技术叫做： render props模式推荐：使用childre代替render属性

 <Mouse>  {    ({ x, y }) => {      return (        <p>          x: {x}          y: {y}        </p>      )    }  }</Mouse>

Mouse组件内部的render修改为：

  render() {    // return (    //   <div>    //     {/* mouse */}    //     x: {this.state.x}    //     y: {this.state.y}    //   </div>    // )    return this.props.children(this.state)  }

优化代码推荐给render-props模式添加props校验

​  static propTypes = {    children: PropTypes.func.isRequired  }​

当组件移除时候解绑事件

  componentWillUnmount() {    window.removeEventListener('mousemove', this.handleMouseMove)  }