React创建组件两种写法：React.createClass和extends Component的区别

幸福一生张军良 發表於 2020-2-23 17:00:00

React创建组件两种写法：React.createClass和extends Component的区别

前言：
　　createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。
<div class="cnblogs_code">
<pre>React.createClass和extends Component的区别主要在于：
1、语法区别
2、propType 和 getDefaultProps
3、状态的区别
4、this区别
5、Mixins</pre>
</div>
 
主体：
<h2 id="item-1">语法区别</h2>
React.createClass
<pre class="javascript hljs"><code class="javascript">import React from 'react';

const Contacts = React.createClass({
render() {
return (
 <div></div>
);
}
});

export default Contacts;</code></pre>
React.Component
<pre class="javascript hljs"><code class="javascript">import React from 'react';

class Contacts extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
 <div></div>
);
}
}

export default Contacts;</code></pre>
后一种方法使用ES6的语法，用<code>constructor</code>构造器来构造默认的属性和状态。
<h2 id="item-2">propType 和 getDefaultProps</h2>
React.createClass：通过<code>proTypes</code>对象和<code>getDefaultProps()</code>方法来设置和获取<code>props</code>.
<pre class="javascript hljs"><code class="javascript">import React from 'react';

const Contacts = React.createClass({
propTypes: {
name: React.PropTypes.string
},
getDefaultProps() {
return {

};
},
render() {
return (
 <div></div>
);
}
});

export default Contacts;</code></pre>
React.Component：通过设置两个属性<code>propTypes</code>和<code>defaultProps</code>
<pre class="javascript hljs"><code class="javascript">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>
}
}</code></pre>
<h2 id="item-3">状态的区别</h2>
React.createClass：通过<code>getInitialState()</code>方法返回一个包含初始值的对象
<pre class="javascript hljs"><code class="javascript">import React from 'react';
let TodoItem = React.createClass({
// return an object
getInitialState(){
 return {
 isEditing: false
 }
}
render(){
 return <div></div>
}
})</code></pre>
React.Component：通过<code>constructor</code>设置初始状态
<pre class="javascript hljs"><code class="javascript">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>
}
}</code></pre>
<h2 id="item-4">this区别</h2>
React.createClass：会正确绑定<code>this</code>
<pre class="javascript hljs"><code class="javascript">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;</code></pre>
React.Component：由于使用了 ES6，这里会有些微不同，属性并不会自动绑定到 React 类的实例上。
<pre class="javascript hljs"><code class="javascript">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}/>
}
}</code></pre>
我们还可以在 constructor 中来改变 this.handleClick 执行的上下文，这应该是相对上面一种来说更好的办法，万一我们需要改变语法结构，这种方式完全不需要去改动 JSX 的部分：
<pre class="javascript hljs"><code class="javascript">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;</code></pre>
<h2 id="item-5">Mixins</h2>
如果我们使用 ES6 的方式来创建组件，那么 <code>React mixins</code> 的特性将不能被使用了。
React.createClass：使用 React.createClass 的话，我们可以在创建组件时添加一个叫做 <code>mixins </code>的属性，并将可供混合的类的集合以数组的形式赋给<code> mixins</code>。
<pre class="javascript hljs"><code class="javascript">import React from 'react';
let MyMixin = {
doSomething(){}
}
let TodoItem = React.createClass({
mixins: , // add mixin
render(){
 return <div></div>
}
})</code></pre>
 
 
 
 
 
. 
来源：https://www.cnblogs.com/fightjianxian/p/12350499.html

頁: [1]

琼殿技术论坛's Archiver

React创建组件两种写法：React.createClass和extends Component的区别