React 基礎_元件

xuanxuanQueen發表於2019-11-15
React元件

元件定義

  • 使用ES6 class(類元件)
  • 使用函式(函式元件)

使用class定義元件：

  1. class繼承自React.Component
  2. class內部必須定義render方法，render方法返回代表該元件UI的React元素
    React 基礎_元件

將PostList掛載到頁面的DOM節點上

  • 使用ES6 export將PostList作為預設模組匯出，在其他JS檔案中匯入
    React 基礎_元件

元件的props

元件的props用於把父元件中的資料或方法傳遞給子元件

  • PostItem元件
    React 基礎_元件
  • 在PostList中使用PostItem
    React 基礎_元件

元件的state

  1. 元件的state是元件內部的狀態，state的變化最終將反映到元件UI的變化上
  2. 在元件的構造方法constructor中透過this.state定義元件的初始狀態
  3. 呼叫this.setState方法改變元件狀態，進而元件UI也會隨之重新渲染
    圖片
    圖片
    • 在構造方法constructor內，呼叫super(props)，就是呼叫了React.Component這個class的constructor方法，用來完成React元件的初始化工作
    • 在constructor中，透過this.state定義了元件的狀態
    • 在render方法中，我們為標籤定義了處理點選事件的響應函式，在響應函式內部會呼叫this.setState更新元件的點贊數
    • React元件可以看作一個函式，函式的輸入是props和state，函式的輸出是元件的UI
    • UI = Component(props,state)

有狀態元件和無狀態元件

1.一個元件的內部狀態是不變的，就用不到state,這樣的元件稱為無狀態元件
2.定義無狀態元件可以使用函式定義
3.一個函式元件接收props作為引數，返回代表這個元件UI的React元素結構

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

使用無狀態元件時，儘量將其定義成函式元件

React應用元件設計的一般思路是
透過定義少數的有狀態元件管理整個應用的狀態變化，並且將狀態透過props傳遞給其餘的無狀態元件，由無狀態元件完成頁面絕大部分UI的渲染工作

  • 重構PostList和PostItem
    圖片
    圖片
    圖片
  1. 帖子列表資料頂i為PostList元件的一個狀態
  2. 在componentDidMount生命週期方法中透過定時器設定一個延時，模擬從伺服器端獲取資料，然後呼叫setState更新元件狀態
  3. 將帖子的多個屬性合併成一個post物件，透過props傳遞給PostItem
  4. 在PostList內定義handleVote方法，處理點贊邏輯，並將該方法透過props傳遞給PostItem
  5. PostItem定義為一個函式元件，根據PostList傳遞的post屬性渲染UI。當發生點贊行為時，呼叫props.onVote方法將點贊邏輯交給PostList中的handleVote方法處理

屬性校驗和預設屬性

React提供了PropTypes物件，用於校驗元件屬性的型別

PostItem.propTypes = {
    post: PropTypes.object,
    onVote: PropTypes.func
}
型別 PropTypes對應屬性
String PropTypes.string
Number PropTypes.number
Boolean PropTypes.bool
Function PropTypes.func
Object PropTypes.object
Array PropTypes.array
Symbol PropTypes.symbol
Element(React元素) PropTypes.node

當使用PropTypes.object或PropTypes.array校驗屬性型別時，我們只知道這個屬性是一個物件或一個陣列，至於物件的結構或陣列元素的型別是什麼樣的，依然無從得知
更好的做法是使用PropType.shape或PropTypes.arrayOf

style: PropTypes.shape({
    color : PropTypes.string,
    fontSize: PropTypes.number
}),
sequence: PropTypes.arrayOf(PropTypes.number)

style表示是一個物件，物件由color和fontSize兩個屬性，color是字串型別，fontSize是數字型別；sequence是一個陣列，陣列的元素是數字

如果屬性是元件的必須屬性，就需要在PropTypes的型別屬性上呼叫isRequired

PostItem元件，post和onVote都是必須屬性

PostItem.propTypes = {
    post : PropTypes.shape({
        id: PropTypes.number,
        title: PropTypes.string,
        author: PropTypes.string,
        date: PropTypes.string,
        vote:PropTypes.numer
        }).isRequired,
    onVote: PropTypes.func.isRequired
}

當元件屬性未被賦值時，元件會使用defaultProps定義的預設屬性

    function Welcome(props) {
        return <h1 className='foo'>hello, {props.name}</h1>;
        }

        Welcome.defaultProps = {
            name: 'Stranger'
        };

元件樣式

  1. 外部CSS樣式表
    • React元素要使用className來代替class作為選擇器
    • 引入方法，一種是在使用元件的HTML頁面中透過標籤引入(常用於該樣式表檔案作用於整個應用的所有元件（一般是基礎樣式表）)
    • 一種是把樣式列表檔案當作一個模組，在使用該樣式表的元件中，匯入樣式表檔案（常用於該樣式表作用於某個元件(相當於元件的私有樣式))
    • 全域性的基礎樣式表也可以用第二種方式引入，一般在應用的入口JS檔案中引入
  2. 內聯樣式
    • 將CSS樣式寫到JS檔案中，用JS物件表示CSS樣式，然後透過DOM型別節點的style屬性引用相應樣式物件
    • 使用內聯樣式時，樣式的屬性名必須使用駝峰格式的命名

元件和元素

  • React元素時一個普通的JavaScript物件，這個物件透過DOM節點或React元件描述介面是什麼樣子的。JSX語法就是用來建立React元素的
  • React元件時一個class或函式，它接收一些屬性作為輸入，返回一個React元素
  • React元件是由若干React元素組建而成的
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章