react.js 高阶组件----很简单的实例理解高阶组件思想

/** 高阶组件其实是一个函数，传进去的一个组件，返回一个新组件* 实现不同组件中的逻辑复用,* 将一些可以单独抽离的逻辑处理给要返回的新组件里面复用* 然后将单独的组件，传递给新组件* */import React, {Component} from ‘react‘import ReactDOM from ‘react-dom‘//高阶组件定义，里面return 返回新组件function local(Comp,key){ ???class Proxy extends Component{ ???????//constructor构造函数 定义你的状态 ???????constructor(){ ???????????super(); ???????????this.state={data:‘‘} ???????} ???????//钩子函数，组件渲染之前 ???????componentWillMount(){ ???????????let data=localStorage.getItem(key); ???????????this.setState({data}) ???????} ???????handBlur=(event)=>{ ??????????let data=event.target.value; ??????????localStorage.setItem(key,data); ???????} ???????render(){ ???????????//Comp是传入进来的组件 ???????????return( ???????????????<Comp handBlur={this.handBlur} data={this.state.data}/> ???????????) ???????} ???} ???return Proxy}//定义你的单独组件function Input(props) { ???return <input type="text" defaultValue={props.data} onBlur={props.handBlur}/>}function Textareas(props) { ??return <textarea defaultValue={props.data}></textarea>}function Div() { ???return <div>111</div>}//调用高阶函数，返回新的函数let LocalInput=local(Input,‘username‘)let LocalTextareas=local(Textareas,‘content‘)let LocalDiv=local(Div)//要渲染的总组件class From extends Component { ???render() { ???????return ( ???????????<div> ???????????????<form> ??????????????????用户名 <LocalInput/> ???????????????????类容 <LocalTextareas/> ???????????????????<LocalDiv></LocalDiv> ???????????????</form> ???????????</div> ???????) ???}}ReactDOM.render(<From></From>,document.querySelector("#root"))