本文主要是介绍React基础_5(组件复用)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

组件复用

正文

React组件复用：复用state和操作state的方法
复用的两种模式：
1.render props模式
2.高阶组件

render props 给组件传递一个函数，函数的参数为组件的state，返回值为所需要渲染的结构。

class App extends React.Component{
    render(){
        return(
            <Child mouse={(s)=>{
                return (
                    <h2>x:{s.x}y:{s.y}</h2>
                )
            }} />
        )
    }
}
//这是需要复用的组件，作用是获取鼠标的位置
class Child extends React.Component{
    state={
        x:0,
        y:0
    }
    componentDidMount(){
        //创建一个监听鼠标位置的监听器，可以被多个需要获取鼠标位置的组件调用
        window.addEventListener('mousemove',this.mouseMove)
    }
    mouseMove=e=>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    render(){
        return this.props.mouse(this.state)
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

高阶组件：
高阶组件是一个函数，接收的参数是一个需要增加功能的组件。
高阶组件的开头约定以with开头，函数参数以大写字母开头。

function withChild(App){
    class Child extends React.Component{
        state={
            x:0,
            y:0
        }
        componentDidMount(){
            //创建一个监听鼠标位置的监听器
            window.addEventListener('mousemove',this.mouseMove)
        }
        componentWillUnmount(){
        	//在组件关闭的时候关闭监听器
            window.removeEventListener('mousemove',this.mouseMove)
        }
        mouseMove=e=>{
            this.setState({
                x:e.clientX,
                y:e.clientY
            })
        }
        render(){
            //将需要共享的状态作为参数传递给被包装的组件
            return <App {...this.state}></App>
        }
    }
    return Child
}

class App extends React.Component{
    render(){
        return <h2>鼠标当前位置x:{this.props.x}y:{this.props.y}</h2>
    }
}
//获取增强后的组件
const Appplus =withChild(App)
ReactDOM.render(<Appplus />,document.getElementById('root'))

为了便于区分增强后的组件，可以为组件设置displayName，设置的方法如下.

//以Child组件App组件为例
Child。displayName=`WithChild${getDisplayName(App)}`

这样每个创建的组件名称都会不同，当创建两个增强组件的时候就不会出现重复的名字.

高阶组件也可以向被包装的组件传递props，格式如下

 return <App {...this.state}{...this.props}></App>

这样就可以在被包装的组件中接受props了

结语

笔者也是第一次学习做出的总结，要是能从我这里得到一些帮助最好不过，若有错误还望大佬在评论帮忙指出。

这篇关于React基础_5(组件复用)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！