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

Posted 2020-10-08 学

/*
* 高阶组件其实是一个函数，传进去的一个组件，返回一个新组件
* 实现不同组件中的逻辑复用,
* 将一些可以单独抽离的逻辑处理给要返回的新组件里面复用
* 然后将单独的组件，传递给新组件
* */

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"))