React入门系列 - 4. 认识无状态组件

4.1 什么是无状态组件

在开发React组件的时候，大家可能会遇到就是我使用的这个组件纯粹就是渲染使用，里面并没有自己的状态、方法、生命周期等等操作。

而为这种组件创建完整的实例有一种浪费机器性能的感觉。

那么，让我们来看看，如何创建一个easy react component。

新建一个文件noStateComponent.js，在里面写入如下代码:

import React from "react";

export default (props)=><div>{props.name}</div>

接着修改index.js文件，导入这个无状态组件

import React, { PureComponent } from "react";
import Content from './content.js'
import NoStateComponent from './noStateComponent'
export default class index extends PureComponent {
  ...
  render() {
    return (
      <div>
        Hello world React!{this.state.name}
        <p>组件生成时间:{this.state.time}</p>
        <p>{this.state.obj.join('<br/>')}</p>
        <button onClick={this.handleUpdateName.bind(this)}>修改值</button>
        <Content value={'我设置了' + this.state.time} >主体Children</Content>
        <NoStateComponent name="我没有自己的状态"></NoStateComponent>
        <NoStateComponent name="我只能依靠props直接渲染"></NoStateComponent>
      </div>
    );
  }
}

刷新浏览器，你会看到无状态组件成功渲染在界面上。

当然并不是无状态组件无法使用内部状态，我们修改一下无状态组件。让他增加一个内部维持的状态

import React from "react";

export default function(props){
    let lastTime = +new Date()
    return <div>{props.name},lastTime:{lastTime}</div>
}

另外有一点需要注意，由于是无状态组件，所以，无论props是否变更，都会重新刷新这个组件。请看以下代码

import React from "react";

export default function(props){
     let lastTime = +new Date()
     return <div>{props.name},lastTime:{lastTime}</div>
}

export default class Index extends React.PureComponent{
    constructor(props){
        super(props)
    }
    render () {
        let lastTime = +new Date()
        return <div>{this.props.name},lastTime:{lastTime}</div>
    }
}

我们继承的是React新的PureComponent，这个方法会自动对数据进行浅层对比。

你可以通过注释上面两个export你会发现，点击按钮之后，如果是无状态组件，那么它将跟随变动而刷新。 如果是继承PureComponent的，则没有任何改变。