React學習筆記-元件

導讀	React 是一個用於構建使用者介面的 JAVASCRIPT 庫。React 主要用於構建UI，很多人認為 React 是 MVC 中的 V（檢視）。React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站，並於 2013 年 5 月開源。React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它。

本章節我們將討論如何使用元件使得我們的應用更容易來管理。
接下來我們封裝一個輸出 "Hello World！" 的元件，元件名為 HelloMessage：

React 例項

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
 
const element = <HelloMessage />;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

1、我們可以使用函式定義了一個元件：

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

你也可以使用 ES6 class 來定義一個元件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

2、const element = <HelloMessage /> 為使用者自定義的元件。

注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意元件類只能包含一個頂層標籤，否則也會報錯。

如果我們需要向元件傳遞引數，可以使用 this.props 物件,例項如下：

React 例項

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

以上例項中 name 屬性透過 props.name 來獲取。
注意，在新增屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。

我們可以透過建立多個元件來合成一個元件，即把元件的不同功能點進行分離。
以下例項我們實現了輸出網站名字和網址的元件：

React 例項

function Name(props) {
    return <h1>網站名稱：{props.name}</h1>;
}
function Url(props) {
    return <h1>網站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>網站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="Linux就該這麼學" />
        <Url url="
        <Nickname nickname="Runoob" />
    </div>
    );
}
 
ReactDOM.render(
     <App />,
    document.getElementById('example')
);

例項中 App 元件使用了 Name、Url 和 Nickname 元件來輸出對應的資訊。

原文來自：