react高阶组件实现原理+案例

1、实现了解为什么我们需要高阶组件

高阶组件可以封装复用的逻辑，也就是算法和数据
这样组件就可以实现复用，比如说如下图，我们首先写了一个username组件，在一下段代码里

复制代码

实现一个表单，需要输入用户名和手机号，实现效果如下

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import UserName from './userName'

// 高阶组件就是一个普通函数，传入一个组件，返回一个新的组件

export default class Memo extends Component{
    render(){
        return(
            <form>
                <UserName />
                <Password />
            <form>
        )
    }
}
ReactDOM.render(<Memo />, document.querySelector('#root'))
复制代码

加入创建一个UserName组件

// 这个组件的作用是输入框输入信息存入localStorage里面
import React, { Component } from 'react'
export default class UserName extends Component{
    componentDidMount(){
        this.username.value = localStorage.getItem('username') || '请输入昵称'
    }
    handleChange = (event) => {
        localStorage.setItem('username', event.target.value)
    }
    render(){
        return <label>用户名<input ref={input=>this.usernmae=input}></label>
    }
}
复制代码

接着我们实现password组件

// 这个组件的作用是输入框输入信息存入localStorage里面
import React, { Component } from 'react'
export default class PassWorod extends Component{
    componentDidMount(){
        this.username.value = localStorage.getItem('password') || '请输入密码'
    }
    handleChange = (event) => {
        localStorage.setItem('password', event.target.value)
    }
    render(){
        return <label>用户名<input ref={input=>this.password=input}></label>
    }
}
复制代码

发现没有，两个组件的逻辑是一样的，这就重复了，所以我们需要一种方法来提取重复的部分

// 我们写一个高阶组件来封装上面两个组件的重复的逻辑
export default function(OldComponent, name, placeholder){
    class NewComponent extends Component{
        constructor(){
            super()
            this.state = { data: '' }
        }
        componentWillMount(){
            this.setState({data:localStorgae(name) || placeholder})
        }
        save = (event)=>{
            localStorage.setItem(name, event.target.value)
        }
        render(){
            return <OldCoponent data={this.state.data} save={this.save}>
        }
    }
    return NewComponent
}
复制代码

接着我们改进userName组件

import React, { Component } from 'react'
export default class UserName extends Component{
    render(){
        return <label>用户名<input value={this.props.data} onChange={this.props.save}}></label>
    }
}
export default NewComponent(UserName, 'username', '用户名')
复制代码