摘要：返回元素的是将新的与原始元素的浅层合并后的结果。生命周期方法要如何对应到函数组件不需要构造函数。除此之外，可以认为的设计在某些方面更加高效避免了需要的额外开支，像是创建类实例和在构造函数中绑定事件处理器的成本。

React系列 --- 简单模拟语法(一)
React系列 --- Jsx, 合成事件与Refs(二)
React系列 --- virtualdom diff算法实现分析(三)
React系列 --- 从Mixin到HOC再到HOOKS(四)
React系列 --- createElement, ReactElement与Component部分源码解析(五)
React系列 --- 从使用React了解Css的各种使用方案(六)

这是React初期提供的一种组合方案,通过引入一个公用组件,然后可以应用公用组件的一些生命周期操作或者定义方法,达到抽离公用代码提供不同模块使用的目的.

曾经的官方文档demo如下

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  },
};

var TickTock = React.createClass({
  mixins: [SetIntervalMixin], // Use the mixin
  getInitialState: function() {
    return { seconds: 0 };
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // Call a method on the mixin
  },
  tick: function() {
    this.setState({ seconds: this.state.seconds + 1 });
  },
  render: function() {
    return 
React has been running for {this.state.seconds} seconds.
;
  },
});

React.render(, document.getElementById("example"));

但是Mixins只能应用在createClass的创建方式,在后来的class写法中已经被废弃了.原因在于:

mixin引入了隐式依赖关系

不同mixins之间可能会有先后顺序甚至代码冲突覆盖的问题

mixin代码会导致滚雪球式的复杂性

详细介绍mixin危害性文章可直接查阅Mixins Considered Harmful

HOC是一种React的进阶使用方法,大概原理就是接收一个组件然后返回一个新的继承组件,继承方式分两种

最基本的实现方式

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    render() {
      return 
    }
  }
}

从代码可以看出属性代理方式其实就是接受一个 WrappedComponent 组件作为参数传入，并返回一个继承了 React.Component 组件的类，且在该类的 render() 方法中返回被传入的 WrappedComponent 组件

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: "PropsProxyHOC",
      };
    }

    logName() {
      console.log(this.name);
    }

    render() {
      const newProps = {
        name: this.state.name,
        logName: this.logName,
      };
      return ;
    }
  };
}

class Main extends Component {
  componentDidMount() {
    this.props.logName();
  }

  render() {
    return 
PropsProxyHOC
;
  }
}

export default PropsProxyHOC(Main);

demo代码可以参考这里
有种常见的情况是用来做双向绑定

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { fields: {} };
    }

    getField(fieldName) {
      const _s = this.state;
      if (!_s.fields[fieldName]) {
        _s.fields[fieldName] = {
          value: "",
          onChange: event => {
            this.state.fields[fieldName].value = event.target.value;
            // 强行触发render
            this.forceUpdate();
            console.log(this.state);
          },
        };
      }

      return {
        value: _s.fields[fieldName].value,
        onChange: _s.fields[fieldName].onChange,
      };
    }

    render() {
      const newProps = {
        fields: this.getField.bind(this),
      };
      return ;
    }
  };
}

// 被获取ref实例组件
class Main extends Component {
  render() {
    return ;
  }
}

export default PropsProxyHOC(Main);

demo代码可以参考这里

因为这是一个被HOC包装过的新组件,所以想要在HOC里面获取新组件的ref需要用些特殊方式,但是不管哪种,都需要在组件挂载之后才能获取到.并且不能在无状态组件（函数类型组件）上使用 ref 属性，因为无状态组件没有实例。

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    render() {
      const newProps = {};
      // 监听到有对应方法才生成props实例
      typeof this.props.getInstance === "function" && (newProps.ref = this.props.getInstance);
      return ;
    }
  };
}

// 被获取ref实例组件
class Main extends Component {
  render() {
    return 
Main
;
  }
}

const HOCComponent = PropsProxyHOC(Main);

class ParentComponent extends Component {
  componentWillMount() {
    console.log("componentWillMount: ", this.wrappedInstance);
  }

  componentDidMount() {
    console.log("componentDidMount: ", this.wrappedInstance);
  }

  // 提供给高阶组件调用生成实例
  getInstance(ref) {
    this.wrappedInstance = ref;
  }

  render() {
    return ;
  }
}

export default ParentComponent;

demo代码可以参考这里

