React: React Interactivity - Day 9

Để tạo sự tương tác trong ứng dụng React, bạn có thể sử dụng các công cụ và cơ chế mà React cung cấp. Dưới đây là một số khái niệm quan trọng và cách thực hiện sự tương tác trong React:

State

State (Trạng thái) là dữ liệu thay đổi trong ứng dụng của bạn mà React sẽ theo dõi và cập nhật. Bạn có thể sử dụng hook useState hoặc this.state (trong các lớp component) để quản lý trạng thái. Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện người dùng.

Ví dụ

import React, { useState } from 'react';

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

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

Trong đoạn mã trên, useState là một hook React được nhập từ thư viện React. Nó được sử dụng để tạo một biến trạng thái (count) và một hàm để cập nhật trạng thái đó (setCount).

• count là biến trạng thái lưu giữ giá trị hiện tại của số đếm.
• setCount là hàm được tạo ra bởi useState để cập nhật giá trị của count.

Khi bạn gọi setCount(newValue), React sẽ tự động cập nhật giá trị của count thành newValue, và sau đó, giao diện người dùng sẽ được cập nhật để hiển thị giá trị mới của count.

Event Handling

Bạn có thể sử dụng các sự kiện như onClick, onChange, và onSubmit để xử lý tương tác của người dùng. Sự kiện này được gắn với các component và có thể kích hoạt hàm xử lý khi xảy ra event.

function ButtonWithEvent() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

Props (Thuộc tính)

Props là cách truyền dữ liệu từ component cha đến component con. Bằng cách truyền props, bạn có thể đưa dữ liệu vào các component và điều này cho phép bạn tạo các thành phần tương tác dựa trên dữ liệu này.

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

function App() {
  return <Welcome name="John" />;
}

Lifecycle Methods - React Hooks

Trong React Class Components, bạn có thể sử dụng các lifecycle methods như componentDidMount, componentDidUpdate, và componentWillUnmount để xử lý tương tác với dữ liệu và DOM khi component được tạo và cập nhật.

Tuy nhiên, các Lifecycle Methods (các phương thức vòng đời) đã được thay thế bằng các React Hooks. Các React Hooks là các hàm được cung cấp bởi thư viện React để quản lý trạng thái và vòng đời của các functional component.

 

Tham khảo

React interactivity: Events and state

React interactivity: Editing, filtering, conditional rendering