建立可重用元件的絕對基礎知識
元件和道具
由於 React 僅關注應用程式的檢視，因此 React 中的大部分開發都將是元件的建立。元件表示應用程式檢視的一部分。Props 只是 JSX 節點上使用的屬性（例如 <SomeComponent someProp="some prop's value" />），是我們的應用程式與元件互動的主要方式。在上面的程式碼片段中，在 SomeComponent 內部，我們可以訪問 this.props，其值為 {someProp: "some prop's value"}。
將 React 元件視為簡單函式可能很有用 - 它們以 props 的形式獲取輸入，並將輸出生成為標記。許多簡單的元件更進一步，使自己成為純函式，這意味著它們不會產生副作用，並且是冪等的（給定一組輸入，元件將始終產生相同的輸出）。通過實際建立元件作為函式而不是類，可以正式實現此目標。有三種方法可以建立 React 元件：
- 功能（無狀態）元件
const FirstComponent = props => (
<div>{props.content}</div>
);
React.createClass()
const SecondComponent = React.createClass({
render: function () {
return (
<div>{this.props.content}</div>
);
}
});
- ES2015 類
class ThirdComponent extends React.Component {
render() {
return (
<div>{this.props.content}</div>
);
}
}
這些元件的使用方式完全相同：
const ParentComponent = function (props) {
const someText = "FooBar";
return (
<FirstComponent content={someText} />
<SecondComponent content={someText} />
<ThirdComponent content={someText} />
);
}
上面的例子都會產生相同的標記。
功能元件不能在其中具有狀態。因此，如果你的元件需要具有狀態，那麼請選擇基於類的元件。有關更多資訊，請參閱建立元件
作為最後一點，反應道具一旦被傳入就是不可變的，這意味著它們不能在元件內進行修改。如果元件的父級更改了 prop 的值，則 React 處理用 new 替換舊的 props，元件將使用新值重新渲染自身。