17、Reac系列之--无状态组件你真的知道吗？

stateLessbg.png

版权声明：本文为博主原创文章，未经博主允许不得转载。

PS:转载请注明出处
作者:TigerChain
地址:http://www.jianshu.com/p/980abadd8a18
本文出自 TigerChain简书

React 教程系列

教程简介

  • 1、阅读对象

本篇教程适合初学者，老鸟直接略过，如果有误，欢迎指出，谢谢。

  • 2、教程难度

初级

一、复习

前面我们说过在 React 中编写组件有三种方式：我们再来复习一下

  • ES5 写法
  • 有状态组件「stateful components」
  • 无状态组件「stateless components」

ES5 编写组件

# es5
var React = require('react');
var ReactDOM = require('react-dom');

var CusImg = React.createClass({
    
  render: function() {
   
    return (
      <div className={this.props.style}>
        <img src={this.props.imgurl}/>
        <text className={this.props.textStyle}>{this.props.text}</text>
        </div>
    );
  }
});

ReactDOM.render(
  <CusImg />,
  document.getElementById('container')
);

ES6 编写有状态组件


export default class CusImg extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={this.props.style}>
        <img src={this.props.imgurl}/>
        <text className={this.props.textStyle}>{this.props.text}</text>
    </div>);
  }
}

CusImg.propTypes = {
};

无状态组件

无状态组件顾名思义就是没有状态的组件，如果一个组件不需要管理 state 只是纯的展示，那么就可以定义成无状态组件。无状态组件是在 React 在 v0.14 之后推出的

PS:顺便说一下，无状态组件是没有 refs 属性的

# 无状态组件
const Component (props)=>(
    <div>
        {props.text}
        ...
    </div>
)

二、实例来修改无状态组件

来个非常简单的

需求：定义一个带文字的图片组件「上面是图片，下面是文字」。

先看看最终效果：

qcode.png

1、核心代码：自定义一个有状态的 CusImg 的组件

import React, { Component, PropTypes } from 'react';

export default class CusImg extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={this.props.style}>
        <img src={this.props.imgurl}/>
        <text className={this.props.textStyle}>{this.props.text}</text>
    </div>);
  }
}

CusImg.propTypes = {
};

由于此组件只关心数据传递「props」，和状态无关，我们可以定义为无状态组件如下：

2、修改为无状态组件

const CusImg = (props)=>(
  <div className={props.style}>
    <img src={props.imgurl}/>
    <text className={props.textStyle}>{props.text}</text>
</div>
);

module.exports = CusImg

这样我们完成了一个无状态组件

三、无状态组件优势

1、无状态组件优势

既然有无状态组件「存在就有必要」，那么无状态组件有什么优点呢？

  • 1、代码整洁、可读性高

如下两幅图，分别是有普通组件和无状态组件，对比可以看出无状态组件的简洁性

stateful.png
stateless.png
  • 2、没有 this「由于使用的是箭头函数事件无需绑定」
  • 3、便于测试
  • 4、没有生命周期的方法和状态只是一个方法所以性能高？

对于第 4 个我打一个 ？ 号，按理说应该是这样的,无状态函数没有看见 render 等方法，应该性能比有状态的性能高，而且好多文章都是这样说的。所以我决定试一试。

2、无状态组件的性能

现在我们只是直观的感受无状态组件的性能比有状态的组件的性能高，目前都是 YY 出来的，如何能正确的解答我们心中的疑惑呢？那就是实验，没错，我们写一个 Demo 来验证一下

在编写 demo 之前，我们先看一个小例子，来感受一下无状态组件最终长什么样子.

  • 1、 我们先把上面图片文字调用一下

编写 app 组件，然后调用

# app.js
import React, { Component, PropTypes } from 'react';

import styles from '../css/app.css'
import CusImg from './cusimg'

export default class App extends Component {
  constructor(props) {
    super(props);

  }

