React 元件：類別與函數式。

我的 React 之旅始於四年前的函數式元件和 Hook。然後是'Siswe，他是訓練營的參與者，也是我們常駐班的組件愛好者。當我們其他人在使用功能組件的團隊專案上進行協作時，「Siswe 堅定不移地忠誠於類別組件。

元件是使用者介面 (UI) 的建構塊。

將它們視為樂高積木 - 您可以以各種方式組合它們來創建複雜的結構。它們是獨立且可重複使用的程式碼片段，封裝了 UI 和邏輯。

在另一個元件中重複使用一個元件通常如下所示：

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    <div>
      <mycomponent></mycomponent>
    </div>
  );
}

類別元件和功能元件是在 React 中建立元件的兩種主要方式。

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count + 1 });
 };

 render() {
  return  
 (
   <div>
    <p>You clicked {this.state.count} times</p>
    <button onclick="{this.handleClick}">Click me</button>
   </div>
  );
 }
}

export default Counter;

這是一個類別元件，使用擴充 React.Component 類別的 JavaScript 類別建立。

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick="{handleClick}">Click me</button>
    </div>
  );
}

export default Counter;

另一方面，這是一個函數元件，寫為簡單的 JavaScript 函數。

狀態管理：核心區別。

類別元件使用 this.state 管理自己的內部狀態。這通常在建構函數中初始化，使用 this.state 物件訪問，並使用 this.setState 方法更新，如上面的程式碼區塊所示。

功能組件最初是無狀態的。但隨著 Hooks 的引入，他們獲得了管理狀態和生命週期邏輯的能力。利用 useState 掛鉤來管理狀態，它會傳回一對值：目前狀態和更新它的函數，如上所示。這對於簡單的狀態管理來說已經足夠了。對於涉及多個子值的更複雜的狀態邏輯，或者當下一個狀態依賴前一個狀態時，您需要使用 useReducer。
例如：

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Step: {state.step}</p>
      <button onclick="{increment}">+</button>
      <button onclick="{decrement}">-</button>
      <input type="number" value="{state.step}" onchange="{(e)"> setStep(Number(e.target.value))} />
    </div>
  );
}

export default Counter;

這裡，useReducer 以結構化且可維護的方式管理多個狀態值和複雜的更新邏輯。 Hooks 專門用於功能組件。

避免直接操作兩個組件中的狀態物件。

無論組件類型為何，都不要直接修改或改變狀態物件。相反，使用更新的值建立一個新物件。這種方法有助於 React 有效地追蹤變更並優化重新渲染。

功能組件範例：

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <input type="text" value="{user.name}" onchange="{(e)"> handleNameChange(e.target.value)} />
    </div>
  );
}

export default UserProfile;

類別組件範例：

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      <div>
        <p>Name: {this.state.user.name}</p>
        <p>Age: {this.state.user.age}</p>
        <input type="text" value="{this.state.user.name}" onchange="{(e)"> this.handleNameChange(e.target.value)} />
      </div>
    );
  }
}

export default UserProfile;

在這兩個範例中，我們都在更新使用者物件的 name 屬性，同時保留原始物件的完整性。這確保了創建新的狀態對象，保持不變性並防止狀態更新的潛在問題。遵守這一點可確保可預測的行為、效能優化和更輕鬆的調試。

类组件用于复杂的逻辑。

• 复杂的状态管理：在处理需要细粒度控制的复杂状态逻辑时，带有 this.state 和 this.setState 的类组件可以提供更大的灵活性。
• 生命周期方法：对于严重依赖生命周期方法（如 componentDidMount、componentDidUpdate 或 componentWillUnmount）的组件，类组件是传统的选择。
• 错误边界：为了处理组件树中的错误并防止崩溃，带有 componentDidCatch 的类组件是必不可少的。
• 性能优化：在特定的性能关键场景中，可以利用类组件中的PureComponent或shouldComponentUpdate。
• 旧代码库：如果您正在开发一个严重依赖类组件的现有项目，那么通过将它们用于新组件可能会更容易保持一致性。

功能组件用于简单视图。

• 简单组件：对于具有最少状态或逻辑的表示组件，功能组件由于其简单性和可读性通常是首选。
• 使用 Hooks 进行状态管理：在功能组件中利用 useState 和 useReducer 提供了一种强大而灵活的状态管理方式。
• 副作用： useEffect 挂钩允许管理副作用，例如数据获取、订阅或手动 DOM（文档对象模型）操作。
• 性能优化： useMemo 和 useCallback 可用于优化功能组件的性能。

让您的组件需求指导您的决定。

函数式方法通常被认为更简洁和可读，并且由于简单和高效而通常就足够了。然而，类组件提供了对状态管理和生命周期方法的更多控制，特别是在处理复杂的逻辑或性能优化时。这意味着组织复杂逻辑的更好结构。

类组件和函数组件之间的选择并不总是明确的，因为没有严格的规则。评估组件的要求并选择最适合您的项目要求的类型。

您更喜欢使用哪个组件？

以上是React 元件：類別與函數式。的詳細內容。更多資訊請關注PHP中文網其他相關文章！