反應基礎知識

以下是關鍵 React 術語的解釋和範例：

1。組件

元件是 React 應用程式的構建塊。它是一個 JavaScript 函數或類，傳回 UI（使用者介面）的一部分。

功能元件（在現代 React 常見）：

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

類別組件（舊樣式）：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

2。 JSX（JavaScript XML）

JSX 允許您在 JavaScript 中編寫類似 HTML 的語法。它是 React.createElement() 的語法糖。

範例：

const element = <h1>Hello, world!</h1>;

JSX is compiled to:

const element = React.createElement('h1', null, 'Hello, world!');

3。道具（屬性）

Props 是資料從一個元件傳遞到另一個元件的方式。它們是唯讀的並允許元件是動態的。

範例：

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Alice" />

4。狀態

State 是一個 JavaScript 對象，它保存動態資料並影響元件的渲染輸出。它可以使用 setState（類別組件）或 useState hook（功能組件）進行更新。

功能組件中 useState 的範例：

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

5。掛鉤

Hooks 是允許您在功能元件中使用狀態和其他 React 功能的函數。

useState：管理功能元件中的狀態。
useEffect：在功能組件中運行副作用。

使用範例效果：

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds have passed.</h1>;
}

6。虛擬 DOM

虛擬 DOM 是真實 DOM 的輕量級副本。 React 使用它來追蹤更改並透過僅重新渲染發生更改的 DOM 部分而不是整個頁面來有效地更新 UI。

7。事件處理

React 使用駝峰式命名法代替小寫字母作為事件處理程序，並且將函數而不是字串作為事件處理程序傳遞。

Example:

function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

8。渲染

渲染是React將DOM元素輸出到瀏覽器的過程。元件根據 props、狀態和其他資料渲染 UI。

範例：

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

9。條件渲染

您可以根據條件渲染不同的元件或元素。

範例：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

10。列表和鍵

在React中，您可以使用map()方法渲染資料列表，並且每​​個列表項目應該有一個唯一的鍵。

範例：

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

<ItemList items={items} />;

11。提升狀態

有時，多個元件需要共享相同的狀態。你將國家「提升」到他們最近的共同祖先，這樣它就可以作為道具傳承下來。

範例：

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

這些是構成 React 開發基礎的基本概念。

React 基礎第 2 部分

Pranav Bakare ・ 9 月 18 日

#javascript #反應

以上是反應基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！