React學習筆記 – 元件

xcwong發表於2017-09-19
React筆記元件

元件化是前端框架一個重要的思想，也是讓我們偷懶的一個方法之一，?。

想象我們在寫前端頁面的時候，頁面中的有些元素肯定是會被重複使用的。那麼我們需要把這些元素打包成一個東西來重複使用，那麼這個就是元件。

React中元件就是一個函式，它可以接受任意的輸入值，我們稱之為props。

React中定義元件的方式有兩種，一種是javascript函式，一種是ES6 class的方式

元件的建立

javascript functiond的形式

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>
}

ES6 class 的形式

class Welcome extends React.Component {
    render(){
        return <h2>Hello, {this.props.name}</h2>
    }
}

元件的渲染

前面提到的React元素都是DOM標籤，然而React元素也可以是使用者自定義的元件。

const element = <Welcome name="sara" />

當React遇到使用者自定義的元件的時候，他會將JSX屬性作為單個物件props傳遞給該元件。例如:

function Welcome(props) {
    return <h2>Hello, {props.name}</h2>
}

const element = <Welcome name="sara" />
ReactDOM.render(
    element,
    document.getElementById(`root`)
);

元件樹

一個元件可以在它的輸出中引用其他元件。這就可以讓我們用同一元件來抽象出任意層次的細節。
在一個React應用程式中，頂部是一個App元件，下面則是不斷抽象的子元件，呈現樹裝結構。

Props的只讀性

React元件中傳入的props是隻讀的，不能對其進行修改。

但是應用的介面是隨著時間動態變化的，元件需要動態變化則應該這麼弄呢？

相關文章