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的，则没有任何改变。

reflink:https://www.yodfz.com/detail/...