好客租房66-render-props模式-2使用模式

使用步骤

创建Mouse组件，在组件中提供复用状态逻辑代码（1:状态 2操作状态的方法）

2将要复用的状态作为props.render(state)方法的参数 暴露到组件外部

   //导入react

   import React from 'react'

   import ReactDOM from 'react-dom'

   import PropTypes from 'prop-types'

   //导入组件

   // 约定1：类组件必须以大写字母开头

   // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性

   // 约定3:组件必须提供render方法

   // 约定4:render方法必须有返回值

   class App extends React.Component {

       constructor(props) {

           super(props)

           console.log('生命周期钩子函数:construtor')        

       }

       //初始化state

       //1进行dom操作

       //2发送网络请求  

       render() {

           console.log('生命周期钩子函数:render')

           return (

               <div id="title">

                   <h1>render props模式</h1>

                   <Mouse render={(mouse)=>{

                       return <p>

                           鼠标位置:{mouse.x}-{mouse.y}

                       </p>

                   }}/>

               </div>

           )

       }

   }

   class Mouse extends React.Component {

       state = {

           x:0,

           y:0

       }

       componentDidMount=()=>{

           window.addEventListener('mousemove',this.handeleMove)

       }

       handeleMove=e=>{

           this.setState({

               x:e.clientX,

               y:e.clientY

           })

       }

       //监听鼠标移动事件

       render(){

           return this.props.render(this.state)

       }

   }

   ReactDOM.render(<App></App>, document.getElementById('root'))

运行结果