前面的示例都是渲染的元素，主要是用来阐述ReactDOM.render()工作原理。通常在React项目中是不这样做的。我们常常会它封装到一个React组件中，然后再通过ReactDOM.render()把这个组件渲染出来。
- 在React中元素是构成React应用的最小单位。
1.什么是组件
- React是专注于View层的，组件也是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成。React组件可以看成构造出一个虚拟DOM结构的对象。
2.React创建组件的方式
在React中创建组件有三种方式：
- 有状态组件(ES6写法)：React.Component
- 有状态组件(ES5写法)：React.createClass（注：此方法旧版本react可用，现已不可用）
- 无状态组件的函数写法（函数组件）。
3.有状态？无状态？
- 无状态组件，它是一种只负责展示的纯组件。这种组件只负责根据传入的props来展示，不涉及到要state状态、生命周期等操作。
- 有状态组件，需要涉及state、生命周期等操作。
- React鼓励在大型项目中尽可能以无状态组件的写法 来分割原本庞大的组件。
4.React.createClass
注：React.createClass方法现已经不可用，本文章总结只是为了和es6写法作对比，从而更好的理解。
React.createClass是React刚开始创建组件的方式。这是ES5的原生的JavaScript封装的函数来实现的React组件。
动手敲个小例子
我们用一个小例子来了解一下组件的创建的机制。该例子包含一个文本框和一个按钮，单击按钮可以改变文本框的编辑状态：禁止编辑或允许编辑。并且显示自定义属性文本。
image
var SwitchInput = React.createClass({
getDefaultProps : function () {
return {myattr: "我是默认的属性"}
}
getInitialState:function(){
return {enable:false}
},
handleClick:function(event){
this.setState({enable:!this.state.enable})
},
render:function(){
return (
<p>
<input type="text" disabled={this.state.enable} />
<button onClick={this.handleClick}>改变textbox状态</button>
</p>
)
}
});
ReactDOM.render(<SwitchInput myattr="我是传过来的属性"/>, document.getElementById('root'));
state:
- 组件总是需要和用户互动的。React的一大创新，就是将界面组件看成一个状态机，用户界面拥有不同状态并根据状态进行渲染输出，用户界面和数据始终保持一致。开发者的主要工作就是定义state，并根据不同的state渲染对应的用户界面。
setState()
- React自带方法。通知React组件数据发生变化的方法是调用成员函数setState(data,callback)。这个函数会合并data到this.state,并重新渲染组件。
getInitialState
- 存放state的容器。
props即属性(Property)， 在代码中写作 props ， 即可用 props 指代 properties .
- 组件的属性
getDefaultProps
- 存放props的容器
render
- 用于将模板转为HTML语言，并插入指定的DOM节点。
props和state的区别
-
props是只读的，不能在组件中修改，只能通过组件传递；state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。
-
在设计组件时，就要想好组件哪些使用state，哪些使用props集合，哪些使用state集合。通常固定的组件内只读的、由父组件传递进来的属性适合放在props集合中。
5.React.Component
ES6中类的出现改变了我们定义组件的方式，如今，React.createClass已经不可使用，新版本的react创建有状态组件都是使用React.component来创建。
我们将上面例子使用es6的方法改写下。
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class SwitchInput extends React.Component {
constructor(props) {
super(props)
this.state = {
enable: true
}
this.handleClick = this.handleClick.bind(this) //绑定this
}
handleClick(event) {
this.setState({
enable: !this.state.enable
})
}
render() {
return (
<p>
<input type="text" disabled={this.state.enable}/>
<button onClick={this.handleClick}>
改变输入框编辑状态
</button>
自定义属性：{this.props.myattr}
</p>
)
}
}
SwitchInput.defaultProps={
myattr: "我是默认的属性"
}
SwitchInput.propTypes = {
myattr: PropTypes.string
};
ReactDOM.render(<SwitchInput myattr="我是传过来的属性"/>, document.getElementById('root'));
- 默认属性放到defaultProps中
- state值放到constructor构造函数中。
- prop-types库是react自带的属性类型检测库。这里设置myattr为字符串类型，若传入其他类型，会在控制台报错。具体可查看官网。http://www.css88.com/react/docs/typechecking-with-proptypes.html
不清楚constructor以及super等写法可以看我之前的文章。ES6学习-类（Class）的声明1
React.createClass与React.Component区别
根据上面展示代码中二者定义组件的语法格式不同之外，二者还有很多重要的区别，下面就描述一下二者的主要区别。
- React.Component可以有选择性的绑定需要的函数，React.createClass会自动绑定函数，这样会导致不必要的性能开销。
- 函数this自绑定
React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this指向类的实例。
const Contacts = React.createClass({
handleClick() {
console.log(this); // React 实例
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。
class Contacts extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this); // null
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
具体绑定方法有三种：
-
在构造函数中绑定this.
constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); //构造函数中绑定 } -
直接在结构中绑定
<div onClick={this.handleClick.bind(this)}></div> //使用bind来绑定 -
使用箭头函数绑定
<div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定
绑定成功后，这样在自定义函数中间就可以使用this了，若不使用this可以不绑定。
6.无状态组件
无状态组件其实是通过函数形式或者ES6 arrow function的形式创建的，它是为了创建纯展示组件。这种组件只负责根据传入的props来展示，不涉及到state状态的操作。
function HelloComponent(props) {
return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="react" />, document.getElementById('root')) //Hello react
react鼓励尽量使用无状态组件。其又以下几个显著特点：
- 无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利。
- 组件不会被实例化，无实例化过程也就不需要分配多余的内存，从而整体渲染性能得到提升
- 组件不能访问this对象。（无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件）
- 组件无法访问生命周期的方法（因为无状态组件是不需要组件生命周期管理和状态管理）
- 无状态组件只能访问输入的props，不涉及state等操作。
网友评论