React解密：React高阶组件是什么？

React中比较高大上的东西，高阶组件应该算是一个点，开发中也许写的不多，但是我们必须要直到高阶组件是什么，高阶组件能干什么？

A higher-order component is a function that takes a component and returns a new component.

这是react官网给出的解释，也就是说，高阶组件就是接收一个组件，然后返回一个新组件。这是函数式编程的思想。那么高阶组件是如何实现的呢？俩种方法：属性代理和反向继承。

属性代理：实质就是通过包裹原来的组件来操作props；

import React, { Component } from 'react'const HOC = (WrappedComponent) =>class WrapperComponent extends Component {render() {return <WrappedComponent {...this.props} />;}
}
//普通的组件
class WrappedComponent extends Component{render(){//....}
}
//高阶组件使用
export default HOC(WrappedComponent)

我们可以看到，原封不动的返回了WrappedComponent组件。

操作props:

我们看到之前要传递给被包裹组件WrappedComponent的属性首先传递给了高阶组件返回的组件(WrapperComponent)，这样我们就获得了props的控制权(这也就是为什么这种方法叫做属性代理)。我们可以按照需要对传入的props进行增加、删除、修改(当然修改带来的风险需要你自己来控制)

const HOC = (WrappedComponent) =>class WrapperComponent extends Component {render() {const newProps = {name: 'HOC'}return <WrappedComponent{...this.props}{...newProps}/>;}}

为被包裹组件(WrappedComponent)新增加了固定的name属性，因此WrappedComponent组件中就会多一个name的属性。

获取ref:在属性代理中，可以轻松的拿到被包裹的组件的实例引用(ref)

import React, { Component } from 'React';const HOC = (WrappedComponent) =>class wrapperComponent extends Component {storeRef(ref) {this.ref = ref;}render() {return <WrappedComponent{...this.props}ref = {::this.storeRef}/>;}}

wrapperComponent渲染接受后，我们就可以拿到WrappedComponent组件的实例，进而实现调用实例方法的操作(当然这样会在一定程度上是反模式的，不是非常的推荐)。

抽象state:属性代理的情况下，我们可以将被包裹组件(WrappedComponent)中的状态提到包裹组件中，一个常见的例子就是实现不受控组件到受控的组件的转变.

class WrappedComponent extends Component {render() {return <input name="name" {...this.props.name} />;}
}const HOC = (WrappedComponent) =>class extends Component {constructor(props) {super(props);this.state = {name: '',};this.onNameChange = this.onNameChange.bind(this);}onNameChange(event) {this.setState({name: event.target.value,})}render() {const newProps = {name: {value: this.state.name,onChange: this.onNameChange,},}return <WrappedComponent {...this.props} {...newProps} />;}}

将不受控组件(WrappedComponent)成功的转变为受控组件.

反向继承：反向继承是指返回的组件去继承之前的组件

const HOC = (WrappedComponent) =>class extends WrappedComponent {render() {return super.render();}}

可以看见返回的组件确实都继承自WrappedComponent,那么所有的调用将是反向调用的(例如:super.render())，这也就是为什么叫做反向继承。

渲染劫持：渲染劫持是指我们可以有意识地控制WrappedComponent的渲染过程，从而控制渲染控制的结果。例如我们可以根据部分参数去决定是否渲染组件:

const HOC = (WrappedComponent) =>class extends WrappedComponent {render() {if (this.props.isRender) {return super.render();} else {return null;}}}

在反向继承中，我们可以做非常多的操作，修改state、props甚至是翻转Element Tree。反向继承有一个重要的点: 反向继承不能保证完整的子组件树被解析。

元素(element)是一个是用DOM节点或者组件来描述屏幕显示的纯对象，元素可以在属性(props.children)中包含其他的元素，一旦创建就不会改变。我们通过JSX和React.createClass创建的都是元素。
组件(component)可以接受属性(props)作为输入，然后返回一个元素树(element tree)作为输出。有多种实现方式:Class或者函数(Function)。

　　所以， 反向继承不能保证完整的子组件树被解析的意思的解析的元素树中包含了组件(函数类型或者Class类型)，就不能再操作组件的子组件了，这就是所谓的不能完全解析。

总的来说：

高阶组件属于函数式编程(functional programming)思想，对于被包裹的组件时不会感知到高阶组件的存在，而高阶组件返回的组件会在原来的组件之上具有功能增强的效果。而Mixin这种混入的模式，会给组件不断增加新的方法和属性，组件本身不仅可以感知，甚至需要做相关的处理(例如命名冲突、状态维护)，一旦混入的模块变多时，整个组件就变的难以维护，也就是为什么如此多的React库都采用高阶组件的方式进行开发。

React解密：React高阶组件是什么？相关推荐

React中的高阶组件
React中的高阶组件高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧,HOC自身不是React API的一部分,它是一种基于React的组合 ...
React 中的高阶组件及其应用场景
本文目录什么是高阶组件 React 中的高阶组件属性代理(Props Proxy) 反向继承(Inheritance Inversion) 高阶组件存在的问题高阶组件的约定高阶组件的应用场景 ...
React之HOC(高阶组件)
一.概念 Higher-Order Components就是一个函数,传给它一个组件,它返回一个新的组件.就相当于手机壳,通过包装组件,增强组件功能,抽离公共逻辑. 二.步骤 2.1 创建一个函数 i ...
理解react中的高阶组件和高阶函数
高阶组件 ES6中使用关键字class来使它的语法有和类相似的写法和功能,但是它的本质还是一个函数. 因此,高阶组件本质上是一个函数,只是这种组件(函数)接收一个组件,返回一个新的组件. 比如下面 ...
react学习17-React高阶组件
高阶组件高阶组件 HOC(hight ordered component) withRouter就是高阶组件高阶组件的本质其实就是一个函数,该函数参数接收一个组件,返回值依然是一个组件,返回的组件 ...
react——props和高阶组件
目录前言一.render props 模式 1. react复用概述 2. render props 模式 3. children 代替 render 属性二.高阶组件 1. 概述 2. 使用步 ...
react进阶系列 - 高阶组件详解四：高阶组件的嵌套使用
前面有讲到过很多页面会在初始时验证登录状态与用户角色.我们可以使用高阶组件来封装这部分验证逻辑.封装好之后我们在使用的时候就可以如下: export default withRule(Home); 但 ...
React中自定义高阶组件的应用（HOC）
什么是HOC? HOC(Higher-order component)是一种React 的进阶使用方法,只要还是为了便于组件的复用.强调一点,HOC本身并不是 React API, 它就是一个方法,一 ...
react——@修饰器——高阶组件的使用——通过装饰器来调用高阶组件——简单修改样式
使用装饰器@ 装饰器用来装饰类的,可以增强类,在不修改类的内部的源码的同时,增强它的能力(属性或方法) 装饰器使用@函数名写法,对类进行装饰,目前在js中还是提案,使用需要配置相关兼容代码库. re ...
React高阶组件探究
React高阶组件探究在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...

React解密：React高阶组件是什么？

React解密：React高阶组件是什么？相关推荐

最新文章

热门文章