摘要:本質(zhì)上是一個工廠函數(shù),的方式更加接近最新的規(guī)范的寫法。兩種方式在語法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。和的區(qū)別主要在于語法區(qū)別和狀態(tài)的區(qū)別區(qū)別語法區(qū)別后一種方法使用的語法,用構(gòu)造器來構(gòu)造默認(rèn)的屬性和狀態(tài)。
createClass本質(zhì)上是一個工廠函數(shù),extends的方式更加接近最新的ES6規(guī)范的class寫法。兩種方式在語法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。createClass方式的方法定義使用逗號,隔開,因為creatClass本質(zhì)上是一個函數(shù),傳遞給它的是一個Object;而class的方式定義方法時務(wù)必謹(jǐn)記不要使用逗號隔開,這是ES6 class的語法規(guī)范。
React.createClass和extends Component的區(qū)別主要在于:
語法區(qū)別
propType 和 getDefaultProps
狀態(tài)的區(qū)別
this區(qū)別
Mixins
語法區(qū)別React.createClass
import React from "react"; const Contacts = React.createClass({ render() { return ( ); } }); export default Contacts;
React.Component
import React from "react"; class Contacts extends React.Component { constructor(props) { super(props); } render() { return ( ); } } export default Contacts;
后一種方法使用ES6的語法,用constructor構(gòu)造器來構(gòu)造默認(rèn)的屬性和狀態(tài)。
propType 和 getDefaultPropsReact.createClass:通過proTypes對象和getDefaultProps()方法來設(shè)置和獲取props.
import React from "react"; const Contacts = React.createClass({ propTypes: { name: React.PropTypes.string }, getDefaultProps() { return { }; }, render() { return ( ); } }); export default Contacts;
React.Component:通過設(shè)置兩個屬性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 } }狀態(tài)的區(qū)別
React.createClass:通過getInitialState()方法返回一個包含初始值的對象
import React from "react"; let TodoItem = React.createClass({ // return an object getInitialState(){ return { isEditing: false } } render(){ return } })
React.Component:通過constructor設(shè)置初始狀態(tài)
import React from "react"; class TodoItem extends React.Component{ constructor(props){ super(props); this.state = { // define this.state in constructor isEditing: false } } render(){ return } }this區(qū)別
React.createClass:會正確綁定this
import React from "react"; const Contacts = React.createClass({ handleClick() { console.log(this); // React Component instance }, render() { return ( //會切換到正確的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 } }
我們還可以在 constructor 中來改變 this.handleClick 執(zhí)行的上下文,這應(yīng)該是相對上面一種來說更好的辦法,萬一我們需要改變語法結(jié)構(gòu),這種方式完全不需要去改動 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 ( ); } } export default Contacts;Mixins
如果我們使用 ES6 的方式來創(chuàng)建組件,那么 React mixins 的特性將不能被使用了。
React.createClass:使用 React.createClass 的話,我們可以在創(chuàng)建組件時添加一個叫做 mixins 的屬性,并將可供混合的類的集合以數(shù)組的形式賦給 mixins。
import React from "react"; let MyMixin = { doSomething(){} } let TodoItem = React.createClass({ mixins: [MyMixin], // add mixin render(){ return } })
參考文章1
參考文章2
參考文章3
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/79863.html
摘要:是以的形式來創(chuàng)建的組件的,是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式,最終會取代形式相對于可以更好實現(xiàn)代碼復(fù)用。當(dāng)然,有三種手動綁定方法可以在構(gòu)造函數(shù)中完成綁定,也可以在調(diào)用時使用來完成綁定,還可以使用來綁定。 React推出后,出于不同的原因先后出現(xiàn)三種定義react組件的方式,殊途同歸;具體的三種方式: 函數(shù)式定義的無狀態(tài)組件 es5原生方式React.createClass定義的組件...
摘要:用這種方式創(chuàng)建組件時,并沒有對內(nèi)部的函數(shù),進(jìn)行綁定,所以如果你想讓函數(shù)在回調(diào)中保持正確的,就要手動對需要的函數(shù)進(jìn)行綁定,如上面的,在構(gòu)造函數(shù)中對進(jìn)行了綁定。 當(dāng)我們談起React的時候,多半會將注意力集中在組件之上,思考如何將頁面劃分成一個個組件,以及如何編寫可復(fù)用的組件。但對于接觸React不久,還沒有真正用它做一個完整項目的人來說,理解如何創(chuàng)建一個組件也并不那么簡單。在最開始的時候...
摘要:但非常不幸,并不原生支持。這個單詞相信都很熟悉,高階函數(shù)在函數(shù)式編程是一個基本概念,它描述的是這樣一種函數(shù),接受函數(shù)作為輸入,或是輸出一個函數(shù)。比如常用的工具方法都是高階函數(shù)。恰與的定義完全一致。這種不同很可能會導(dǎo)致問題的產(chǎn)生。 在 React component 構(gòu)建過程中,常常有這樣的場景,有一類功能要被不同的 Component 公用,然后看得到文檔經(jīng)常提到 Mixin(混入) ...
摘要:丟失問題文本是為了說清目前的機(jī)制是而不是我們以為的機(jī)制,并說明這兩者的區(qū)別。雖然明白了原理,但是問題并沒有解決。上下文注意這里是,需要執(zhí)行接受回調(diào)函數(shù),回調(diào)函數(shù)中的內(nèi)容為實測可以成功拿到。 React context 丟失問題 文本是為了說清react context目前的機(jī)制是owner context 而不是我們以為的parent context 機(jī)制,并說明這兩者的區(qū)別。...
摘要:如果是在中,我們也許只能這樣做但是,在中,我們不僅可以在對象字面量屬性的定義中使用表達(dá)式,還有使用使用字符串模板析構(gòu)擴(kuò)展運算符我們在編寫組件的過程中,經(jīng)常遇到要從父組件要把自己的很多屬性多傳給子組件的情況。 原文地址: http://babeljs.io/blog/2015/06/07/react-on-es6-plus/ showImg(http://7xiyp1.com1.z0.g...
閱讀 3021·2023-04-25 18:00
閱讀 2222·2021-11-23 10:07
閱讀 4060·2021-11-22 09:34
閱讀 1249·2021-10-08 10:05
閱讀 1572·2019-08-30 15:55
閱讀 3435·2019-08-30 11:21
閱讀 3339·2019-08-29 13:01
閱讀 1378·2019-08-26 18:26