講講React中的State和Props

基本概念

• 在React中，元件的資料存儲在props和state中。
• 一個元件的顯示形态可以由資料狀态和外部參數所決定。

外部參數——props

• 元件從概念上可以了解為一個函數，因為函數也是封裝一個獨立可複用的功能，而props就可以了解為函數接收的參數。
• props為從外部傳入元件内部的資料。
• 特性
  • 隻讀性
  • 不變性
  • 在子元件中，props在内部不可變的，如果想要改變它，隻能通過外部元件傳入新的props來重新渲染子元件，否則子元件的props和展示形式不會改變

資料狀态——state

• 在元件初始化時，會根據constructor()中this.state定義的狀态值來初始化元件。
• 不用與props的隻讀性，可以通過this.setState()來變更state的值，觸發重新渲染。
• state的主要作用是用于元件儲存、控制以及修改自己的狀态，它隻能在constructor中初始化，它可以了解為元件的私有屬性，不可通過外部通路和修改，隻能通過元件内部的this.setState來修改，修改state屬性會導緻元件的重新渲染。

props和state的相同點及差別

• 相同點
  • props 和 state 都能觸發渲染更新
• 差別
  • props 是外部傳遞給元件的，而 state 是在元件内被元件自己管理的，一般在 constructor 中初始化
  • props 在元件内部是不可修改的，但 state 在元件内部可以進行修改