React Components: Class vs Functional.

My React journey began four years ago with functional components and Hooks. Then came 'Siswe, a fellow participant in the bootcamp and our resident class component enthusiast. While the rest of us were collaborating on team projects with functional components, 'Siswe clung to class components with an unwavering loyalty.

Components are the building blocks of your user interface (UI).

Think of them as Lego bricks – you can combine them in various ways to create complex structures. They are independent and reusable pieces of code that encapsulate UI and logic.

Reusing a component within another component typically looks like this:

import MyComponent from './MyComponent';

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

Class Components and Functional Components are the two primary ways to create components in 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;

This is a class component, created using JavaScript classes that extend the React.Component class.

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;

This on the other hand is a functional component, written as a simple JavaScript function.

State Management: The Core Difference.

Class components manage their own internal state using this.state. This is typically initialized in the constructor, accessed using this.state object, and updated using the this.setState method, as seen in the code block above.

Functional components were initially stateless. But with the introduction of Hooks, they gained the ability to manage state and lifecycle logic. Utilizing the useState hook for managing state, it returns a pair of values: the current state and a function to update it, as seen above. This is sufficient for simple state management. For more complex state logic involving multiple sub-values, or when the next state depends on the previous one, you want to use useReducer.
For example:

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;

Here, useReducer is managing multiple state values and complex update logic in a structured and maintainable way. Hooks are exclusively for functional components.

Avoid direct manipulation of the state object in both components.

Never directly modify or mutate the state object, regardless of the component type. Instead, create a new object with the updated values. This approach helps React efficiently track changes and optimize re-renders.

Functional component example:

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;

Class component example:

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;

In both examples, we're updating the name property of the user object while preserving the original object's integrity. This ensures that a new state object is created, preserving immutability and preventing potential issues with state updates. Adherence to this ensures predictable behavior, performance optimizations, and easier debugging.

클래스 구성 요소는 복잡한 논리를 위한 것입니다.

• 복잡한 상태 관리: 세밀한 제어가 필요한 복잡한 상태 로직을 처리할 때 this.state 및 this.setState가 있는 클래스 구성 요소는 더 많은 유연성을 제공할 수 있습니다.
• 수명 주기 메서드: componentDidMount, componentDidUpdate 또는 componentWillUnmount와 같은 수명 주기 메서드에 크게 의존하는 구성 요소의 경우 클래스 구성 요소가 전통적인 선택입니다.
• 오류 경계: 구성 요소 트리 내의 오류를 처리하고 충돌을 방지하려면 componentDidCatch가 있는 클래스 구성 요소가 필수적입니다.
• 성능 최적화: 성능이 중요한 특정 시나리오에서는 클래스 구성 요소 내의 PureComponent 또는 shouldComponentUpdate를 활용할 수 있습니다.
• 레거시 코드베이스: 클래스 구성 요소에 크게 의존하는 기존 프로젝트에서 작업하는 경우 새 구성 요소에 클래스 구성 요소를 사용하면 일관성을 유지하는 것이 더 쉬울 수 있습니다.

기능적 구성 요소는 간단한 보기용입니다.

• 간단한 구성 요소: 최소한의 상태나 논리를 갖춘 표현형 구성 요소의 경우 단순성과 가독성으로 인해 기능적 구성 요소가 선호되는 경우가 많습니다.
• 후크를 사용한 상태 관리: 기능적 구성요소에서 useState 및 useReducer를 활용하면 상태를 관리하는 강력하고 유연한 방법이 제공됩니다.
• 부작용: useEffect 후크를 사용하면 데이터 가져오기, 구독 또는 수동 DOM(문서 개체 모델) 조작과 같은 부작용을 관리할 수 있습니다.
• 성능 최적화: useMemo 및 useCallback을 사용하여 기능 구성 요소의 성능을 최적화할 수 있습니다.

구성 요소의 요구 사항에 따라 결정을 내리세요.

기능적 접근 방식은 일반적으로 더 간결하고 읽기 쉬운 것으로 간주되며 단순성과 효율성으로 인해 충분한 경우가 많습니다. 그러나 클래스 구성 요소는 특히 복잡한 논리 또는 성능 최적화를 처리할 때 상태 관리 및 수명 주기 메서드에 대한 더 많은 제어 기능을 제공합니다. 이는 복잡한 논리를 구성하기 위한 더 나은 구조를 의미합니다.

엄격한 규칙이 없기 때문에 클래스 구성 요소와 기능 구성 요소 사이의 선택이 항상 명확한 것은 아닙니다. 구성 요소의 요구 사항을 평가하고 프로젝트 요구 사항에 가장 잘 맞는 유형을 선택하세요.

어떤 구성 요소를 더 즐겁게 작업하시나요?

The above is the detailed content of React Components: Class vs Functional.. For more information, please follow other related articles on the PHP Chinese website!