React创建组件两种写法:React.createClass和extends Component的区别
前言:
createClass本质上是一个工厂函数,extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开,因为creatClass本质上是一个函数,传递给它的是一个Object;而class的方式定义方法时务必谨记不要使用逗号隔开,这是ES6 class的语法规范。
React.createClass和extends Component的区别主要在于: 1、语法区别 2、propType 和 getDefaultProps 3、状态的区别 4、this区别 5、Mixins
主体:
语法区别
React.createClass
import React from 'react';
const Contacts = React.createClass({
render() {
return (
<div></div>
);
}
});
export default Contacts;
React.Component
import React from 'react';
class Contacts extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default Contacts;
后一种方法使用ES6的语法,用constructor
构造器来构造默认的属性和状态。
propType 和 getDefaultProps
React.createClass:通过proTypes
对象和getDefaultProps()
方法来设置和获取props
.
import React from 'react';
const Contacts = React.createClass({
propTypes: {
name: React.PropTypes.string
},
getDefaultProps() {
return {
};
},
render() {
return (
<div></div>
);
}
});
export default Contacts;
React.Component:通过设置两个属性propTypes
和defaultProps
import React form 'react';
class TodoItem extends React.Component{
static propTypes = { // as static property
name: React.PropTypes.string
};
static defaultProps = { // as static property
name: ''
};
constructor(props){
super(props)
}
render(){
return <div></div>
}
}
状态的区别
React.createClass:通过getInitialState()
方法返回一个包含初始值的对象
import React from 'react';
let TodoItem = React.createClass({
// return an object
getInitialState(){
return {
isEditing: false
}
}
render(){
return <div></div>
}
})
React.Component:通过constructor
设置初始状态
import React from 'react';
class TodoItem extends React.Component{
constructor(props){
super(props);
this.state = { // define this.state in constructor
isEditing: false
}
}
render(){
return <div></div>
}
}
this区别
React.createClass:会正确绑定this
import React from 'react';
const Contacts = React.createClass({
handleClick() {
console.log(this); // React Component instance
},
render() {
return (
<div onClick={this.handleClick}></div>//会切换到正确的this上下文
);
}
});
export default Contacts;
React.Component:由于使用了 ES6,这里会有些微不同,属性并不会自动绑定到 React 类的实例上。
import React from 'react';
class TodoItem extends React.Component{
constructor(props){
super(props);
}
handleClick(){
console.log(this); // null
}
handleFocus(){ // manually bind this
console.log(this); // React Component Instance
}
handleBlur: ()=>{ // use arrow function
console.log(this); // React Component Instance
}
render(){
return <input onClick={this.handleClick}
onFocus={this.handleFocus.bind(this)}
onBlur={this.handleBlur}/>
}
}
我们还可以在 constructor 中来改变 this.handleClick 执行的上下文,这应该是相对上面一种来说更好的办法,万一我们需要改变语法结构,这种方式完全不需要去改动 JSX 的部分:
import React from 'react';
class Contacts extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this); // React Component instance
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
export default Contacts;
Mixins
如果我们使用 ES6 的方式来创建组件,那么 React mixins
的特性将不能被使用了。
React.createClass:使用 React.createClass 的话,我们可以在创建组件时添加一个叫做 mixins
的属性,并将可供混合的类的集合以数组的形式赋给 mixins
。
import React from 'react';
let MyMixin = {
doSomething(){}
}
let TodoItem = React.createClass({
mixins: [MyMixin], // add mixin
render(){
return <div></div>
}
})
.
相关文章
- Android 使用ViewPager结合PhotoView开源组件实现网络图片在线浏览功能
- 第二百四十节,Bootstrap巨幕页头缩略图和警告框组件
- React Prompt组件 阻止用户离开页面
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React] Override webpack config for create-react-app without ejection
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- 【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解
- 兼容性强、简单、成熟、稳定的RTMPClient客户端拉流功能组件EasyRTMPClient
- [React] Using react-styleguidist for Component demo
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- 【STM32F407】第6章 RTX5调试组件使用方法(重要)
- Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结
- 5.4 jmeter组件—逻辑控制器
- Android自己定义组件系列【7】——进阶实践(4)
- React(一)react概述、组件、事件
- react源码分析:深度理解React.Context
- Taro React组件开发(8) —— RuiUploadImages 多图片上传组件【Promise.all 实现】
- Taro React组件使用(6) —— RuiSendCode 短信验证码【倒计时】