React入门0x018: 高阶函数组件(HOC)

QLQ 发布于2019-08-23 13:52 / 780人阅读

摘要：总结其实，这个和的思想有很大的渊源，不推荐继承，而是推荐组合，而就是其中的典范。比如我们写了两个个高阶组件，一个是，一个是，组件就可以随意的在和之间随意切换，而不需要改动组件原有代码。

0x000 概述

高阶函数组件...还是一个函数，和函数组件不同的是他返回了一个完整的组件...他返回了一个class！！！

0x001 直接上栗子

照常，先写个App组件，外部传入一个theme

class App extends React.Component {
    render() {
        return (
            
                App theme: {this.props.theme}
            
        );
    }
}

写一个函数，传入一个组件返回新的一个类组件，新的类组件渲染了传入的组件，并添加theme到传入的组件中

const withTheme = (OriginComponent) => {
    return class WrappedComponent extends React.Component {
        render() {
            return (
                
            );
        }
    }
}

调用组件

let ThemeApp = withTheme(App)

渲染

ReactDom.render(
    ,
document.getElementById("app"))

效果

说明
这个就是所为的HOC了，其实也没有啥，就是传入一个组件，返回另一个组件，但是这其中的作用可就大多了，返回的新的组件有自己的生命周期，并且可以操控传入组件的属性，react-redux的connect实现方式就和这类似。

0x003 总结

其实，这个和React的思想有很大的渊源，React不推荐继承，而是推荐组合，而HOC就是其中的典范。比如我们写了两个个with*高阶组件，一个是withRedux，一个是withLocalstorage，组件就可以随意的在redux和locaostorage之间随意切换，而不需要改动组件原有代码。

GPU云服务器云服务器高阶组件高阶函数高阶函数应用函数式组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99705.html

动手写个React高阶组件

摘要：作用是给组件增减属性。如果你的高阶组件不需要带参数，这样写也是很的。那么需要建立一个引用可以对被装饰的组件做羞羞的事情了，注意在多个高阶组件装饰同一个组件的情况下，此法并不奏效。你拿到的是上一个高阶组件的函数中临时生成的组件。是什么简称HOC，全称 High Order Component。作用是给react组件增减props属性。怎么用为什么不先说怎么写？恩，因为你其实已经用...

xiaokai 2019-08-22 18:14 评论0 收藏0
写给自己的React HOC(高阶组件)手册

前言 HOC(高阶组件)是React中的一种组织代码的手段,而不是一个API. 这种设计模式可以复用在React组件中的代码与逻辑,因为一般来讲React组件比较容易复用渲染函数, 也就是主要负责HTML的输出. 高阶组件实际上是经过一个包装函数返回的组件,这类函数接收React组件处理传入的组件,然后返回一个新的组件. 注意:前提是建立在不修改原有组件的基础上. 文字描述太模糊,借助于官方...

W4n9Hu1 2019-08-26 13:52 评论0 收藏0
React中的函数子组件(FaCC)和高阶组件(HOC)

摘要：高阶函数我们都用过，就是接受一个函数然后返回一个经过封装的函数而高阶组件就是高阶函数的概念应用到高阶组件上使用接受一个组件返回一个经过包装的新组件。灵活性在组合阶段相对更为灵活，他并不规定被增强组件如何使用它传递下去的属性。在接触过React项目后，大多数人都应该已经了解过或则用过了HOC(High-Order-Components)和FaCC(Functions as Child ...

elliott_hu 2019-08-23 11:44 评论0 收藏0
深入浅出React高阶组件

摘要：博客地址背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。博客地址：http://www.luckyjing.com/post... 背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义：接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。对于高阶组件，它描述的便是接受React组件作为输入，输出...

yuanzhanghu 2019-08-20 18:20 评论0 收藏0
React 高阶组件（HOC）实践

摘要：简单来说高阶组件就是一个函数，它接受一个组件作为参数然后返回一个新组件。主要用于组件之间逻辑复用。使用由于数据请求是异步的，为了不让用户看到一片空白，当数据请求还没有返回时，展示组件。组合函数，提升代码可阅读性。简单来说高阶组件（HOC）就是一个函数，它接受一个组件作为参数然后返回一个新组件。HOC 主要用于组件之间逻辑复用。比如你写了几个组件，他们之间的逻辑几乎相同，就可以用 HOC 对...

caiyongji 2019-05-23 13:55 评论0 收藏0