React props vs state - 差異和設計模式

1. React state
2. React props
3. React 中 state 和 props 之間的連線
4. 在 React 中何時使用 state 與 props

React 是最容易學習的 JavaScript 框架之一。但是，這個庫引入了一些乍一看似乎令人困惑的概念。例如，許多新手很難理解 props 和 state 之間的區別。在本文中，你將瞭解為什麼這兩個物件都是必需的，以及如何找到它們的最佳用途。

React state

狀態的概念並不是 React 或其他使用它的 JavaScript 框架所獨有的。甚至一些用普通 JavaScript 構建的應用程式也可以有一個狀態。在 React 中，這個概念有點不同，但基於相同的原則。

每個 React 元件都維護其本地狀態物件。狀態管理髮生在內部。狀態物件是可變的；改變它是開發動態 React 元件的關鍵，這些元件可以響應使用者的操作而改變。

父元件不能改變其子元件的狀態。你可以將狀態值視為普通 JavaScript 函式中的區域性變數。這些變數僅限於函式作用域。

在 React 中，狀態物件的主要目的是簡化為我們的動態應用程式提供動力的所有資料的維護。狀態物件值的任何更改都將觸發元件的重新渲染。這樣，當使用者輸入發生變化時，使用者的檢視將始終立即更新。

React props

props（屬性的縮寫）物件用於與其子元件共享父元件的資料。你可以將 props 視為傳遞給元件以自定義其行為的設定。想象一下，你有一個渲染視覺效果的 <Bargraph/> 元件。此類元件需要數字來呈現圖形。每個圖都呈現不同的資料，這些資料可以通過 props 輸入它們。這只是 props 如何促進元件可重用性的一個例子。

每個元件都會收到一個 props 物件，該物件在元件內是不可變的。然而，就像你可以將不同的引數傳遞給函式一樣，同一元件的許多例項可以通過 props 接收不同的值。

在幕後，React 使用 React.createElement() 方法來建立 React 元件並傳遞 props。然而，React 開發人員傾向於使用更熟悉的 JSX 語法來構建 React 應用程式。這種類似 HTML 的語法提供了一種更易讀的方式來傳遞 props ：

const Graph=(props)=>
{
  return <div>
          <h1>{props.data.percentage}%</h1>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"}
    }
  }
  render() {
    return <Graph data={this.state.data}>Hi! Try edit me</Graph>;
  }
}

這是一個相當簡單的 props 如何工作的演示。首先，我們定義一個子元件。如你所見，子元件不維護其狀態。它只讀取通過 props 傳遞給它的資料。

接下來，我們有一個父元件。與子元件不同，它使用來自其 state 物件的資料將其作為 prop 傳遞。如你所見，JSX 語法與常規 HTML 不同。

React props 解構

正如你在上面的例子中看到的，每個功能元件都接受一個 props 引數。可以通過讀取與 JSX 中的屬性同名的屬性來訪問儲存在 props 物件中的資料。

一種更簡單的方法是在函式定義中解構 props。這是一個帶有解構 props 的 Graph 功能元件的示例：

const Graph=({data = { percentage: 50 } })=>
{
  return <div>
          <h1>{{data.percentage}}%</h1>
         </div>;
}

這允許你使用更簡單的語法，甚至可以設定預設的 prop 值。如果子元件沒有收到任何 props，元件可以讀取預設值。

React 中 state 和 props 之間的連線

正如我們之前提到的，在 React 元件中，props 物件是嚴格不可變的。但是，有一個警告：子元件可以改變父元件中的狀態，父元件用作通過 props 傳遞迴子元件的資料來源。如果這很難理解，讓我們檢查一下這個程式碼示例：

const Graph=(props)=>
{
  const {handler, color} = props
  return <div 
         style={{width: "400px", height: "400px", border: "2px solid black", backgroundColor: `${color}`}}>                     
         <h1>{props.data.percentage}%</h1>
         <input type="text" onChange={(e) => handler(e)}/>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"},
      bgColor: "black"
    }
  }
  render() {
    const backgroundHandler = (e) => this.setState({color: e.target.value})     
    return <Graph data={this.state.data} color={this.state.bgColor} handler={backgroundHandler}>
            Hi! Try edit me</Graph>;
  }
}

在這個例子中，我們仍然有我們之前使用的相同的兩個元件。我們通過 props 傳遞一個事件處理程式。然後我們使用相同的處理程式來更新父元件狀態中的 color 屬性。一旦父元件狀態中的值發生更改，它將重新渲染並將更新的顏色值傳遞迴我們的子元件。

這看起來像是子元件更新了它自己的 props，但在這個例子中，它實際上使用通過 props 傳遞的事件處理程式來更新它自己的 props 的源 - 父元件狀態中 color 屬性的值。

這是播放程式碼的連結。親自嘗試一下 - 在文字欄位中輸入顏色，看看會發生什麼。

這是 properties 和 state 如何相互關聯的一個典型例子。父元件的狀態通常是通過 props 傳遞給其所有子元件的資料來源。

在我們的例子中，儲存在 bgColor state 屬性中的 state 值變成了一個 color prop。

這個例子表明 state 和 props 只是儲存資料和管理資料流的兩種方式。

在 React 中何時使用 state 與 props

這不是一個或另一個的選擇 - 元件維護狀態並接收 props 是很常見的。儲存在狀態中的資料塊往往成為子元件的 props。props 不限於資料 - 它們還可以包括回撥函式。

要構建易於管理的 React 應用程式，請使用元件樹中較高元件的狀態。所有其他元件都應該是無狀態的，並通過 props 接收必要的資料。無狀態元件是首選，因為它們更易於閱讀和測試。

綜上所述，state 和 props 都是必要的，如果沒有 state，props 不會那麼有效。通常，最好使用有狀態元件進行事件處理和資料處理，而無狀態元件更適合視覺化和格式化。