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