比較根據React.createClass和React.Component

之間的所有部分：比較根據React.createClass和React.Component

我非常新的反應，我想知道如果任何人都可以給我createClass和extends Component

的第一個問題之間的比較爲什麼我們需要React.Component，因爲我們已經有了createClass？

其次，一些具體的事情是：

1.什麼this.state看起來像extends Component模式：我嘗試在構造函數（）使用this.state，但未能爲undifined，這是否意味着我必須通過給它整個狀態樹來自己構建this.state？

而對於兩個模式中的一個問題：

如果我想使用的setState（）用一個複雜的對象（其具有嵌套數據結構）我怎樣才能只根據一部分更新，例如，說的狀態是這樣的：

State = { 
    title: "", 
    attrs: { 
     size: { 
      width:"100px", 
      height: "100px" 
     } 
    } 
}

我怎樣才能只使用setState（）更新高度？我應該使用它像

setState({ 
    attrs: { 
     size: { 
      height:"200px" 
     } 
    } 
})

感謝

來源

2016-04-01 Kuan

有很多答案就這一議題在那裏：link，link

國家應在構造函數中初始化，你這樣做之前 - 它的不確定：

public constructor(props, context) 
{ 
    super(props, context) 

    this.state = { 
     Clients: [], 
    }; 
}

您可以隨時更新狀態的一部分，然後強制更新：
```
this.state.attrs.size.height = 200; 
this.forceUpdate(); 
```
或者只是更新狀態對象並再次使用setState重新分配它。

來源

2016-04-01 19:11:21 Amid

中使用es2015功能，謝謝，另一個與此相關的問題是：當我嘗試Facebook網站中的教程時，似乎大多數情況下仍使用createClass（）編寫，我想知道建議使用哪種模式：createClass或擴展組件 – Kuan

我的個人意見是 - 擴展 - 因爲它是javascript的未來。 – Amid

謝謝，順便說一句，這是什麼'上下文'意味着在構造函數？ – Kuan

React.createClass是定義反應成分舊的方式。 class當時在javascript中並不存在，所以這是React對'classes'的實現;

import React, {Component} from 'react'; 
class ReactComponent extends Component

是基於es2015類定義反應組件的新方法。

無論您如何定義組件，狀態都應該以相同的方式運行。

在構造函數中，您應該能夠定義this.state。

我會研究Flux體系結構並實現Redux或AltJS來幫助實現數據流架構。

在你的國家，如果你有一個對象：

q = { 
    title: "Test", 
    body : "Test123" 
}

，並要更新的標題......你必須做到以下幾點：

var x = this.state.q; 
x.title = "New Title"; 
this.setState({ q: x });

您不能修改一個對象的屬性在狀態。你必須用整個新對象更新屬性和setState。

來源

2016-04-01 19:00:40 erichardson30

感謝，與此相關的另一個問題是：當我試圖在Facebook的網站上的教程，似乎還寫有createClass（）大多數情況下，我想建議的模式：在createClass或擴展組件 – Kuan

@關我會認爲Facebook網站仍然使用createClass，因爲它不依賴於es2015。並非所有瀏覽器都支持es2015，因此您必須使用像babel這樣的轉譯器。大多數「較新」的例子都使用我見過的'extends Component'。這也取決於你是否想在你的JS代碼 – erichardson30

比較根據React.createClass和React.Component

回答

相關問題