  render() {
    return (
      <div className={styles.haha}>
        <CusImg
          style={styles.root}
          textStyle={styles.textStyle}
          imgurl={require('../imgs/qcord.png')}
          text="二维码" />

      </div>
  );
  }
}
  • 2、使用 webpack 打包成 bundle.js 文件来查看最终生成的 React 方法
webpack ./app/app.js ./public/bundle.js

以上命令是会对我的项目的，这句命令就把 app.js 打到 bundle.js 中了

我们来看看 app 组件在 bundle.js 中对应 React 的方法，如下图：

createEle.png

从绿色线框我们可以看到，react 调用 createElement 方法生成了一个 CusImg 组件

  • 3、修改 app.js 中调用无状态组件的方式,只修改 render 方法
# app.js

render() {
    return (
      <div className={styles.haha}>
         {CusImg({
           style:styles.root ,
           textStyle:styles.textStyle,
           imgurl:require('../imgs/qcord.png'),
           text:"二维码"
         })}
      </div>
  );
  }

然后继续执行 webpack ./app/app.js ./public/bundle.js 命令，此时观察 bundle.js 中 app 组件对应的 React 源码

callstateless.png

和 2 步骤中的图片对比，发现出区别来了没，竟然没有 _react2.default.createElement(_cusimg2.default, {...}) 取而代之的是一个方法，这到底有神马鸟用？我告诉你使用 3 中的写法才是发挥了无状态组件真正的作用「达到优化性能的目的」，接着往下看

四、组件的性能对比

组件继承 Component

废话不多说，直接上代码对比有状态组件，无状态组件两种调用试下的性能，接着上面的代码继续编写

  • 1、修改 index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<!-- 添加以下三个 div -->
  <div id="stateless-functional-direct-call"></div>
  <div id="stateless-functional-mounted"></div>
  <div id="stateful"></div>
<div id="container"></div>
<script src="bundle.js"></script>
</body>
</html>

我们给 index.html 中添加了三个 div

  • 2、修改 main .js
import React from "react";
import {render} from 'react-dom';

const Dot = (props) =>(<span>.</span>);

class DotComponent extends React.PureComponent {
  render() {
    return <span>.</span>;
  }
}

class Main extends React.PureComponent {
  render() {
    var dots = Array(500).fill(0).map(x => {
      if(this.props.kind == 'stateless-functional-direct-call') {
        return Dot();
      } else if(this.props.kind == 'stateless-functional-mounted') {
        return React.createElement(Dot, {}, {});
      } else if(this.props.kind == 'stateful') {
        return React.createElement(DotComponent, {}, {});
      }
    })
    return React.createElement('div', {}, ...dots);
  }
}

let prevBenchmarkTime, benchmarkCount, statefulTotalTime, statelessFunctionalMountedTotalTime, statelessFunctionalDirectCallTotalTime;
benchmarkCount = 0;
//状态组件花费时间
statefulTotalTime = 0;
//无状态组件挂载花费时间
statelessFunctionalMountedTotalTime = 0;
//直接调用无状态组件花费时间
statelessFunctionalDirectCallTotalTime = 0;

const run = () => {
  ['stateful', 'stateless-functional-mounted', 'stateless-functional-direct-call'].forEach(kind => {
    const prevTime = performance.now();

    var items = [];
    var i, len;
    for (i = 0, len = 20; i < len; i++) {
      items.push(i);
    }
    items.forEach(i => {
      render((
        <Main kind={kind}/>
        ), document.getElementById(kind));
    });

    const time = Math.round(performance.now() - prevTime);

    if(kind == 'stateless-functional-direct-call') {
      statelessFunctionalDirectCallTotalTime = statelessFunctionalDirectCallTotalTime + time
    } else if(kind == 'stateless-functional-mounted') {
      statelessFunctionalMountedTotalTime = statelessFunctionalMountedTotalTime + time
    } else if(kind == 'stateful') {
      statefulTotalTime = statefulTotalTime + time
    }

    const perf = (Math.round((1-time/prevBenchmarkTime)*100) || '  ')
    prevBenchmarkTime = time;
  })
  prevBenchmarkTime = undefined
  benchmarkCount = benchmarkCount + 1
  console.log('.')
  return
}

