Rate this post

React là một thư viện JavaScript mạnh mẽ, được phát triển bởi Facebook, giúp xây dựng các giao diện người dùng hiệu quả và linh hoạt. Một trong những khái niệm cốt lõi của React là Component API. Hiểu rõ về Component API sẽ giúp bạn xây dựng và quản lý các component một cách hiệu quả hơn. Bài viết này sẽ cung cấp hướng dẫn chi tiết về Component API trong React, bao gồm các phương thức và kỹ thuật quan trọng mà bạn cần biết.

Tóm tắt nội dung

Component API trong React Là Gì?

Component API trong React cung cấp các phương thức và kỹ thuật để tương tác và quản lý các component. Điều này bao gồm việc khởi tạo, cập nhật, và hủy bỏ component, cùng với quản lý dữ liệu và trạng thái.

Các Phương Thức Cơ Bản trong Component API

Component Lifecycle Methods

Các phương thức vòng đời (lifecycle methods) cho phép bạn quản lý các giai đoạn khác nhau trong vòng đời của một component. Các phương thức này thường được sử dụng trong các class component.

Constructor

constructor là phương thức được gọi đầu tiên khi một instance của component được tạo ra. Đây là nơi bạn nên khởi tạo state và ràng buộc các phương thức của component.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.increment = this.increment.bind(this);
  }

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

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

componentDidMount

componentDidMount được gọi ngay sau khi component được render lần đầu tiên. Đây là nơi thích hợp để thực hiện các thao tác bất đồng bộ như gọi API.

componentDidMount() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
}

componentDidUpdate

componentDidUpdate được gọi ngay sau khi component được cập nhật. Đây là nơi để bạn thực hiện các tác vụ dựa trên sự thay đổi của state hoặc props.

componentDidUpdate(prevProps, prevState) {
  if (this.state.count !== prevState.count) {
    console.log('Count has changed');
  }
}

componentWillUnmount

componentWillUnmount được gọi ngay trước khi component bị hủy. Đây là nơi để bạn dọn dẹp các tài nguyên như timers hoặc subscriptions.

componentWillUnmount() {
  clearInterval(this.timerID);
}

Functional Component và Hooks

Với sự ra đời của Hooks trong React, bạn có thể sử dụng các tính năng tương tự lifecycle methods trong các functional component. Hooks như useEffect và useState giúp quản lý state và thực hiện các tác vụ phụ.

useState

useState cho phép bạn thêm state vào functional component.

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;

useEffect

useEffect cho phép bạn thực hiện các tác vụ phụ trong functional component. Nó tương tự như componentDidMount, componentDidUpdate, và componentWillUnmount kết hợp.

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Chỉ chạy một lần sau khi component được render lần đầu tiên

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
};

export default DataFetcher;

Context API

Context API cho phép bạn truyền dữ liệu qua nhiều cấp component mà không cần phải truyền props qua từng cấp. Đây là một cách hiệu quả để quản lý các state toàn cục.

Tạo Context

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

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };

Sử Dụng Context

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

const ThemedComponent = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>The current theme is {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
    </div>
  );
};

export default ThemedComponent;

Kết Luận

Component API trong React cung cấp các phương thức và kỹ thuật mạnh mẽ để quản lý và tương tác với các component. Bằng cách hiểu rõ về các lifecycle methods, hooks, và Context API, bạn có thể xây dựng các ứng dụng React mạnh mẽ, linh hoạt và dễ bảo trì. Hãy thử áp dụng những kiến thức này vào dự án của bạn để tận dụng tối đa lợi ích mà React mang lại.

Tham Khảo

ReactJS

Hướng dẫn Component API trong React