UseEffect Hook trong React Native

UseEffect còn được dùng khi bạn muốn thực hiện các  Side Effect (Được hiểu như là một trương trình phần mềm khi tác động đến làm thay đổi dữ liệu của chương trình).

UseEffect được sử dụng nhiều khi nào?

  • Update DOM: Thay đổi 1 thành phần trên giao diện hiện tại.
  • Call API: Lấy dữ liệu về
  • Listing DOM Event: Click, Scroll, Touch, Navigation,….

Import UseEffect từ thư viên React

import React, {useEffect } from "react";

Khởi tạo UseEffect

useEffect(() => {
    effect
    return () => {
        cleanup
    };
}, [input]);
  • effect: Là callback function, nơi dùng để bạn thực thi các công việc khi sử dụng Useffect và luôn được chạy sau khi bạn Moute state (mở giao diện có chứa useEffect) đó lên. effect Sẽ chạy ngay khi bạn tiến hành render xong giao diện.
  • return: giá trị được trả về khi bạn UnMount State (Tắt hoặc thoát khỏi giao diện hiện tại). Thường được dùng khi bạn muốn dọn dẹp các thành phần ảnh hưởng đến tiến độ phần mềm: remove listener (unsubscribe), clear time
  • input (dependences): Là các giá trị dùng để lắng nghe (các listener). Khi các giá trị này thay đổi giá trị thì useEffect sẽ thực thi lại callback function của nó
  • Cleanup: Dọn dẹp các các thành phần ảnh hưởng đến tiến độ phần mềm: remove listener (unsubscribe), clear time

Life Cycle của UseEffect

  1. Sau khi render xong state (cập nhật hoặc tạo mới lại state) khi ecffect (callback funtion) của useEffect bắt đầu chạy.
  2. Cập nhật lại DOM (mute) khi thành phần của state mà useEffect lắng nghe thay đổi.
  3. Reender lại UI
  4. Gọi Clearnup khi input (dependences) thay đổi
  5. Gọi lại effect (callback function) khi load mới

Cách sử dụng UseEffect

có 3 cách để dử dụng useffect:

Sử dụng khi không có đối input để lắng nghe

useEffect(() => {});

Đối với cách này thì

  • State useEffect sẽ luôn luôn được gọi khi có bất kỳ một phần tử nào trên trang được thay đổi
  • Không khuyến khách sử dụng cách này vì rất dễ xẩy ra trường hợp lặp vô hạn dẫn tràn bộ nhớ và thoát ứng dụng.

Sử dụng khi có đôi số input nhưng là rỗng

useEffect(() => {}, []);

Đối với cách này thì: useEffect sẽ chỉ được gọi 1 lần duy nhất khi mới load state.

Sử dụng khi có input

useEffect(() => {}, [input]);

Đối với cách này thì: useEffect sẽ được gọi khi 1 trang các input thay đổi. giúp bạn kiểm xoát chặt chẽ hơn trong việc load lại state

Ví dụ useEffect với timer

import { View, Text, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";

const UseEffectTimer = () => {
    const [countdown, setCountdown] = useState(180);

    useEffect(() => {
        const timer = setInterval(() => {
            setCountdown((prev) => prev - 1);
        }, 100);
        return () => {
            clearTimeout(timer);
        };
    }, []);

    return (
        <View style={styles.container}>
            <Text style={styles.h1}>{countdown}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
    h1: {
        fontSize: 30,
        fontWeight: "bold",
        margin: 20,
    },
    button: {
        backgroundColor: "blue",
        width: "80%",
        height: 50,
        justifyContent: "center",
        alignItems: "center",
    },
    buttonText: {
        color: "white",
        fontSize: 20,
        fontWeight: "bold",
    },
});

export default UseEffectTimer;
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x