React基礎 —— 元件和道具
阿新 • • 發佈:2018-12-05
一、什麼是元件?
元件就像JavaScript函式。它們接受任意輸入(稱為“道具”)並返回描述螢幕上應顯示內容的React元素。
二、如何定義元件
1、定義元件的最簡單的方法是編寫JavaScript函式
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
此函式是一個有效的React元件,因為它接受單個“props”(代表屬性)物件引數與資料並返回一個React元素。我們將這些元件稱之為“功能元件”,它們實際上是JavaScript函式。
2、還可以使用ES6類來定義元件:
class Welcome extends React.Component{
render() {
return <h1>Hello,{this.props.name}</h1>;
}
}
三、渲染元件
以前我們只遇到代表DOM標記的React元素:
const element = <div />
但是元素也可以表示使用者定義的元件:
const element = <Welcome name="Sara" />;
當React看到表示使用者定義元件的元素時,他將JSX屬性作為單個物件傳遞給此元件。我們稱這個物件為“道具”。
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
注意:React將以小寫字母開頭的元件視為DOM標記。始終使用大寫字母啟動元件名稱。
四、組成元件
元件可以引用其輸出中的其他元件。這使我們可以對任何細節級別使用相同的元件抽象。如下:我們可以建立一個App渲染Welcome很多次的元件:
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
function App(){
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahel" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
五、提取元件
不要害怕拆分成更小的元件。
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatdate(props.date)}
</div>
</div>
)
}
我們將上面的程式碼進行提取,首先提取Avatar:
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
src={props.user.name}
/>
);
}
我們再提取一個UserInfo元件,該元件呈現Avatar使用者名稱的下一個:
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
)
}
最後Comment可以簡化為:
function Comment(props) {
return (
<div>
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div>
{formatDate(props.date)}
</div>
</div>
);
}
六、道具是隻讀的
無論是將元件宣告為函式還是類,它都不能修改自己的道具。
function sum(a,b){
return a+b;
}
//這個函式稱為“純”,因為它們不會嘗試更改其輸入,並且始終為相同的輸入返回相同的結果,相比之下,這個函式是不純的,因為它改變了自己的輸入:
funciton withdraw(account,amount){
account.total -= amount
}
所有React元件必須像其道具一樣充當純函式。