資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學理解 React.js 中的元件和屬性
React 應用由元件構成。元件通常使用 React 元素。元件可以是獨立的、可複用的部分。
元件有兩種型別：
- 無狀態元件（基本上是 JavaScript 函式）
- 有狀態元件（使用 JavaScript 類特性）
兩種型別的元件都接收一個屬性物件，通常稱為 props。
無狀態元件在函式中有一個 return 語句，有狀態元件有一個 render 方法，該方法返回 React 元素。
在頁面上顯示的簡單 React 元素：
const message=<h1>Hello</h1>; ReactDOM.render( message, document.getElementById(‘root’) );
它在螢幕上顯示 Hello 訊息。
建立函式元件：
function Message(props){
return (
<h1> {props.message} </h1>
);
}上面的 JavaScript 函式接受一個名為 props 的單個屬性物件。props 物件包含訊息。
Creating class bases Stateful component:
class Message extends React.component{
render(
return (
<h1>{this.props.message} </h1>
);
)
}以上兩個元件的功能相同。基於類的元件具有額外的生命週期特性。
渲染元件
React 元素可以包含簡單的 html 標籤，例如：
const player =<h2> Steve </h2>;
類似地，React 元素可以包含函式或基於類的元件：
const message=<Message message=”hello”/>;
傳遞給元件的屬性可以作為 props 物件屬性訪問。props 物件如下所示：
{ message: Hello}元件的名稱必須大寫，以便 React 區分它與 html 元素或使用者定義元素。
組合多個元件
元件可以在其他元件中使用，或者可以巢狀元件。我們可以建立最小的函式元件，或者使用抽象級別是有用的。
props 本質上是隻讀的，不應該在元件內部修改。
如果元件在任何時候對於相同的輸入都返回相同的輸出，則稱為純元件。
純元件示例
function Multiplication(i, j){
return i*j;
}
更新於：2019年8月28日
瀏覽量：208
廣告