react.js 高階組件----很簡單的實例理解高階組件思想

調試代碼以前，我設置了兩個緩存

分別是username和content

在控制檯console設置兩個緩存代碼

localStorage.setItem('username','老王')
localStorage.setItem('content','類容')

運行下面代碼必定要先設置這兩個緩存，由於我在高階組件封裝了公共方法，調用緩存到輸入框的value裏

，高階組件返回的組件調用了這個方法

 

/*
* 高階組件實際上是一個函數，傳進去的一個組件，返回一個新組件
* 實現不一樣組件中的邏輯複用,
* 將一些能夠單獨抽離的邏輯處理給要返回的新組件裏面複用
* 而後將單獨的組件，傳遞給新組件
* */

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)=>{
　　　　　　//獲取當前標籤的value
           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"))