React筆記03：props、元件通訊、非受控元件

借助于 ref 就可以通過 非受控元件 的方式，來擷取到的表單元素的值。

ref 的作用：擷取DOM對象或元件。

作用：接收到傳遞給元件中的屬性

在函數元件中如何擷取到 props？ 通過函數的參數

在 類元件 中如何擷取到 props？ 通過 this.props 來擷取

props 是一個對象！！！

特點：隻讀！！！（ 隻能讀取 props 對象中的屬性，而不能修改 props 對象中的屬性 ）

可以給元件傳遞任何類型的資料。

注意：如果在 class 元件中，手動添加了 constructor ，那麼，就應該通過參數擷取到 props， 然後傳遞給 super，這樣，才能夠在 constructor 中，擷取到 props！！！

1 父元件中提供狀态

2 在子元件标簽上添加屬性，值為 父元件中的狀态

3 子元件中通過 props 來接收父元件中傳遞過來的資料

思路：父元件提供一個事件（函數），讓子元件調用；子元件調用的時候，将資料作為參數的傳遞，父元件中通過事件（函數）的參數，就拿到子元件中的資料了。

1 父元件提供事件

2 将事件通過props傳遞給子元件

3 子元件中通過props接收到父元件中傳遞過來的事件

4 子元件調用該事件，将資料作為參數傳遞

注意點：父元件提供的方法中 this 執行問題。

為什麼會有這個問題？因為這個方法不是父元件自己調用的，是由其他元件調用的，是以，需要處理this指向。

思路：狀态提升，也就是：将兩個兄弟元件之間的共享資料，放在父元件中。

父元件的職責：1 提供共享資料（state） 2 提供修改狀态的方法

例子：如果 子元件2 要傳遞資料給 子元件1

子元件1：隻要通過 props 接收到父元件中傳遞過來的資料（父 -> 子）

子元件2：調用父元件中修改狀态的方法（子 -> 父）但是，需要先通過 props 擷取到父元件中傳遞過來的方法

分析：因為 CommentList 和 CommentForm 這兩個子元件中，都要用到 評論清單 資料，是以，就利用 狀态提升 的思想，将評論清單資料放在了 父元件Comment 中。

父元件的兩個職責：1 提供評論清單資料狀态（list） 2 提供修改狀态的方法（updateComment）

功能1：渲染評論清單

利用 父->子 的通訊，将父元件中的 list 傳遞給 子元件；子元件中通過 props 接收

功能2：添加評論

因為 list 是由父元件提供的，是以，由父元件提供修改狀态的方法（updateComment）；通過 props 傳遞給子元件後，由子元件調用

a. 通過受控元件的方式，來擷取到評論人和評論内容

b. 将使用者輸入的内容，添加到 list 中

使用場景：跨元件傳遞資料

如果兩個元件是遠方親戚（比如，嵌套多層）可以使用Context實作元件通訊

Context提供了兩個元件：Provider 和 Consumer

Provider元件：用來提供資料

Consumer元件：用來消費資料

作用：擷取元件标簽的子節點

擷取方式： props.children

children 與普通的 props 屬性相同，可以是任意值。

場景：給元件添加 props 校驗，來增強元件的健壯性。

約定：封裝公共元件的時候，都添加 props 校驗

1 安裝：yarn add prop-types

2 導入 import PropTypes from 'prop-types'

3 給元件名稱添加 propTypes 屬性，值是一個對象

4 對象的鍵就是要校驗的 props 名稱，值是 PropTypes.array 等，從PropTypes中擷取到的校驗規則

可以通過 元件名.defaultProps = {} 來給元件添加 props 的預設值。