美文网首页
React.js高阶组件

React.js高阶组件

作者: 卓三阳 | 来源:发表于2018-05-24 15:10 被阅读35次

最近听到一个新概念-纯函数,这里先记录下来。
纯函数是指一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用。第一个条件我们很好理解,第二条件在执行过程里面没有副作用我个人的理解就是不要对函数外部产生影响(修改函数外部变量之类)。React生命周期钩子就是纯函数。

为什么要煞费苦心地构建纯函数?因为纯函数非常“靠谱”,执行一个纯函数你不用担心它会干什么坏事,它不会产生不可预料的行为,也不会对外部产生影响。不管何时何地,你给它什么它就会乖乖地吐出什么。

言归正传,回到高阶组件(Higher-Order Components)
高阶组件

1.什么是高阶组件

高阶组件(Higher-Order Components)就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。高阶组件就是一个没有副作用的纯函数。


2.高阶组件用法

高阶组件(HOC)是react中对组件逻辑进行重用的高级技术。当两个组件大部分代码都是重复的时候,高阶组件就能大展身手了。
比如,我们需要两个组件,一个是HelloUser,一个是KitUser。两者的内容,结构都差不多。我们用高阶组件实现一下


Wrapped.png

高阶组件就是把username通过props传递给目标组件了。目标组件只管从props里面拿来用就好了。

[HelloUser.png-edaa5e-1527145197122-0)] KitUser.png main.png res.png

相关文章

  • React.js高阶组件

    最近听到一个新概念-纯函数,这里先记录下来。纯函数是指一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副...

  • React-Native 高阶组件

    高阶函数 高阶组件(属性代理)普通组件还可以向高阶组件传值 高阶组件(反向继承) 普通组件的 static 方法怎...

  • React高阶组件HOC

    高阶组件本质是函数,参数是 组件1 返回组件2,高阶组件是为了复用通用逻辑高阶组件eg:import React,...

  • react与vue中高阶组件的对比

    由高阶函数引申出来的高阶组件 高阶组件本质上也是一个函数,并不是一个组件,且高阶组件是一个纯函数。高阶组件,顾名思...

  • 2021-08-05-🦕🦕 react 高阶组件hotc和@装饰

    简介 高阶组件可以直接调用子组件属性方法;子组件通过 this.props.xxx调用高阶组件方法属性 高阶组件无...

  • React——第三阶段(1)(高阶组件、context)

    根据胡子大哈的文章学习,感谢大胡分享胡子大哈-高阶组件、context 高阶组件 什么是高阶组件 高阶组件就是一个...

  • React 高阶组件(HOC)

    什么是高阶组件? 高阶组件(Higher-Order Components,简称HOC):简而言之,高阶组件就是加...

  • 高阶组件

    高阶组件 先来引入这个概念 高阶函数是什么? 高阶函数就是一个函数返回一个函数eg: 高阶组件 类同 高阶组件就是...

  • React 进阶之高阶组件

    高阶组件 HOC 高阶组件(HOC)是react中的高级技术,用来重用组件逻辑。但高阶组件本身并不是React A...

  • 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理...

网友评论

      本文标题:React.js高阶组件

      本文链接:https://www.haomeiwen.com/subject/gbzjjftx.html