Props和State的區別

setState還可以接受第二個參數,它是一個函數,會在setState調用完成并且組件開始重新渲染時被調用,可以用來監聽渲染是否完成React的數據是自頂向下單向流動的,即從父組件到子組件中,組件的數據存儲在props和state中,這兩個屬性有啥子區別呢?

props


React的核心思想就是組件化思想,頁面會被切分成一些獨立的、可復用的組件。

組件從概念上看就是一個函數,可以接受一個參數作為輸入值,這個參數就是props,所以可以把props理解為從外部傳入組件內部的數據。由于React是單向數據流,所以props基本上也就是從服父級組件向子組件傳遞的數據。

總結

props是一個從外部傳進組件的參數,主要作為就是從父組件向子組件傳遞數據,它具有可讀性和不變性,只能通過外部組件主動傳入新的props來重新渲染子組件,否則子組件的props以及展現形式不會改變。

state


一個組件的顯示形態可以由數據狀態和外部參數所決定,外部參數也就是props,而數據狀態就是state。

首先,在組件初始化的時候,通過this.state給組件設定一個初始的state,在第一次render的時候就會用這個數據來渲染組件。

setState

state不同于props的一點是,state是可以被改變的。不過,不可以直接通過this.state=的方式來修改,而需要通過this.setState()方法來修改state。

當數據獲取完成后,通過this.setState來修改數據狀態。

當我們調用this.setState方法時,React會更新組件的數據狀態state,并且重新調用render方法,也就是會對組件進行重新渲染。

注意:通過this.state=來初始化state,使用this.setState來修改state,constructor是唯一能夠初始化的地方。

setState接受一個對象或者函數作為第一個參數,只需要傳入需要更新的部分即可,不需要傳入整個對象,比如:

setState還可以接受第二個參數,它是一個函數,會在setState調用完成并且組件開始重新渲染時被調用,可以用來監聽渲染是否完成


總結

state的主要作用是用于組件保存、控制以及修改自己的狀態,它只能在constructor中初始化,它算是組件的私有屬性,不可通過外部訪問和修改,只能通過組件內部的this.setState來修改,修改state屬性會導致組件的重新渲染。

區別


state是組件自己管理數據,控制自己的狀態,可變;

props是外部傳入的數據參數,不可變;

沒有state的叫做無狀態組件,有state的叫做有狀態組件;

多用props,少用state。也就是多寫無狀態組件。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 作為一個合格的開發者,不要只滿足于編寫了可以運行的代碼。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個周閱讀 8,507評論 1 33
  • 作者:孫志勇 日期:2016年11月29日 一、時效性 所有信息都具有時效性。文章的價值,往往跟時間有很大關聯。...
    孫志勇閱讀 2,437評論 0 3
  • 前面提過react中的state和props是react組件中的兩大部分,有很多人分不清state和props,這...
    DCbryant閱讀 18,016評論 0 11
  • 本筆記基于React官方文檔,當前React版本號為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,786評論 14 128
  • 1,選擇同時縮小話題 2,明確演講目的和中心思想 3,分析公眾與場合 4,收集演講材料 5,列出大綱 6,大聲練習...
    ZhangYY閱讀 242評論 0 0