爲什麼React的組件是「組件」？

-2

在閱讀this article並編寫了幾個React應用之後，我仍然不明白爲什麼「組件」被稱爲組件。即我知道這是「一段代碼」，但對於我來說，來自C＃和Python這個詞的「封裝」意味着很多。在陣營我看到創建，例如，成分「UsernamePasswordComponent」，看起來像：爲什麼React的組件是「組件」？

class UsernamePasswordComponent extends React.Component { 
    render() { 
    return(
     <div> 
     <input type="text" name="username" 
      value={this.props.username} onChange={this.props.handlerUsernameFromParentComponent} /> 
     <input type="password" name="password" 
      value={this.props.password} onChange=this.props.handlerUsernameFromParentComponent /> 
     <button onClick={this.props.handlerClickFromParentComponent}>Login</> 
     </div> 
    ); 
}

我被迫存放在父母（通常是root）狀態password和username，我必須寫大量的垃圾在PARENT組件來處理孩子的變化事件。我不明白。

所以最後我有以下問題：

爲什麼陣營提供的雙向綁定這麼醜法？我喜歡LinkedStateMixin，但它被標記爲「已棄用」。爲什麼？？？
爲什麼我必須將paswword和username存儲在父級狀態中，而不是將其封裝在子組件中，並提供一種從其獲取數據的接口。或者這個組件可以用更多的反應方式重寫並封裝所有東西？

來源

2017-08-08 Alex G.P.

1）在React世界中，雙向數據綁定或多或少地被忽視。統一的數據流對於複雜的應用程序更容易推理。 2）React組件通常可以放入演示文稿類別（僅顯示內容）和容器類別。將設計與業務邏輯分開總是一個好主意。 – marvinhagemeister

我想你錯過了關於React架構的觀點。你應該實際使用的是flux架構，還是其簡單的版本叫做redux。這將允許你完全分離你的組件狀態。 – Sulthan

您應該在組件中存儲password和username字段。因爲與該處理有關的所有內容均爲，該組件內部爲。父母不在乎。父母只需要憑據的結果。

在你的情況下，你有一個簡單的組件，但有更復雜的結構，例如整個表。你不想在你父母處理表格狀態，因爲你不在乎。你只想通過dataSource到TableComponent並讓它在那裏處理。

定義回調是完全正確的 - 所以你實際上得到你想要的。

來源

2017-08-08 08:57:41

LinkedStateMixin從React v15開始已棄用。建議使用來顯式設置值和更改處理程序，而不是使用 LinkedStateMixin。

來源：https://facebook.github.io/react/docs/two-way-binding-helpers.html

爲什麼我要paswword和用戶名保存在父母的狀態，而不是封裝這裏面子和從中獲取數據提供了一種接口。

你的代碼中有onChange={this.props.handlerUsernameFromParentComponent}因爲username和password現場父組件（孩子只能讀取和通過寫它的母公司）上。它通常被定義，那是因爲你需要在另一個組件使用這些username和password值，在作出反應，最好是共享的「狀態」是lifted up the component hierarchy.

或者這種成分還能在更多的反應路被重寫封裝一切？

是的，像React推薦的那樣寫它，將共享狀態提升到父組件，例如， App主機username和passowrd狀態，並傳遞值和處理程序作爲道具。 App封裝了需要在子組件之間共享的應用程序的狀態。

此模型中不需要兄弟組件之間的通信。

來源

2017-08-08 08:59:37 bakkal

是的，我知道我的處理程序是在父組件和父變量定義的變量中定義的。我對此不滿意。我想它應該在子控件內部定義並且可以在外部使用。但是如何？ –

@ AlexG.P。您好，我可以將您鏈接到[post]（http://andrewhfarmer.com/component-communication/），它描述了組件之間的非流量通信。但說實話，我感覺到你對React如何讓你做事情感到沮喪，例如Flux拱門。但它確實爲您提供了一個很好的代碼庫，因爲如果沒有直接的兄弟對兄弟間的通信，組件之間不必知道彼此，因爲父應用程序協調事物，因此組件更具可重用性。假設你想/必須使用React。 – bakkal

爲什麼React的組件是「組件」？

回答

相關問題