高阶组件

· 高阶组件不可以直接修改接收到的组件的自身行为，只能进行功能组合 · 高阶组件是纯函数，需要保证没有副作用。 · 在进行功能组合时， 一般通过增加不相关的 props 形式给原有组件传递信息 · 不要在 render 方法中使用高阶组件 ．高阶组件不会传递 refs

import React, { Component } from 'react';
import './LoadingHOC.css';

const isEmpty = (prop) => (
  prop === null ||
  prop === undefined ||
  (prop.hasOwnProperty('length') && prop.length === 0) ||
  (prop.constructor === Object && Object.keys(prop).length === 0)
);

const withLoadingHOC = (loadingProp) => (WrappedComponent) => {
  return class extends Component {
    render() {
      return isEmpty(this.props[loadingProp]) ? <div className="loader" /> : <WrappedComponent {...this.props} />;
    }
  }
}

在 withLoadingHoc 中, 还是使用 this.props.contacts.length 进行判断, 为此需要讲这个限定的 propname(this.props.contacts)进行抽象传递.具体做法是将 withLoadingHoC 柯里化，它将 接收两个参数，先后执行。第一个参数是由业务调用方指定的 propname 对应于上面场景为 this.props.contacts ，用于判断数据是否加载完毕。 withLoadingHoC ('contacts')(ContactsApp)

高阶组件的又一种典型用法 给包裹组件传递不相关的属性 props。

mixins 有一些弊端

1. 不确定性. Mixins 会直接修改state

2. 命名冲突 同种情况出现在一个组件中不止一个 Mixins 的场景

render prop是什么

在调用组件时，引入一个函数类型的 prop, 这个 prop 定义了组件的渲染方式。

Function as Child Component

import LoggedUser from './LoggedUser';
function example(){
  return(
    <LoggedUser>
      { username => <div>{ username }</div>}
    </LoggedUser>
  )
}

function LoggedUser(){
  return (
    <div>{ this.props.children(this.state.username)}</div>
  )
}