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

stateLessbg.png

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

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

React 教程系列

教程简介

1、阅读对象

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

2、教程难度

初级

3、demo 地址
https://github.com/tigerchain/react-lesson/tree/master/lesson03/14-stateless/stateLessComp 喜欢就给个 star 吧

一、复习

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

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

ES5 编写组件

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

var CusImg = React.createClass({
    
  render: function() {
   
    return (
      
        
        {this.props.text}
        
    );
  }
});

ReactDOM.render(
  ,
  document.getElementById('container')
);

ES6 编写有状态组件


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

  render() {
    return (
      
        
        {this.props.text}
    );
  }
}

CusImg.propTypes = {
};

无状态组件

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

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

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

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

来个非常简单的

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

先看看最终效果：

qcode.png

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

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

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

  render() {
    return (
      
        
        {this.props.text}
    );
  }
}

CusImg.propTypes = {
};

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

2、修改为无状态组件

const CusImg = (props)=>(
  
    
    {props.text}

);

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 (
      
        

      
  );
  }
}

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 (
      
         {CusImg({
           style:styles.root ,
           textStyle:styles.textStyle,
           imgurl:require('../imgs/qcord.png'),
           text:"二维码"
         })}
      
  );
  }

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

callstateless.png

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

四、组件的性能对比

组件继承 Component

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

1、修改 index.html




  
  
  
  Document

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

2、修改 main .js

import React from "react";
import {render} from 'react-dom';

const Dot = (props) =>(.);

class DotComponent extends React.PureComponent {
  render() {
    return .;
  }
}

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((
        
        ), 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 的人都会点个喜欢或转发的

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

一、复习

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

三、无状态组件优势

四、组件的性能对比

你可能感兴趣的:(17、Reac系列之--无状态组件你真的知道吗？)