高阶组件(Higher-Order Components)：

高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术。 HOC 本身不是 React API 的一部分。 它们是从 React 构思本质中浮现出来的一种模式。
具体来说，高阶组件是一个函数，能够接受一个组件并返回一个新的组件。
在我们项目中使用react-redux框架的时候，有一个connect的概念，这里的connect其实就是一个高阶组件。也包括类似react-router-dom中的withRouter的概念。

实现高阶组件的方法：

实现高阶组件的方法有如下两种：

  • 属性代理。高阶组件通过被包裹的React组件来操作props。
  • 反向继承。高阶组件继承于被包裹的React组件。

渲染属性：
解决的是有状态组件的可复用问题。
示例代码：
User的数据并不是app提供的，而是有provider来提供的。

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import * as serviceWorker from './serviceWorker';
  5. class Provider extends Component {
  6.     constructor(props) {
  7.         super(props);
  9.         this.state = {
  10.             name: 'Provider--'
  11.         };
  12.     }
  14.     render(){
  15.         return this.props.render(this.state.name);
  16.     }
  17. }
  19. class User extends Component {
  20.     render(){
  21.         return (<div>{this.props.data}</div>);
  22.     }
  23. }
  25. class App extends Component{
  26.     constructor(props){
  27.         super(props);
  28.     }
  30.     render() {
  31.         return (<div>
  32.             <Provider render={(data) => <User data={data}/> }/>
  33.         </div>);
  34.     }
  36.     componentWillUpdate(){
  37.         console.log('will update!');
  38.     }
  39. }
  42. ReactDOM.render(<App />, document.getElementById('root'));

上下文Context示例代码：
每个子组件里都需要定义出上下文数据类型，很麻烦。

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import * as serviceWorker from './serviceWorker';
  4. import PropTypes from 'prop-types';
  6. class Provider extends Component {
  7.     getChildContext(){
  8.         return this.props.store;
  9.     }
  11.     static childContextTypes = {
  12.         name: PropTypes.string,
  13.         age: PropTypes.number
  14.     }
  16.     constructor(props) {
  17.         super(props);
  19.         this.state = {
  20.             name: 'Provider--'
  21.         };
  22.     }
  24.     render(){
  25.         return this.props.children;
  26.     }
  27. }
  29. class BaseUser extends Component {
  30.     static contextTypes = {
  31.         name: PropTypes.string
  32.     }
  34.     render(){
  35.         return (<div>{this.context.name}</div>);
  36.     }
  37. }
  39. class BasePost extends Component {
  40.     static contextTypes = {
  41.         age: PropTypes.number
  42.     };
  44.     render(){
  45.         return (<div>{this.context.age}</div>);
  46.     }
  47. }
  49. // 数据仓库
  50. const store = {
  51.     name: 'David',
  52.     age: 26
  53. };
  55. class App extends Component{
  56.     constructor(props){
  57.         super(props);
  58.     }
  60.     render() {
  61.         return (<div>
  62.             <Provider store={store}>
  63.                 <div>
  64.                     <BaseUser/>
  65.                     <BasePost/>
  66.                 </div>
  67.             </Provider>
  68.         </div>);
  69.     }
  71.     componentWillUpdate(){
  72.         console.log('will update!');
  73.     }
  74. }
  77. ReactDOM.render(<App />, document.getElementById('root'));

