首頁 >web前端 >js教程 >關於React創建組件的三種方式及其區別

關於React創建組件的三種方式及其區別

不言原創: 2018-06-30 15:09:541225瀏覽

本文主要介紹了React創建組件的三種方式及其區別，具有一定的參考價值，下面一起來看下吧

React推出後，出於不同的原因先後出現三種定義react元件的方式，殊途同歸；具體的三種方式：

函數式定義的無狀態元件
es5原生方式React.createClass定義的元件
es6形式的extends React.Component定義的元件

雖然有三種方式可以定義react的元件，那麼這三種定義元件方式有什麼不同呢？或者說為什麼會出現對應的定義方式呢？下面就簡單介紹一下。

無狀態函數式元件

建立無狀態函數式元件形式是從React 0.14版本開始出現的。它是為了創建純展示組件，這種組件只負責根據傳入的props來展示，不涉及到要state狀態的操作。具體的無狀態函數式元件，其官方指出：

在大部分React程式碼中，大多數元件被寫成無狀態的元件，透過簡單組合可以建構成其他的元件等；這種透過多個簡單然後合併成一個大應用的設計模式被提倡。

無狀態函數式元件形式上表現為一個只帶有一個render方法的元件類，透過函數形式或ES6 arrow function的形式在創建，並且該元件是無state狀態的。具體的創建形式如下：

function HelloComponent(props, /* context */) {
 return <p>Hello {props.name}</p>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

無狀態元件的建立形式使程式碼的可讀性更好，並且減少了大量冗餘的程式碼，精簡至只有一個render方法，大大的增強了寫一個元件的便利，除此之外無狀態元件還有以下幾個顯著的特點：

1.元件不會被實例化，整體渲染性能得到提升

因為元件被精簡成一個render方法的函數來實現的，由於是無狀態元件，所以無狀態元件就不會在有元件實例化的過程，無實例化過程也就不需要分配多餘的內存，從而性能得到一定的提升。

2.元件不能存取this物件

無狀態元件由於沒有實例化過程，所以無法存取元件this中的對象，例如：this.ref、this .state等均不能訪問。若想存取就不能使用這種形式來建立元件

3.元件無法存取生命週期的方法

因為無狀態元件是不需要元件生命週期管理和狀態管理，所以底層實現這種形式的元件時是不會實現元件的生命週期方法。所以無狀態組件是不能參與組件的各個生命週期管理的。

4.無狀態元件只能存取輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用

無狀態元件被鼓勵在大型專案中盡可能以簡單的寫入法來分割原本龐大的元件，未來React也會這種面向無狀態元件在譬如無意義的檢查和記憶體分配領域進行一系列最佳化，所以只要有可能，盡量使用無狀態元件。

React.createClass

`React.createClass`是react剛開始推薦的建立元件的方式，這是ES5的原生的JavaScript來實現的React元件，其形式如下：

var InputControlES5 = React.createClass({
 propTypes: {//定义传入props中的属性各种类型
 initialValue: React.PropTypes.string
 },
 defaultProps: { //组件默认的props对象
 initialValue: &#39;&#39;
 },
 // 设置 initial state
 getInitialState: function() {//组件相关的状态对象
 return {
 text: this.props.initialValue || &#39;placeholder&#39;
 };
 },
 handleChange: function(event) {
 this.setState({ //this represents react component instance
 text: event.target.value
 });
 },
 render: function() {
 return (
 <p>
 Type something:
 <input onChange={this.handleChange} value={this.state.text} />
 </p>
 );
 }
});
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

與無狀態元件相比，React.createClass和後面要描述的React.Component都是建立有狀態的元件，這些組件是要被實例化的，並且可以存取組件的生命週期方法。但是隨著React的發展，React.createClass形式本身的問題暴露出來：

#React.createClass會自綁定函數方法（不像React.Component只綁定需要關心的函數）導致不必要的效能開銷，增加程式碼過時的可能性。
React.createClass的mixins不夠自然、直觀；React.Component形式非常適合高階元件（Higher Order Components--HOC）,它以更直觀的形式展示了比mixins更強大的功能，並且HOC是純淨的JavaScript，不用擔心他們會被廢棄。

React.Component

React.Component是以ES6的形式來創建react的元件的，是React目前極為推薦的創建有狀態組件的方式，最終會取代React.createClass形式；相對於React.createClass可以更好實現程式碼重複使用。將上面React.createClass的形式改為React.Component形式如下：

class InputControlES6 extends React.Component {
 constructor(props) {
 super(props);
 // 设置 initial state
 this.state = {
 text: props.initialValue || &#39;placeholder&#39;
 };
 // ES6 类中函数必须手动绑定
 this.handleChange = this.handleChange.bind(this);
 }
 handleChange(event) {
 this.setState({
 text: event.target.value
 });
 }
 render() {
 return (
 <p>
 Type something:
 <input onChange={this.handleChange}
 value={this.state.text} />
 </p>
 );
 }
}
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

React.createClass與React.Component區別

根據上面展示程式碼中二者定義元件的語法格式不同之外，二者還有很多重要的區別，以下就描述二者的主要區別。

函數this自綁定

React.createClass建立的元件，其每個成員函數的this都有React自動綁定，任何時候使用，直接使用this.method即可，函數中的this會被正確設定。

const Contacts = React.createClass({ 
 handleClick() {
 console.log(this); // React Component instance
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

class Contacts extends React.Component { 
 constructor(props) {
 super(props);
 }
 handleClick() {
 console.log(this); // null
 }
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }

当然，React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。拿上例的handleClick函数来说，其绑定可以有：

 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this); //构造函数中绑定
 }

<p onClick={this.handleClick.bind(this)}></p> //使用bind来绑定
   <p onClick={()=>this.handleClick()}></p> //使用arrow function来绑定

组件属性类型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: &#39;&#39; 
 }
 }
 render(){
 return <p></p>
 }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

class TodoItem extends React.Component {
 static propTypes = {//类的静态属性
 name: React.PropTypes.string
 };
 static defaultProps = {//类的静态属性
 name: &#39;&#39;
 };
 ...
}

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态；

React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

const TodoItem = React.createClass({
 // return an object
 getInitialState(){ 
 return {
 isEditing: false
 }
 }
 render(){
 return <p></p>
 }
})

class TodoItem extends React.Component{
 constructor(props){
 super(props);
 this.state = { // define this.state in constructor
 isEditing: false
 } 
 }
 render(){
 return <p></p>
 }
}

Mixins的支持不同

Mixins(混入)是面向对象编程OOP的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过Mixins进该对象来达到代码复用。

React.createClass在创建组件时可以使用mixins属性，以数组的形式来混合类的集合。

var SomeMixin = { 
 doSomething() {
 }
};
const Contacts = React.createClass({ 
 mixins: [SomeMixin],
 handleClick() {
 this.doSomething(); // use mixin
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

但是遗憾的是React.Component这种形式并不支持Mixins，至今React团队还没有给出一个该形式下的官方解决方案；但是React开发者社区提供一个全新的方式来取代Mixins,那就是Higher-Order Components。

如何选择哪种方式创建组件

由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以：

能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

除此之外，创建组件的形式选择还应该根据下面来决定：

1、只要有可能，尽量使用无状态组件创建形式。

2、否则（如需要state、生命周期方法、ref等），使用`React.Component`这种es6形式创建组件

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

關於React創建組件的三種方式及其區別

相關文章