一、什麼是元件？

元件就像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元件必須像其道具一樣充當純函式。