Render Props

解释

1 .一种在组件之间使用一个值为函数的共享代码的简单技术

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

2 .dataProvider组件接受一个函数，这个函数返回一个react元素，并调用他，而不是实现自己的逻辑

function DataProvider(props){
  return (
    {props.render()}
)
}

举例说明

1 .一个组件封装了获取鼠标位置的数据
2 .另一个组件想要使用这个坐标。来更新对应的样式

import React from 'react'

// 这个组件追踪web应用中鼠标的位置
class MouseTracker extends React.Component{
    constructor(props){
        super(props)
        this.handleMouseMove=this.handleMouseMove.bind(this)
        this.state={
            x:0,
            y:0,
        }
    }

    handleMouseMove(e){
        this.setState({
            x:e.clientX,
            y:e.clientY,
        })
    }

    render(){
        return (
            <div style={{height:"100vh"}} onMouseMove={this.handleMouseMove}>
                <h1>移动鼠标</h1>
                <p>当前坐标位置是({this.state.x}-{this.state.y})</p>
                {/* props.render组件需要在这里显示出来，并使用我们这里的this.state这个参数 */}
                {this.props.render(this.state)}
                {/* 这里只是留了一个接口，来显示可能出现的组件 */}
            </div>
        )
    }
}

export default MouseTracker

3 .使用的元素

import React from 'react'

// 这个组件追踪web应用中鼠标的位置
class Cat extends React.Component{
    render() {
        const mouse = this.props.mouse;
        return (
          <div style={{ position: 'absolute', left: mouse.x, top: mouse.y,background:"yellow" }} />
        );
      }
}

export default Cat
// 这个还是不变的

4 .实际调用

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

      {/* 调用，把一个组件当成props给传下去 */}

注意

1 .render prop是一个用于告知组件需要渲染什么内容的函数prop
2 .可以使用render prop的常规组件来实现大多数高阶组件
3 .react-motion 主要使用了这个技术
4 .hook 版本实现

import React ,{useState,useEffect} from 'react'
// 感觉写代码很有乐趣

// 封装一段检测鼠标移动的代码
function useMouse(props){
    const [isEffect,setEffect]=useState(props.isEffect)
    const [mouse,setMouse]=useState({x:0,y:0})

    // 如何从外部控制是否要执行这个操作呢？传入一个变量来控制,好像我是无法动态向他传入一个参数来改变里面的逻辑的。只有根据if判断使用另一个组件里面传入不同参数的hook

    function handleMouseMove(e){
        setMouse({
            x:e.clientX,
            y:e.clientY
        })
    }

    useEffect(()=>{
        document.documentElement.addEventListener("mousemove",handleMouseMove,false)
        return ()=>{
            document.documentElement.removeEventListener("mousemove",handleMouseMove,false)
        }
    })
    // 直接把mouseMove事件绑定在全局界面上，然后返回最后输出的结果

    return mouse
}

// 封装一段检测显示器屏幕的代码
function useWidth(props){
    const [width,setWidth]=useState(document.body.clientWidth)

    function handleChange(e){
        setWidth(document.body.clientWidth)
    }

    useEffect(()=>{
        window.addEventListener('resize',handleChange,false)

        return ()=>{
            window.removeEventListener('resize',handleChange,false)
        }
    })
    return width
    
}
export default useWidth