http://www.css88.com/react/do...

看完官网文档，大概知道高阶组件怎么封装了。大概知道高阶组件怎么封装了。

当前的需求是怎么 获取 WrappedPage 的 state?

(我们是混合开发，需要更新header和右上角的图标！希望在统一的地方处理header 和右上角功能；而不是每个页面都去添加重复代码。)

//basic
import React from 'react';
import PropTypes from 'prop-types';


//modules
import up from '../modules/cup';

//WrappedPage 每一个jsx路由页面
export default function mixinsPage(WrappedPage) {
  // ……返回另一个新组件……
  return class Page extends React.Component {
    constructor(props) {
      super(props);
    }

    componentWillMount() {
      console.log(WrappedPage);
       //清除页面右上角的图标
       up.plugins.setRightButton();
    }

    componentDidMount() {
        console.log(`created=>${this.state.badTitle}`);
        //设置title
        document.title = this.state.badTitle;
        up.plugins.setPageTitle(this.state.badTitle || ' ');//ios 初始化 '' 时 无效
    }

    render() {
      // ……使用最新的数据渲染组件
      // 注意此处将已有的props属性传递给原组件
      return <WrappedPage {...this.props} />;
    }
  }
}

采用 反向继承 模式 ：可以操作state 但是会导致WrappedPage的componentWillMount 和 componentWillMount 不执行了。。。。

export default function mixinsPage(WrappedPage) {
  // ……返回另一个新组件……
  return class Page extends WrappedPage {
    constructor(props) {
      super(props);
    }

    componentWillMount() {
      //清除页面右上角的图标
       up.plugins.setRightButton();
    }

    componentDidMount() {
   
       //设置title
       document.title = this.state.badTitle;
       up.plugins.setPageTitle(this.state.badTitle || ' ');//ios 初始化 '' 时 无效
    }

    shouldComponentUpdate(nextProps, nextState) {
      console.log(nextState);
    }

    render() {
      // ……使用最新的数据渲染组件
      // 注意此处将已有的props属性传递给原组件
      // return <WrappedPage {...this.props} />;
      //使用反向继承 模式 ：可以操作state
      return super.render()
    }

  }
}

以前vueJs 的统一处理逻辑！

//vueJs 的mixins 
beforeCreate() {
    //清除页面右上角的图标
    plugins.setRightButton();
  },
  created() {
    // log.clearLogs();

    console.log(`created=>${this.badTitle}`);
    //设置title
    document.title = this.badTitle;
    plugins.setPageTitle(this.badTitle || ' ');//ios 初始化 '' 时 无效
  },