相比较上一方式,需要在高阶组件提供设置赋值函数,并且需要一个props属性做标记

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    // 返回ref实例
    getWrappedInstance = () => {
      if (this.props.withRef) {
        return this.wrappedInstance;
      }
    };

    //设置ref实例
    setWrappedInstance = ref => {
      this.wrappedInstance = ref;
    };

    render() {
      const newProps = {};
      // 监听到有对应方法才赋值props实例
      this.props.withRef && (newProps.ref = this.setWrappedInstance);
      return ;
    }
  };
}

// 被获取ref实例组件
class Main extends Component {
  render() {
    return 
Main
;
  }
}

const HOCComponent = PropsProxyHOC(Main);

class ParentComponent extends Component {
  componentWillMount() {
    console.log("componentWillMount: ", this.refs.child);
  }

  componentDidMount() {
    console.log("componentDidMount: ", this.refs.child.getWrappedInstance());
  }

  render() {
    return ;
  }
}

export default ParentComponent;

demo代码可以参考这里

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：

转发 refs 到 DOM 组件

在高阶组件中转发 refs

const FancyButton = React.forwardRef((props, ref) => (
  
    {props.children}
  
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
Click me!;

以下是对上述示例发生情况的逐步解释：

我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。

我们通过指定 ref 为 JSX 属性，将其向下传递给 。

React 传递 ref 给 fowardRef 内函数 (props, ref) => ...，作为其第二个参数。

我们向下转发该 ref 参数到 ，将其指定为 JSX 属性。

当 ref 挂载完成，ref.current 将指向

DOM 节点。

劫持渲染

最简单的例子莫过于loading组件了

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    render() {
      return this.props.isLoading ? 
Loading...
 : ;
    }
  };
}

// 被获取ref实例组件
class Main extends Component {
  render() {
    return 
Main
;
  }
}

const HOCComponent = PropsProxyHOC(Main);

class ParentComponent extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
    };
  }

  render() {
    setTimeout(() => this.setState({ isLoading: false }), 2000);
    return ;
  }
}

export default ParentComponent;

当然也能用于布局上嵌套在其他元素输出
demo代码可以参考这里

反向继承（Inheritance Inversion）

最简单的demo代码

function InheritanceInversionHOC(WrappedComponent) {
  return class NewComponent extends WrappedComponent {
    render() {
      return super.render();
    }
  };
}

在这里WrappedComponent成了被继承的那一方,从而可以在高阶组件中获取到传递组件的所有相关实例

获取继承组件实例

function InheritanceInversionHOC(WrappedComponent) {
  return class NewComponent extends WrappedComponent {
    componentDidMount() {
      console.log("componentDidMount: ", this);
    }

    render() {
      return super.render();
    }
  };
}

// 被获取ref实例组件
class Main extends Component {
  constructor() {
    super();
    this.state = {
      name: "WrappedComponent",
    };
  }

  render() {
    return 
Main
;
  }
}

export default InheritanceInversionHOC(Main);

demo代码可以参考这里

修改props和劫持渲染

再讲解demo之前先科普React的一个方法

React.cloneElement(
  element,
  [props],
  [...children]
)

以 element 元素为样板克隆并返回新的 React 元素。返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，而来自原始元素的 key 和 ref 将被保留。
React.cloneElement() 几乎等同于：

{children}

但是，这也保留了组件的 ref。这意味着当通过 ref 获取子节点时，你将不会意外地从你祖先节点上窃取它。相同的 ref 将添加到克隆后的新元素中。

相比属性继承来说,反向继承修改props会比较复杂一点

function InheritanceInversionHOC(WrappedComponent) {
  return class NewComponent extends WrappedComponent {
    constructor() {
      super();
      this.state = {
        a: "b",
      };
    }

    componentDidMount() {
      console.log("componentDidMount: ", this);
    }

    render() {
      const wrapperTree = super.render();
      const newProps = {
        name: "NewComponent",
      };
      const newTree = React.cloneElement(wrapperTree, newProps, wrapperTree.props.children);
      console.log("newTree: ", newTree);
      return newTree;
    }
  };
}

// 被获取ref实例组件
class Main extends Component {
  render() {
    return 
Main
;
  }
}

export default InheritanceInversionHOC(Main);

demo代码可以参考这里

为什么需要用到cloneElement方法?

因为render函数内实际上是调用React.creatElement产生的React元素,尽管我们可以拿到这个方法但是无法修改它.可以用getOwnPropertyDescriptors查看它的配置项

Focus the input