React第八天 - 高阶组件

56 阅读1分钟

高阶函数

  • js函数都是指向某个变量,既然变量可以指向函数,函数的参数就可以接收变量,函数就可以去接收另外一个函数作为参数,这种函数就称之为高阶函数。

  • 高阶函数至少满足两个条件(满足一个即可)

    • 接收一个或者多个函数作为输入
    • 输出一个函数
function add(x, y, f) {
  return f(x) + f(y)
}

add(-5, 5, Math.abs) // 10
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 求乘积,得到 [1, 4, 9, 16, 25, 36, 49, 64, 81]
function fn(x) {
  return x * x
}
let arr1 = arr.map(fn)

高阶组件

  • 高阶组件 本质 就是一个函数,这个函数接收一个组件作为参数
  1. 高阶组件(HOC)是 react 中用于复用组件逻辑的一种高级技巧,HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式

  2. 增强 props

  • 给每个 prop 多传一个属性,一个一个传也没有过关系,但如果组件过多,一个个传就不太合适了,而且直接给组件添加属性的方式会改变原来的代码结构,我们可以使用 高阶组件,对每一个组件在使用之前进行劫持,给每个组件添加一个新的属性
  1. 登陆鉴权

  2. 高阶组件的意义

  • 我们可以利用高阶组件去对 React 某些代码进行优雅的处理。早起的 React 要想实现组件复用,只有用 mixin(混入).