React組件和React組件實例有什麼區別？

我讀this和它說：React組件和React組件實例有什麼區別？

當組件是單獨道具純粹的結果，沒有狀態時，組件可以寫成純函數避免了需要創建陣營組件實例。

組件與組件實例有什麼區別？

他們是否一樣？

編輯：

是什麼Component和Component Instance之間的區別？
它們是如何相互關聯的？
從概念上？
它們在計算機內存中的表現如何？表示有何不同？
什麼是組件？什麼是組件的實例？（在內存中）什麼樣的JS對象？
實例在什麼意義上？面向對象的感覺？
確實每個組件都可以有（一個或多個）實例嗎？
組件有多少個實例？
是否有意義的說，可以爲每個反應組件創建一個實例？
如何創建反應組件實例以及如何創建組件？

原因問：

我想創建一個概念圖的反應澄清的術語，以及它們如何相互關聯的。

這裏是一個草案：

來源

2016-11-04 jhegedus

這似乎相關但不回答問題：http://stackoverflow.com/questions/27112274/multiple-instances-of-same-react-component – jhegedus

簡單而簡單的是：無狀態組件是一個沒有得到類似'componentDidMount'和'componentWillReceiveProps'的生命週期事件;它實際上只是呈現你通過它的任何道具。如果您創建了一個擴展了'React.Component'的''類，那麼您現在已經創建了一個可以訪問生命週期事件的有狀態組件。 – lux

經過一段時間的答案是 - 對我來說：它是在OO相同，組件是類/類型，組件實例是一個類型爲「Component」的對象，就像在Java等... – jhegedus

的基本區別是，當一個Component，陣營將運行/添加其所有Lifecycle methods。當您的組件中有state時，這會很有用。當你使用這個組件時，React將創建一個React Component Instance，它將會添加所有的生命週期方法和其他鉤子。

class App extends React.Component{ 
    ... 
}

在某些情況下，你不會用state。在這些情況下，添加所有這些生命週期方法是不必要的。因此，React爲您提供了一種創建僅具有render的組件的方法。它被稱爲PureComponent。當您使用此功能時，無需創建新的Component Instance，因爲此處沒有生命週期方法。它只是一個函數，可以使用props並返回React元素。

class App extends React.PureComponent{ 
    ... 
}

希望這有助於！

[更新]

什麼是Component和Component Instance？

從技術上講，React的Component是class或function。

例子：

class App extends React.Component{ 
... 
} 

//stateless component 
const App = (props) => { 
... 
}

當您使用component，它會被實例化，更像new App()。但是，React本身以不同的方式進行。

例如：

render(){ 
    return <App/> //Instance of the component App 
}

實例是因爲需要，每個實例可以單獨執行。實例是原始類的副本。

簡單的答案是，components將是一個Class和component Instance將是類的複製/實例，將在render

希望這解釋了使用！

來源

2016-11-04 16:30:44

我明白了，但什麼'Component'和'Component Instance'之間的區別是什麼？它們如何與對方相關？概念上？什麼是「組件」，什麼是「組件」的實例？每個「組件」都可以有一個實例嗎？一個'component'可以有多少個實例？說一個實例可以爲一個/每個反應「組件」創建是否有意義？如何創建反應「組件」實例？如何表示一個實例，以及如何表示「組件」？ – jhegedus

我更新了問題。 – jhegedus

@jhegedus更新了答案！ –

要回答這個問題：

當組件是單獨道具純粹的結果，沒有一個州，該組件可以寫成純函數避免了創建React組件實例的需要。

「React組件實例」僅使用類來實例化React組件。見下面的例子（ES6/JSX），其中包含兩個道具和狀態：

class MyComponentInstance extends React.Component { 
    constructor(props) { 
     super(props); 
     // set initial state 
     this.state = { 
      example: 'example' 
     }; 
    } 
    render() { 
     return <div> 
      <div>{this.state.example}</div> 
      <div>{this.props.example}</div> 
     </div>; 
    } 
}

如果你沒有必要在你的組件的狀態，你可以使用純無狀態的功能性反應部分，像這樣：

function MyStatelessFunctionalComponent(props) { 
    return <div>{this.props.example}</div>; 
}

下面是關於無狀態React組件在React 0.14中引入的更多信息。 https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.yv0zxjxr5

更新：像其他評論中提到，在這裏具體有：使用無狀態的組件時的性能優勢......

由於沒有國家或生命週期方法的擔心，該陣營隊計劃以避免將來版本中不必要的檢查和內存分配。

https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.ttiirkcf4

來源

2016-11-04 13:46:54 bradcush

React組件和React組件實例有什麼區別？

回答

相關問題