首页 > > 网页制作 > Javascript >

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

2018-06-24 00:22:40来源：未知阅读 ()

调试代码之前，我设置了两个缓存

分别是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"))