UseState và UseEffect với React

Chà, đã vài tháng kể từ bài đăng blog cuối cùng của chúng tôi khi chúng tôi thực hiện lệnh gọi API với fetch () và Javascript! Lần này, chúng tôi đang xây dựng một dự án trong React Framework hoặc công nghệ. Tất cả đều rất thú vị và hôm nay, tôi sẽ viết về hai hook quan trọng trong React mà bạn sẽ sử dụng, useState và useEffect!

Vậy useState và useEffect là gì? Chà, chúng là các chức năng đặc biệt trong khuôn khổ React cho phép bạn truy cập hoặc kết nối vào các tính năng của React. State và Effect là các hook, và useState () và useEffect () là các hàm sử dụng các hook cho phép các tính năng React. React State và React Effect chỉ được sử dụng trong React framework, nhưng chúng là những công cụ rất mạnh và bạn chắc chắn sẽ sử dụng chúng trong hành trình lập trình của mình!

Hãy bắt đầu với React State, State là gì và tại sao hoặc tôi sẽ bắt đầu sử dụng nó như thế nào? Vâng, State là một kiểu dữ liệu động, nó thay đổi theo thời gian hoặc khi người dùng thực hiện điều gì đó. Giả sử bạn muốn đặt "số đếm" cho bộ đếm, khi bộ đếm thay đổi, trạng thái "số lượng" sẽ thay đổi theo nó. Không giống như các đạo cụ khi chúng được truyền từ một thành phần mẹ như App.js, Trạng thái sẽ thay đổi trong khi các đạo cụ thì không thể. Dưới đây, chúng tôi đang nhập hook useState vào thành phần và sau đó chúng tôi đang gọi hàm useState trong hàm Ví dụ (). Cú pháp để thiết lập trạng thái như sau:

const [state, setState] = useState ()

(useState trả về một cặp giá trị, trạng thái hiện tại và một hàm để cập nhật nó.)

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>    Click me
  </button>

Để đơn giản hóa mọi thứ, chúng ta sẽ chỉ nói về useEffect về việc sử dụng nó để tìm nạp dữ liệu hoặc để lấy dữ liệu từ một API công khai bằng cách sử dụng fetch ()! Móc hiệu ứng cho phép bạn thực hiện các hiệu ứng phụ trong các thành phần của mình, hoặc về cơ bản, chạy một số mã bổ sung sau khi React đã cập nhật DOM. Tác dụng chính của thành phần của bạn là cập nhật DOM hoặc thay đổi một phần tử trong khi tác dụng phụ có thể là thực hiện một yêu cầu mạng hoặc truy cập dữ liệu từ cơ sở dữ liệu. Đây là nơi xuất hiện lệnh gọi API hoặc tìm nạp dữ liệu. Chúng ta có thể sử dụng móc Hiệu ứng trong thành phần hàm của mình và gọi nó để lấy dữ liệu chúng ta cần. Lưu ý thêm, useEffect được gọi bất cứ lúc nào thành phần được hiển thị. Vì vậy, chúng tôi sẽ hiển thị DOM của mình và sau đó useEffect của chúng tôi sẽ được gọi.

useEffect(() => { 
         fetch(API) 
           .then((r) => r.json()) 
              .then((data) => {
                    setState(data) }); 
}, []);

Có rất nhiều thứ khác để sử dụngEffect, chẳng hạn như các hiệu ứng có và không có dọn dẹp, nhưng chúng ta sẽ không xem xét những điều đó hôm nay. Và tôi chắc chắn rằng còn nhiều thứ khác để sử dụngState, nhưng tôi chỉ đề cập đến những điều cơ bản ngày hôm nay. Tôi hy vọng điều này hữu ích và cảm ơn bạn đã đọc, chúc bạn may mắn tiếp tục cuộc hành trình lập trình của mình và khỏe mạnh!