react 高阶函数详解(附送彩蛋)

此文适合react新手入门，react大佬可以略过(毕竟以前都是写vue,React才写了一个多月， 掩面泪奔)

主要是学习react中的一些经验总结，如果你觉得对你有帮助，可以给个赞github。

react项目入门

react版本：16.0.0 (因为工作中还是15的版本)

首先我们先来说说 有状态组件和无状态组件

有状态组件 无状态组件

有状态组件：组件内部状态发生变化，需要state来保存变化。

无状态组件：组件内部状态是不变的，用不到state。建议写成函数组件

组件设计思路：通过定义少部分有状态组件管理整个应用的状态变化，并且将状态通过props传递给其余无状态组件。

有状态组件主要关注处理状态变化的业务逻辑，无状态组件主要关注组件UI渲染工作。这样更有利于组件的复用,组件之间解耦更加彻底

这样有时就会产生一个问题，如果给UI组件加不同的逻辑怎么办？

2种比较好的方法， this.props.children 和 HOC ， 具体实例。那么下面就来详细说说 HOC 高阶组件

知识前置：

装饰器设计模式：允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。

这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。

HOC 高阶组件 (封装并分离组件的通用逻辑。其实就是装饰器设计模式的应用)

• 基本概念：

在JS中高阶函数可以接受一个函数作为参数，返回值作为也是函数的函数。类似的 高阶组件也可以接受一个组件为参数，返回一个被加工过的组件。

本质上高阶函数是一个函数，而不是组件。

• 使用场景：

1. 操纵props
2. 通过ref访问组件的实例
3. 组件状态提升
4. 用其他元素包装组件

例子：

1. 操纵props 这个用的比较多

在被包装的组件接收到props之前。高阶组件可以先拦截到props,对props执行增删改等操作，然后将修改过的props传给被包装组件。

import React, { Component } from 'react'

function withPersistentData (wrapedComponent) {
  return class extends Compon