建立可重用元件的絕對基礎知識

元件和道具

由於 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,元件將使用新值重新渲染自身。

請參閱反射可重用元件中的 思考,以深入瞭解道具與元件的關係。