React 與 VUE 數據傳輸對比

我們熟悉的 VUE 可以方便的實現父子組件的傳值。剛開始接觸 React，傳值有一定疑惑，需要注意父子組件的傳值，關鍵是理解 React 的狀態驅動，以及子組件向父組件傳值的三種方式。

父組件傳遞給子組件

概述：React中主要使用組件進行數據傳輸，組件的數據存儲在props和state中，進行自上而下單向數據傳遞。

props

React核心思想：組件化，頁面被切成一個個可以複用的獨立的組件。每個組件是一個內部封閉的環境，類似於一個函數，props就是傳入的參數。

1.用法

在父組件中，render 中就是調用子函數的過程，並把實際參數傳入。在子組件中，需要使用props作爲形式參數，傳遞父組件傳入的參數。

//父組件
import Item from "./item";

class ItemList extends React.Component{
    const itemList = data.map(item => <Item item=item />);
	render(){
	    return (
	    	{ itemList }
	    );
	}
}

export default ItemList
//map 函數返回每一項都是<Item item="數據">的數組

// 子組件
export default class Item extends React.Component{
    render{
        return (
        	<li>{this.props.item}</li>
        )
    }
}
// this.props獲取到組件的所有數據(是一個對象，包括這個組件的配置)根據父組件
// 現在只有item = item 屬性，所有直接獲取this.props.item即可獲得全部數據。

2.只讀性不變性

props用於初始化狀態和渲染組件兩個功能。所以當組件實例化以後，props是不能改變的。只有通過父組件重新渲染的方式才能將新的props傳入子組件中。（子組件中無法對this.props進行修改）。props類似於從上面傳來的常量。

3.默認參數和數據類型

Item.defaultProps = {
    item: "React Seafile"
}
// 默認參數
Item.propTypes = {
    item: PropTypes.string
}
// 默認數據類型：字符串(或者其他數據類型)

State

State是與props相同點都是數據（參數），但是state是子組件私有的變量，而且由子組件完全控制。

state: state is similar to props, but it is private and fully controlled by the component.

1.用法

export default class ItemList extends React.Component{
    constructor(){
        super();
        this.state = {
            itemList:true
        }
    }
    //我們會通過異步操作獲取數據，需要在didMount階段執行異步操作
    componentDidMount(){
        fetch("url").then((res) => res.json()).then((data) => {
            this.setState({ itemList:item });
        })
    }
    render{
        return (
        	{ this.state.itemList }
        )
    }
}

重要提示：當我們調用this.setState的方法時，React會更新組件的數據狀態state，並且會重新調用render方法，會對組件進行重新渲染。

constructor是唯一初始化state的地方，this.state來初始化state，this.setState一種方法修改state參數。

總結：state用於組件存儲自己的屬性和狀態，不能通過父組件訪問，可以傳給子組件，只能通過this.setState來修改。修改state屬性會導致組件重新渲染。

沒有state叫做無狀態組件，有state叫做有狀態組件。
多用props，少用state，props可以逐層向下傳遞。

React中的同一個組件內部標籤條件渲染：不需要設置某個標籤的show-hide屬性，直接使用JSX中的三目計算進行渲染
{條件（屬性==true）？:null}

//fetch 新的請求方法(兼容性)——附加
fetch(url, options).then(function(response){
    //handle http response
},function(error){
    //handle network error
})

// options 可選參數(是一個對象)包括對於請求的設置
{
    method:"POST",
    body:JSON.stringity(data)
}

包括：
請求方法：POST-GET
請求頭信息：header對象
請求體信息：body：Blob、FormData等

相應response是一個Promise對象

Promise對象屬性：
status：請求參數結果200
statustext:服務器返回的狀態報文
headers:返回的頭部信息
url請求的地址

Promise對象方法：
text：以string形式生成請求text
json() 生成JOSN.parse(responseText)的結果
blob() 生成一個Blob
arrayBuffer() 生成一個ArrayBuffer
formData() 生成格式化的數據 可用於其他的請求

參考文件：JavaScript利用fetch實現異步請求的方法案例

子組件傳遞給父組件

回調函數

當子組件的狀態發生變化時，可以用戶觸發，或者JS觸發回調函數，把子組件的信息，通過回調函數，返回父組件，父組件處理並 setState 改變父子組件的狀態。這是最常用的方法。

事件監聽

如果子組件很多或者層級很深，那麼底層子組件的回調函數會依次上傳，或者需要處理多個事件，那麼回調函數不適合處理。

所以使用事件監聽（eg eventbus）任何位置的子組件觸發事件，在頂級組件或者指定組件監聽事件，統一處理，然後統一設置狀態，這樣更好管理組件。大型項目中更合適。

Ref

上面兩種方式適應於子組件發出信號，然後父組件被動接收。如果父組件向主動獲取子組件的信息，需要通過 ref 訪問子組件的 DOM 屬性狀態。

子組件中設置 ref={(node) => {this.ref = node}} 把子組件通過ref傳出去。父組件中使用 ref 屬性可以獲取子組件（高階組件中不能直接獲取ref，需要轉換）。