一、React.createClass与React.Component区别
1、函数this绑定:
React.createClass 创建的组件自动绑定this
const Contacts = React.createClass({
handleClick() {
console.log(this); // React Component instance
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
React.Component创建的组件,其成员函数不会自动绑定this,需要开发者手动绑定
class Contacts extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this); // null
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
2、组件属性类型 propTypes 及其默认 props 属性 defaultProps 配置不同
React.createClass在创建组件时,有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置;defaultProps是使用getDefaultProps方法来获取默认组件属性的
const TodoItem = React.createClass({
propTypes: { // as an object
name: React.PropTypes.string
},
getDefaultProps(){ // return a object
return {
name: ''
}
}
render(){
return <div></div>
}
})
React.Component在创建组件时配置这两个对应信息时,他们是作为组件类的属性,不是组件实例的属性,也就是所谓的类的静态属性来配置的:
class TodoItem extends React.Component {
static propTypes = {//类的静态属性
name: React.PropTypes.string
};
static defaultProps = {//类的静态属性
name: ''
};
}
3、组件初始状态state配置不同
React.createClass创建的组件,其状态state是通过getInitState方法方法来配置组件的相关状态
const TodoItem = React.createClass({
// return an object
getInitialState(){
return {
isEditing: false
}
}
render(){
return <div></div>
}
})
React.Component创建的组件,其状态state是在construct中像初始化组件属性一样声明
class TodoItem extends React.Component{
constructor(props) {
super(props);
this.state = { // define this.state in constructor
isEditing: false
}
}
render() {
return <div></div>
}
}
二、受控组件和非受控组件
1、受控组件(Controlled Component)
class ControlledForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
this.handleSubmit = this.handleSubmit.bind(this);
this.updateUsername = this.updateUsername.bind(this);
}
updateUsername(e) {
this.setState({
username: e.target.value,
})
}
handleSubmit() {}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
value={this.state.username}
onChange={this.updateUsername} />
<button type='submit'>Submit</button>
</form>
)
}
}
ReactDOM.render(<ControlledForm />, document.getElementById('react-root'))
受控组件将表单数据统一存放在 state 中,这意味着数据和UI是同步的,React 通过存放的表单数据来渲染UI。这样我们就可以根据用户的输入及时作出响应:验证输入正确性(输入格式、类型等),并作出反馈
根据输入设置其它组件的状态,譬如输入不规范时,提交按钮处于不可用状态
2、非受控组件(Uncontrolled Component)
和传统的表单数据管理一样,由DOM存放表单数据,可以使用React提供的refs来获得DOM元素的引用。
class UnControlledForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
console.log("Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}
ReactDOM.render(<UnControlledForm />, document.getElementById('react-root'));
非受控组件是一种相对简单的方式,在需要的时候(譬如表单提交的时候)一次性获取表单的值。