道具和狀態 React.JS

當然！讓我們更深入地研究 React 中的 props 和 state，探索它們的角色、它們的不同之處，並提供更詳細的範例。

道具（屬性）

1。定義： Props 是屬性的縮寫。它們是一種將資料從一個元件傳遞到另一個元件的方法，通常是從父元件傳遞到子元件。

2。特點：

唯讀： 一旦設置，子元件就無法修改其 props。它們在子組件中是不可變的。
用於配置： 道具可讓您自訂元件的行為和外觀。
資料流： Props 使資料和函數能夠沿著元件層次結構流動，從而提高可重複使用性。
3.用法：你可以透過 props 傳遞任何類型的數據，包括字串、數字、物件、陣列和函數。

道具範例：

// ParentComponent.js
function ParentComponent() {
  const message = "Hello, Child!";

  return <ChildComponent greeting={message} />;
}

// ChildComponent.js
function ChildComponent(props) {
  return <h1>{props.greeting}</h1>;
}

在此範例中：

• ParentComponent 傳遞字串「Hello, Child!」透過名為greeting的prop傳遞給ChildComponent。
• ChildComponent 接收此道具並將其顯示在

  中。標籤。

狀態

1。定義： State 是一個內建的 React 對象，它保存有關元件目前狀況的資訊。與 props 不同，狀態是在元件本身內管理的。

2。特點：

可變：可以使用 setState（對於類別組件）或 useState 鉤子（對於函數組件）等函數來更改狀態。
本地到元件：狀態特定於定義它的元件，除非提升，否則無法從其他元件存取。
反應性：狀態變化會觸發元件的重新渲染，從而允許 UI 中的動態更新。
3.用法：狀態通常用於管理使用者輸入、追蹤元件的狀態以及回應使用者互動。

狀態範例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在此範例中：

• Counter 元件維護自己的狀態，稱為 count，初始化為 0。
• 按一下按鈕時，setCount 函數會更新計數狀態，導致元件重新渲染並顯示新的計數。

概括

• Props 用於在組件樹中傳遞數據，並且是唯讀的。它們有助於創建可自訂的可重複使用元件。
• State 用於管理元件的內部狀態，並且可以更新，從而導致動態行為和渲染。

理解 props 和 state 之間的區別對於建立有效且有組織的 React 應用程式至關重要。如果您有更多問題或需要進一步澄清任何部分，請隨時提問！

以上是道具和狀態 React.JS的詳細內容。更多資訊請關注PHP中文網其他相關文章！