把组件放在另外一个组件的 render 方法里面, 并且利用了 {...this.props} {...this.state} 这些  JSX 展开属性

对比下2种代码:

原始方式:

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var intervalMixin = {

        componentDidMount: function(){

          this.arr = [];

        },

        setInterval: function(callback, interval){

          var token = setInterval(callback, interval);

          this.arr.push(token);

          return token;

        }

      }

      var S = React.createClass({

        mixins: [intervalMixin],

        getInitialState: function(){

          return {

            num: 0

          }

        },

        componentDidMount: function(){

          this.setInterval( ()=> this.setState({num: this.state.num+1}), 1000);

        },

        render: function(){

          return <div>

            {this.state.num}

          </div>

        }

      });

      ReactDOM.render(

        <S q="bb" />,

        document.getElementById('example') );

    </script>

  </body>

</html>

高阶组件调用:

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      // 注意参数 Com 需要第1个字母大写

      const Enhance = Com => {

        const Res = class extends React.Component {

          // 这种写法 ES6 不支持

          // static defaultProps = {

          //     autoPlay: false,

          //     maxLoops: 10,

          // }; // 注意这里有分号

          constructor(props, context) {

            super(props, context);

            this.state = {

              time: 0

            };

          }

          static a(){

          }

          componentDidMount() {

            setInterval(this.tick.bind(this), 1000);

          }

          tick() {

            this.setState({

              time: this.state.time + 1

            });

          }

          render() {

            // ...this.props 相当于 text = {this.props.text}

            // ...this.state 相当于 time = {this.state.time}

            return <Com {...this.props} {...this.state} />;

          }

        }

        Res.defaultProps = {

            text: 'hello world'

        };

        return Res;

      }

      class Time extends React.Component {

        render() {

          return <div>

            {this.props.text} {this.props.time}

          </div>;

        }

      }

      /*

        注意这里 A 的值必须为大写,

        不能写成 这种形式

        ReactDOM.render(

          Enhance(Time),

          document.getElementById('example') );

        )

      */

      var A = Enhance(Time);

      ReactDOM.render(

        <A />,

        document.getElementById('example') );

    </script>

  </body>

</html>

参考地址:

传递 Props

Mixins Are Dead. Long Live Composition

Mixins 改成使用高阶组件调用的更多相关文章

  1. 浅析为什么用高阶组件代替 Mixins

    转载来源 感谢分享 Mixins 引入了无形的依赖 应尽量构建无状态组件,Mixin 则反其道而行之 Mixin 可能会相互依赖,相互耦合,不利于代码维护 不同的 Mixin 中的方法可能会相互冲突 ...

  2. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  3. 高阶组件（Higher-Order Components）

    有时候人们很喜欢造一些名字很吓人的名词,让人一听这个名词就觉得自己不可能学会,从而让人望而却步.但是其实这些名词背后所代表的东西其实很简单. 我不能说高阶组件就是这么一个东西.但是它是一个概念上很简单 ...

  4. 当初要是看了这篇，React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  5. react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行

    Redux 独立的集中式状态管理 js 库 - 参见 My Git 不是 react 库,可以与 angular.vue 配合使用,通常和 react 用 yarn add redux import ...

  6. React文档（二十四）高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  7. React进阶之高阶组件

    前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...

  8. react高阶组件

    高阶组件 为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念.所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装 ...

  9. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

随机推荐

  1. 【洛谷 P3165】 [CQOI2014]排序机械臂 （Splay）

    题目链接 debug了\(N\)天没debug出来,原来是找后继的时候没有pushdown... 众所周知,,Splay中每个编号对应的节点的值是永远不会变的,因为所有旋转.翻转操作改变的都是父节点和 ...

  2. PAT L2-017. 人以群分

    题目链接:https://www.patest.cn/contests/gplt/L2-017 题目: 社交网络中我们给每个人定义了一个“活跃度”,现希望根据这个指标把人群分为两大类,即外向型(out ...

  3. 使用idea+Tomcat搭建servlet服务器

    1.使用java 搭建一个简单的Servlet 服务器 https://blog.csdn.net/qq_35164169/article/details/76146655

  4. windows7_常用操作终端操作

    查看环境变量:set 添加环境变量:set aa = 88 删除环境变量:set aa = 查看ip配置:ipconfig 查看全局环境变量配置:path 查看当前目录文件:dir 进入E盘:E: 进 ...

  5. [NOI2008] [bzoj1061] 志愿者招募

    还是一道费用流的题目.话不多说,进入正题. 题意:给定n个点和m种从l到r覆盖一层的费用,求满足所有点的覆盖层数都大等于权值的最小费用 分析:要做到区间修改,看似比较麻烦. 用差分把区间修改变成单点修 ...

  6. MariaDB 层常用业务

    前言  -  简单准备一下前戏 前面写过几篇mariadb 数据的随笔, 多数偏C/C++层面. 这次分享一下平时开发中, 处理的一些数据层面的业务. 对于MariaDB, 不做过多介绍. 如果你有U ...

  7. 【LabVIEW技巧】LabVIEW中的错误1

    前言 前几日,小黑充电学习意外的看到了下面的这个东东. 编程许久竟然没有见过这样子的错误枚举,甚为好奇,问刘大后才知道是Error Ring,为此恶补一下LabVIEW中与错误处理相关的内容. 错误的 ...

  8. python--tesseract

    tesseract的介绍 我们爬虫会受到阻碍,其中一个便是我们在模拟登陆或者请求一些数据的时候,出现的图形验证码,因此我们需要一种能叫图形验证码识别成文本的技术.将图片翻译成文字一般称为光学文字识别( ...

  9. 3：django models Making queries 高级进阶--聚合运算

    在前一遍文章django models Making queries里面我们提到了django常用的一些检索数据库的内容, 下面我们来看一下更为高级的检索聚合运算 这是我们要用到的模型 class A ...

  10. 安装node的最新版本

    前段时间小试了一下node 这段时间就差不多忘了 恩 然后现在自己想去回顾一下,然后流程想再好好弄一遍 争取掌握node 因为我现在已经安装了 一个node版本 那我想安装最新版本吧 首先,看看你的n ...