优化后的代码：

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import * as serviceWorker from './serviceWorker';
  4. import PropTypes from 'prop-types';
  6. class Provider extends Component {
  7.     getChildContext(){
  8.         return this.props.store;
  9.     }
  11.     static childContextTypes = {
  12.         name: PropTypes.string,
  13.         age: PropTypes.number
  14.     }
  16.     constructor(props) {
  17.         super(props);
  19.         this.state = {
  20.             name: 'Provider--'
  21.         };
  22.     }
  24.     render(){
  25.         return this.props.children;
  26.     }
  27. }
  29. class BaseUser extends Component {
  30.     static contextTypes = {
  31.         name: PropTypes.string
  32.     }
  34.     render(){
  35.         return (<div>{this.props.name}</div>);
  36.     }
  37. }
  39. class BasePost extends Component {
  40.     render(){
  41.         return (<div>{this.props.age}</div>);
  42.     }
  43. }
  45. const connect = (Com) => {
  46.     class ConnectComponent extends Component {
  47.         static contextTypes = Provider.childContextTypes;
  48.         displayName = Com.displayName;
  50.         render() {
  51.             return <Com {...this.context}/>;
  52.         }
  53.     }
  55.     return ConnectComponent;
  56. };
  58. const User = connect(BaseUser);
  59. const Post = connect(BasePost);
  61. // 数据仓库
  62. const store = {
  63.     name: 'David',
  64.     age: 26
  65. };
  66. class App extends Component{
  67.     constructor(props){
  68.         super(props);
  69.     }
  71.     render() {
  72.         return (<div>
  73.             <Provider store={store}>
  74.                 <div>
  75.                     <User/>
  76.                     <Post/>
  77.                 </div>
  78.             </Provider>
  79.         </div>);
  80.     }
  82.     componentWillUpdate(){
  83.         console.log('will update!');
  84.     }
  85. }
  88. ReactDOM.render(<App />, document.getElementById('root'));
  90. serviceWorker.unregister();
  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import * as serviceWorker from './serviceWorker';
  4. import PropTypes from 'prop-types';
  6. const connect = key => Com => {
  7.     class ConnectComponent extends Component {
  8.         constructor(props){
  9.             super(this);
  11.             this.state = {
  12.                 [key]: store[key]
  13.             };
  14.         }
  16.         render() {
  17.             return <Com {...this.state}/>;
  18.         }
  20.         componentDidMount() {
  21.             window.store = new Proxy(store, {
  22.                 get: (target, key, receiver) => {
  23.                     console.log('get: ' + key);
  24.                     return Reflect.get(target, key, receiver);
  25.                 },
  26.                 set: (target, key, value, receiver) => {
  27.                     console.log('set: ' + key + ', value: ' + value);
  29.                     this.setState({
  30.                         [key]: value
  31.                     });
  33.                     return Reflect.set(target, key, value, receiver);
  34.                 }
  35.             });
  36.         }
  37.     }
  39.     return ConnectComponent;
  40. };
  42. @connect('age')
  43. class User extends Component{
  44.     render(){
  45.         return (<div>{this.props.age}</div>);
  46.     }
  47. }
  50. let store = {
  51.     name: 'David',
  52.     age: 26
  53. };
  55. class App extends Component{
  57.     render() {
  58.         return (<User/>);
  59.     }
  61.     componentWillUpdate(){
  62.         console.log('will update!');
  63.     }
  64. }
  67. ReactDOM.render(<App />, document.getElementById('root'));
  69. serviceWorker.unregister();

上面的代码在运行过程中报错：

Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled.

解决办法：

  1. npm install customize-cra react-app-rewired @babel/plugin-proposal-decorators —save
  2. 项目根目录新建config-overrides.js文件加入以下代码:

const { override, addDecoratorsLegacy } = require(‘customize-cra’);
module.exports = override(
addDecoratorsLegacy()
);

  1. 修改package.json文件如下：

“scripts”: {
“start”: “react-app-rewired start”,
“build”: “react-app-rewired build”,
“test”: “react-app-rewired test”,
“eject”: “react-app-rewired eject”
}

属性代理预先将业务组件进行了数据的封装，便于获取数据。

高阶组件的另外一种实现方式是反向继承，下面是学习代码。它实现的是交互的封装。

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import * as serviceWorker from './serviceWorker';
  4. import PropTypes from 'prop-types';
  6. const loading = com => {
  7.     class LoadingComponent extends com {
  8.         render(){
  9.             return (<div>
  10.                 loading
  11.                 {super.render()}
  12.             </div>);
  13.         }
  15.         showLoading() {
  16.             console.log('show loading');
  17.         }
  19.         hideLoading() {
  20.             console.log('hide loading');
  21.         }
  22.     }
  24.     return LoadingComponent;
  25. }
  27. @loading
  28. class User extends Component{
  29.     render(){
  30.         return (<div>user</div>);
  31.     }
  33.     componentDidMount() {
  34.         this.showLoading();
  35.         this.hideLoading();
  36.     }
  37. }
  39. class App extends Component{
  41.     render() {
  42.         return (<User/>);
  43.     }
  44. }
  47. ReactDOM.render(<App />, document.getElementById('root'));
  49. serviceWorker.unregister();