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>
}

4_1.jpg

另外有一点需要注意,由于是无状态组件,所以,无论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的,则没有任何改变。

摄影爱好者,全栈工程师,游戏玩家,积木苦手,超穷手办收藏爱好者

发表评论

搜索

热门文章

最近回复