众所周知,React是一个专注于View层的前端框架,组件也】是React核心理念之一,一个完整的应用将由一个个独立的组件拼装而成,组件也是React最基础的一部分,学习React就需要先学习组件。
React中创建组件的方式
在了解React中的无状态和有状态的组件之前,先来了解在React中创建组件的三种方式:
- ES5写法:React.createClass;
- ES6写法:React.Component;
- 无状态的函数写法,又称为纯组件SFC。
React.createClass
React.createClass是React刚开始推荐的创建组件的方式。这是ES5的原生的JavaScript来实现的React组件。React.createClass这个方法构建一个组件“类”,它接受一个对象为参数,对象中必须声明一个render()方法,render()方法将返回一个组件实例。例如:
import React from 'react'
import ReactDOM from 'react-dom'
const SwitchButton = React.createClass({
getDefaultProp: function () {
return {open: false}
},getInitialState: function () {
return {open: this.props.open};
},handleClick: function (event) {
this.setState({open: !this.state.open});
},render: function () {
var open = this.state.open,className = open ? 'switch-button open' : 'btn-switch';
return (
<label className={className} onClick={this.handleClick.bind(this)}> <input type="checkBox" checked={open}/>男 </label> ); } }); ReactDOM.render(<SwitchButton/>,document.getElementById('root'));
React.createClass是用来创建有状态的组件,这些组件在使用时是要被实例化的,并且可以访问组件的生命周期方法。不过React.createClass创建React组件有其自身的问题存在:
React.Component
React.Component是以ES6的形式来创建React组件,也是现在React官方推荐的创建组件的方式,其和React.createClass创建的组件一样,也是创建有状态的组件。React.Component正在逐渐取代React.createClass,上面的例子使用React.Component实现如下。
import React from 'react'
import ReactDOM 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('root'))
相比React.createClass方式,React.Component带来了诸多语法上的改进
import
ES6使用import方式替代ES5的require方式来导入模块,其中import { }可以直接从模块中导入变量名,此种写法更加简洁直观。
初始化 state
在ES6的语法规则中,React的组件使用的类继承的方式来实现,去掉了ES5的getInitialState的hook函数,state的初始化则放在constructor构造函数中声明。
this绑定
React.Component创建组件时,事件函数并不会自动绑定this,需要我们手动绑定,不然this将不会指向当前组件的实例对象。
以下有三种绑定this的方法:
1,在constructor中使用bind()进行硬绑定。
constructor() { this.handleClick = this.handleClick.bind(this); }
- 直接在元素上使用bind()绑定。
<label className={className} onClick={this.handleClick.bind(this)}>
- ES6 有个很有用的语法糖:Arrow Function(箭头函数)它可以很方便的使this直接指向class SwitchButton。
<label className={className} onClick={()=>this.handleClick()}>
无状态组件
无状态的函数创建的组件是无状态组件,它是一种只负责展示的纯组件,它的特点是不需要管理状态state,数据直接通过props传入,这也符合 React 单向数据流的思想。例如:
function HelloComponent(props) {
return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="marlon"/>,mountNode)
对于这种无状态的组件,使用函数式的方式声明,会使得代码的可读性更好,并能大大减少代码量,箭头函数则是函数式写法的最佳搭档。
const Todo = (props) => ( <li onClick={props.onClick} style={{@H_502_270@textDecoration: @H_502_270@props.complete ? "line-through" : "none"}}> {props.text} </li> )
上面定义的 Todo 组件,输入输出数据完全由props决定,而且不会产生任何副作用,对于props为 Object 类型时,还可以使用 ES6 的解构赋值。
const Todo = ({onClick,complete,text,...props}) => ( <li onClick={onClick} style={{@H_502_270@textDecoration: @H_502_270@complete ? "line-through" : "none"}} {...props} > {props.text} </li> )
无状态组件一般会搭配高阶组件(简称:HOC)一起使用,高阶组件用来托管state,Redux 框架就是通过 store 管理数据源和所有状态,其中所有负责展示的组件都使用无状态函数式的写法。
无状态组件内部其实是可以使用ref功能的,虽然不能通过this.refs访问到,但是可以通过将ref内容保存到无状态组件内部的一个本地变量中获取到。例如,下面这段代码可以使用ref来获取组件挂载到DOM中后所指向的DOM元素:
function TestComp(props) {
let ref;
return (
<div ref={(node) => ref = node}></div> )
}
无状态组件 vs 有状态组件
无状态组件:无状态组件(Stateless Component)是最基础的组件形式,由于没有状态的影响所以就是纯静态展示的作用。一般来说,各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性(props)加上一个渲染函数(render)。由于不涉及到状态的更新,所以这种组件的复用性也最强。
有状态组件:在无状态组件的基础上,如果组件内部包含状态(state)且状态随着事件或者外部的消息而发生改变的时候,这就构成了有状态组件(Stateful Component)。有状态组件通常会带有生命周期(lifecycle),用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的,根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同。
在React中,我们通常通过props和state来处理两种类型的数据。props是只读的,只能由父组件设置。state在组件内定义,在组件的生命周期中可以更改。基本上,无状态组件(也称为哑组件)使用props来存储数据,而有状态组件(也称为智能组件)使用state来存储数据。
总的来说:无状态函数式写法 优于React.createClass,而React.Component优于React.createClass。能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。