Các stateful component và stateless trong react

Trong React, các component có thể được phân loại thành stateful và stateless. Hiểu rõ sự khác biệt giữa chúng và biết khi nào nên sử dụng loại nào là điều quan trọng giúp tối ưu hóa hiệu suất và khả năng bảo trì của ứng dụng. Bài viết này sẽ giúp bạn hiểu rõ hơn về stateful component và stateless component trong React, cách sử dụng và các trường hợp cụ thể nên áp dụng.

Stateless Component

Định Nghĩa

Stateless components, còn được gọi là functional components, là các component đơn giản chỉ nhận props và trả về JSX mà không quản lý bất kỳ trạng thái (state) nào.

Đặc Điểm

• Không quản lý state.
• Không có các phương thức lifecycle (vòng đời) của React.
• Đơn giản, dễ hiểu và dễ kiểm thử.

Ví Dụ

Dưới đây là ví dụ về một stateless component:

import React from 'react';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Trong ví dụ trên, Greeting là một stateless component nhận props và trả về JSX để hiển thị một lời chào.

Stateful Component

Định Nghĩa

Stateful components là các component quản lý trạng thái nội bộ của chúng bằng cách sử dụng state. Chúng có thể là class component hoặc function component sử dụng hooks.

Đặc Điểm

• Quản lý state.
• Có thể sử dụng các phương thức lifecycle của React (nếu là class component).
• Phức tạp hơn stateless component do quản lý trạng thái.

Ví Dụ với Class Component

Dưới đây là ví dụ về một stateful component sử dụng class component:

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Trong ví dụ trên, Counter là một stateful component quản lý trạng thái count và có phương thức increment để cập nhật trạng thái.

Ví Dụ với Function Component và Hooks

Dưới đây là ví dụ về một stateful component sử dụng function component và hook useState:

import React, { useState } from 'react';

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

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

export default Counter;

Trong ví dụ trên, Counter sử dụng hook useState để quản lý trạng thái count.

Khi Nào Sử Dụng Stateful Component và Stateless Component

Khi Nào Sử Dụng Stateless Component

• Đơn giản hóa component: Khi component chỉ cần nhận props và trả về JSX.
• Tăng hiệu suất: Stateless components thường nhanh hơn vì chúng không phải quản lý state.
• Dễ kiểm thử: Stateless components dễ kiểm thử hơn do không có state hoặc lifecycle methods.

Khi Nào Sử Dụng Stateful Component

• Quản lý trạng thái nội bộ: Khi cần quản lý state nội bộ để điều khiển hành vi và giao diện của component.
• Sử dụng lifecycle methods: Khi cần sử dụng các phương thức lifecycle để xử lý các tác vụ như gọi API, thiết lập subscription hoặc dọn dẹp.

Tối Ưu Hóa Sử Dụng Stateful và Stateless Component

Tách Biệt Logic và Giao Diện

Để tối ưu hóa, bạn nên tách biệt logic và giao diện bằng cách sử dụng stateful component để quản lý trạng thái và stateless component để hiển thị giao diện.

Ví Dụ

import React, { useState } from 'react';

// Stateless Component
const Display = ({ count }) => {
  return <p>Count: {count}</p>;
};

// Stateful Component
const Counter = () => {
  const [count, setCount] = useState(0);

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

export default Counter;

Sử Dụng Hooks để Quản Lý State trong Function Component

Sử dụng hooks như useState, useEffect, và các hook tùy chỉnh khác để quản lý state trong function component, giúp codebase của bạn trở nên ngắn gọn và dễ hiểu hơn.

Tránh Truyền Quá Nhiều Props

Khi truyền nhiều props, hãy xem xét sử dụng context hoặc các pattern khác như Redux để quản lý state toàn cục, giúp tránh tình trạng “prop drilling”.

Ví Dụ với Context API

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
};

const Display = () => {
  const { count } = useContext(CountContext);
  return <p>Count: {count}</p>;
};

const IncrementButton = () => {
  const { setCount } = useContext(CountContext);
  return <button onClick={() => setCount((count) => count + 1)}>Increment</button>;
};

const Counter = () => {
  return (
    <CounterProvider>
      <Display />
      <IncrementButton />
    </CounterProvider>
  );
};

export default Counter;

Kết Luận

Việc hiểu và sử dụng đúng cách stateful component và stateless component trong React là rất quan trọng để xây dựng các ứng dụng hiệu quả và dễ bảo trì. Stateless components giúp đơn giản hóa giao diện và tăng hiệu suất, trong khi stateful components giúp quản lý trạng thái và logic nghiệp vụ phức tạp hơn. Bằng cách kết hợp hai loại component này một cách hợp lý, bạn có thể tối ưu hóa ứng dụng React của mình và cung cấp trải nghiệm người dùng tốt nhất.

Tham Khảo

1. React Documentation
2. MDN Web Docs on React
3. FreeCodeCamp Guide to React Components
4. Context API in React
5. Using Hooks in React