React 高阶组件

https://zhuanlan.zhihu.com/p/28138664

先来回顾一下什么是高阶函数？高阶函数就是接收一个函数作为输入，或者输出另一个函数的类函数。那么高阶组件也就是接收一个react组件作为输入，输出另一个react组件。下面我们实现一个高阶组件。

从localstorage里面取值，然后显示到对应的输入框。

import React from "react";
import ReactDOM from "react-dom";
//从localstorage里面取值
function loadFromlocal(OldComponent, name) {
  //返回一个新组件
  return class extends React.Component {
    state = {value: null}
    componentDidMount() {
      let value = localStorage.getItem(name)
      this.setState({value})
    }
    render(){
      return <OldComponent value={this.state.value}/>
    }
  }
}
const UserName = (props) => {
  return <input defaultValue={props.value}/>
}
const Password = (props) => {
  return <input defaultValue={props.value}/>
}
let LocalUserName = loadFromlocal(UserName,'name')
let LocalPassword = loadFromlocal(Password,'password')

ReactDOM.render(<div>
  <LocalUserName/><br />
  <LocalPassword/>
</div>, document.getElementById("root"));

两个组件都需要从本地获取对应值，所以这个逻辑就可以封装为一个函数，loadFromLocal()，这个函数返回一个接收一个旧组件OldComponent，在返回一个处理之后的新类组件，组后将这个新的类组件渲染到页面上。看结果：

 

 感觉高阶组件还是听重要的，这方面的知识以后在做项目的过程中详细补充。暂时记录到这里。