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', '用户名')
复制代码