在ReactJs中定義組件的兩種方式之間的區別

我在兩種方式中聲明瞭ReactJs中的組件。有什麼不同，因爲兩者似乎都很好！在ReactJs中定義組件的兩種方式之間的區別

案例一：

function Roger(props){ 
    return <h1>Hello! {props.name},{props.message}</h1>; 
}

案例二：

var Roger = React.createClass({ 
    render: function() { 
    return (
     <h1>Hello! {props.name},{props.message}</h1> 
    ); 
    } 
});

誰能幫助我理解的差異？

來源

2017-04-20 Deadpool

檢查在'無國籍功能Component'更詳細的計算器的文檔，它會科夫在詳細所有點：http://stackoverflow.com/documentation/reactjs/6588/stateless官能化的組分＃噸= 201704200855545376703 –

案例I正在創建無狀態功能組件，根據經驗，建議儘可能使用它。例如，如果您需要使用this或者您需要生命週期方法，則情況II很有用。

檢查這個偉大的帖子以瞭解詳情：http://jamesknelson.com/should-i-use-react-createclass-es6-classes-or-stateless-functional-components/

從官方文檔：

定義組件最簡單的方法是寫一個JavaScript函數：

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
}

此函數是一個有效的React組件，因爲它接受帶有數據的單個「道具」對象參數並返回一個React元素。我們稱這樣的組件「功能」，因爲它們實際上是JavaScript 功能。

也可以使用一個ES6類來定義的組件：

class Welcome extends React.Component { 
    render() { 
    return <h1>Hello, {this.props.name}</h1>; 
    } 
}

上述兩個組件是從陣營的觀點等效。

類有一些額外的功能，我們將在下一個部分討論。在此之前，我們將使用功能組件來簡化它們。

來源：https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

來源

2017-04-20 09:31:48

在ReactJs中定義組件的兩種方式之間的區別

回答

相關問題