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。也就是多寫無狀態組件。