const start = ((count=10) => {
  console.log(`Running %c${count} %ctimes ...`, 'font-weight: bold', 'font-weight: normal');
  Array(count).fill(0).forEach(x => run())
  console.log(`Stateful                         took ${statefulTotalTime}ms`);
  console.log(`Stateless Functional Mounted     took ${statelessFunctionalMountedTotalTime}ms %c${Math.round((1-statelessFunctionalMountedTotalTime/statefulTotalTime)*100)}% %c`, 'color:green', 'color:black');
  console.log(`Stateless Functional Direct Call took ${statelessFunctionalDirectCallTotalTime}ms %c${Math.round((1-statelessFunctionalDirectCallTotalTime/statefulTotalTime)*100)}% %c`, 'color:green', 'color:black');
  console.log(`%c`, 'font-size: 100px')
})()
  • 3、运行查看结果
yarn start
per.gif

从上图可以知道，无状态组件性能确实比有状态的性能高，但是只是提高了 6% 左右，但是按照我们上面 3 的方式调用无状态组件性能提高了 60% 左右

PS:无状态组件本身性能提高不是很明显，完全取决于调用方式，如果按照传统的组件调用无状态组件那么性能提高微乎其微，如果按照方法的形式调用无状态组件，那么性能提高不少。「建议大家以后调用无状态组件采用性能高的方式」

  • 4、得出结论

从以上各种图可知，无状态组件的调用如果按常规的方式调用，还是会创建元素，挂载，所以直接调用无状态组件性能最高

组件继承 PrueComponent

  • 1、我们直接修改两个地方即可，main.js
modifyprue.png

红色标注就是我们修改的地方

  • 2、运行查看结果
yarn start
purecom.png

我们看消耗时间简直直接继承 Component 组件的 25倍之一左右，这是为什么呢？

  • 3、PureComponent

PureComponent 是 React 15.3在2016.06.29发布了，它取代了之前的 pure-render-mixin「最小渲染」。

PureComponent 的作用：用来提升性能，因为它减少了应用中的渲染次数。

PureComponent 改变了生命周期方法 shouldComponentUpdate，并且它会自动检查组件是否需要重新渲染。这时，只有 PureComponent 检测到 state 或者 props 发生变化时，PureComponent 才会调用 render方法，因此，你不用手动写额外的检查，就可以在很多组件中改变state， 例如：

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.user.id === props.user.id;
}

具体请看源文:https://60devs.com/pure-component-in-react.html

好了对于无状态组件就到此结束了，相信大家对无状态组件有了一个全新的认识

最近开了公号，以后文章内容第一时间会发在公号中，希望大家关注，扫描以下二维码即可关注

据说每一个勤奋努力想成为非常牛 B 的人都会点个喜欢或转发的

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,378评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,356评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,702评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,259评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,263评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,036评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,349评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,979评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,469评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,703评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,257评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2赞 345

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,510评论 25赞 707
  • Entry to React
    原教程内容详见精益 React 学习指南，这只是我在学习过程中的一些阅读笔记，个人觉得该教程讲解深入浅出，比目前大...
    leonaxiong阅读 2,810评论 1赞 18
  • 基于React Native的应用热发布实践
    1 热发布 网页发布 VS APP发布 网页发布：服务端上线新的网页代码，用户端通过链接直接访问。 APP发布：�...
    kkmoving阅读 4,062评论 1赞 15
  • 每天都有一万个草泥马飘过
    接了现在的烂摊子每天内心都无法平静虽然到处都有正能量人物到处都可以喝到美味鸡汤不过鸡汤不能当饭吃如果一件事情要靠毅...
    承谦阅读 777评论 0赞 0
  • 花（新歌歌词，待谱）
    马路边的景观花 你见过他们吗 现在又是哪一株啊 二月蓝又或是鸡冠花 是否还不死心想挣扎着扎根住下 连土地贫瘠也不怕...
    艾素晴雯阅读 231评论 0赞 2