HOC 高阶组件

HOC 高阶组件

在react组件的创建过程中经常需要我们把多个组件中的一类功能进行重复的使用 我们其实就可以把这一类相同的功能进行提取公用 这样一来 我们在编写组件的时候就可以重复使用这一类提取的公共内容 减少了代码量与后期代码的维护难度。

HOC高阶组件------》参数是一个组件 并且返回值还是一个组件

使用:

1.创建文件夹用来容纳HOC的代码

// hoc   参数是一个组件  返回值还是一个组件
​
import React, { Component } from 'react'
​
let Hocdemo=(El)=>{ //因为参数今后传递过来的是一个组件所以首字母大写
    return class element extends Component {
        render() {
            return (
                <div>
                    <El/>--来自于2111班
                </div>
            )
        }
    }
}
​
export default Hocdemo
​

2.使用 在你想使用高阶组件复用的组件之内

import React, { Component } from 'react'
​
// 1.先引用HOC   
import Hocdemo from "../hoc/element.js"
// 2.修改暴露到最下面
 class hoca extends Component {
    render() {
        return (
            <div>
                aaaaaaaaaaaaaaaaaaa
            </div>
        )
    }
}
// 3.暴露高阶组件 并且把当前组件当成高阶组件的参数传入
export default Hocdemo(hoca)

高阶组件---反向继承

HOC的反向继承 其中最核心的就是渲染劫持（拦截了渲染 可以在高阶组件中进行条件判断）

// hoc   参数是一个组件  返回值还是一个组件
​
import React, { Component } from 'react'
​
// 高阶组件里面需要条件渲染  那么其中需要条件
let Hocdemo=(El,num)=>{ 
    // 如果要反向继承  那么首先 我们在返回的组件中就不能使用如下写法了
    // return class element extends Component {
    // 而是要使用
    return class element extends El {
        render() {
            
            return (
                <div>
                    <El/>
                    {num>=18? <h1>欢迎您尊敬的vip！！！</h1>:<h1>您不满18禁止浏览！！！</h1>} 
                </div>
            )
        }
    }
}
export default Hocdemo
​

使用 传递条件为参数

import React, { Component } from 'react'
​
// 1.先引用HOC   
import Hocdemo from "../hoc/element.js"
// 2.修改暴露到最下面
 class hoca extends Component {
    render() {
        return (
            <div>
                aaaaaaaaaaaaaaaaaaa
            </div>
        )
    }
}
// 3.暴露高阶组件 并且把当前组件当成高阶组件的参数传入
export default Hocdemo(hoca,19)

扩展--插入字符串 标签(解析)

使用:dangerouslySetInnerHTML={{__html:this.state.newhtml

import React, { Component } from 'react'
​
export default class erd extends Component {
​
    constructor(){
        super()
        this.state={
            newhtml:"<em>你好么么哒</em>"
        }
    }
​
​
    render() {
        return (
            <div>
                erd
                <div>
                {/* 直接 渲染这个html字符串 那么不会去解析这个标签 */}
                    {this.state.newhtml}
                </div>
                {/* 我们如果想插入的话  需要使用如下语法
                    但是注意  html前面是  两个底杠  不要写错了
                */}
                <div dangerouslySetInnerHTML={{__html:this.state.newhtml}}>
​
                </div>
            </div>
        )
    }
}
​