注意:在React中,组件的名字必须用大写字母开头,而包含该组件定义的文件名也应该是大写字母。
1、无状态组件
创建无状态函数式组件形式是从React 0.14版本开始出现的。它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作。具体的无状态函数式组件,其官方指出:在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等;这种通过多个简单然后合并成一个大应用的设计模式被提倡。对于这种无状态的组件,使用函数式的方式声明,会使得代码的可读性更好,并能大大减少代码量,Arrow Function 则是函数式写法的最佳搭档:
import React from 'react';
import PropTypes from 'prop-types';
const Greeting = (props) => {
const style = {
fontWeight: "bold",
}
return <div style={style}>{props.name}</div>
}
Greeting.PropTypes = {
props: PropTypes.object.isRequired
}
ReactDOM.render(
<Greeting name="marlon" />,
document.getElementById('app')
)
缺点:
1.无生命周期
一个组件就是一个函数,函数应该是谈不上生命周期的,但是组件却是有生命周期,stateless functions 没有生命周期。无状态组件一般会搭配高阶组件(简称:OHC)一起使用,高阶组件用来托管state,Redux框架就是通过store 管理数据源和所有状态,其中所有负责展示的组件都使用无状态函数式的写法。
2.没有 this
在 stateless functions 中,this 是 undefined,所以是不能使用 this 变量。
无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用。
2、React.Component
React 升级到 v0.13 后就支持了 ES6 的class语法,我们可以使用class App extends React.Component{…}的方式创建组件,这也是目前官方推荐创建有状态组件的方式。
import React from 'react'
import { render } from 'react-dom'
class SwitchButton extends React.Component {
constructor(props) {
super(props)
this.state = {
open: this.props.open
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(event) {
this.setState({ open: !this.state.open })
}
render() {
let open = this.state.open,
className = open ? 'switch-button open' : 'btn-switch'
return (
<label className={className} onClick={this.handleClick}>
<input type="checkbox" checked={open}/>
</label>
)
}
}
SwitchButton.defaultProps = {
open: false
}
ReactDOM.render(
<SwitchButton />,
document.getElementById('app')
)
3、无状态组件 vs 有状态组件
无状态组件:无状态组件(Stateless Component)是最基础的组件形式,由于没有状态的影响所以就是纯静态展示的作用。一般来说,各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性(props)加上一个渲染函数(render)。由于不涉及到状态的更新,所以这种组件的复用性也最强。有状态组件:在无状态组件的基础上,如果组件内部包含状态(state)且状态随着事件或者外部的消息而发生改变的时候,这就构成了有状态组件(Stateful Component)。有状态组件通常会带有生命周期(lifecycle),用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的,根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同。
而在React中,我们通常通过props和state来处理两种类型的数据。props是只读的,只能由父组件设置。state在组件内定义,在组件的生命周期中可以更改。基本上,无状态组件(也称为哑组件)使用props来存储数据,而有状态组件(也称为智能组件)使用state来存储数据。