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/…