React(render-props和高阶组件)

render-props和高阶组件

• render-props
• 高阶组件

render-props

组件复用（监听鼠标移动并获取鼠标位置）

class Mouse extends React.Component {
  // 设置状态
  state = {
    x:0,
    y:0
  }
  // render
  render(){
    // 1.return this.props.render(this.state)
    return this.props.children(this.state)
  }
  // 监听鼠标移动
  // 生命周期:完成DOM渲染以后触发
  componentDidMount(){
    window.addEventListener('mousemove', this.setMouse)
  }
  // 时间销毁时应该移除事件监听
  componentWillUnmount(){
    window.removeEventListener('mousemove',  this.setMouse)
  }
  // 设置x和y的值
  setMouse = e => {
    this.setState({
      x:e.clientX,
      y:e.clientY
    })
  }
  
}
class App extends React.Component {
  render(){
    return (
      <div>
        {/* 1. */}
        {/* <One render={(res) => {
          return <p>x:{res.x},y:{res.y}</p>
        }} /> */}
        <Mouse>
          {res => {
            return (
              <p>鼠标位置:x{res.x},y{res.y}</p>
            )
          }}
        </Mouse>
      </div>
    )
  }
}
// 设定children中的函数为必填项
Mouse.propTypes = {
  children:PropTypes.func.isRequired
}
// 这里不传入参数
ReactDOM.render(<App  />,document.getElementById('root'))

高阶组件

高阶组件又叫HOC，是一个函数，接受要包装的组件，返回一个增强后的组件

// 创建高阶组件 1.创建一个函数,指定一个参数WrappedComponent(参数名大写字母开头)
function withNouse(WrappedComponent){
  // 2.内部创建一个类组件并返回
  class Mouse extends React.Component {
    // 设置状态
    state = {
      x:0,
      y:0
    }
    
    // 3.类组件内部书写逻辑代码
    // 监听鼠标移动
    componentDidMount(){
      window.addEventListener('mousemove', this.setMouse)
    }
    // 时间销毁时应该移除事件监听
    componentWillUnmount(){
      window.removeEventListener('mousemove',  this.setMouse)
    }
    // 设置x和y的值
    setMouse = e => {
      this.setState({
        x:e.clientX,
        y:e.clientY
      })
    }
    
    // render
    render(){
      return <WrappedComponent {...this.state} {...this.props}></WrappedComponent>
    }
  }
  Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
  // 将组件返回
  return Mouse
}
// 设置displayName
function getDisplayName(WrappedComponent){
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
// 测试高阶组件
class Position extends React.Component {
  render(){
    return (
      <div>
        鼠标当前位置:{this.props.x},{this.props.y}
      </div>
    )
  }
} 

const New = withNouse(Position);

class App extends React.Component {
  render(){
    return (
      <div>
        <New />
      </div>
    )
  }
}
// 设定children中的函数为必填项
Position.propTypes = {
  children:PropTypes.func.isRequired
}
// 这里不传入参数
ReactDOM.render(<App  />,document.getElementById('root'))