React Hooks useState, useEffect, useCallback, and useMemo.

ໃນການນຳໃຊ້ React Hook ທີ່ເປັນ Feature ຂອງ React ເຊິ່ງໃນ Code Todo List ນີ້ຈະປະກອບດ້ວຍ Hook 4 ຢ່າງຫຼັກໆທີ່ນິຍົມໃຊ້ກັນໃນຝັງ Front End Develop ມີດັ່ງນີ້:

useState

useState ຖືກນໍາໃຊ້ເພື່ອສ້າງຕົວແປຂອງສະຖານະເພື່ອເກັບລາຍການສິ່ງທີ່ຕ້ອງເຮັດ, ຄ່າການປ້ອນຂໍ້ມູນ ແລະ ລາຍການທີ່ຖືກກັ່ນຕອງ.

useEffect

useEffect ຖືກນໍາໃຊ້ເພື່ອເອົາລາຍການ todo ຈາກ API ພາຍນອກເມື່ອອົງປະກອບເຊື່ອມຕໍ່. ມັນຍັງຖືກໃຊ້ເພື່ອອັບເດດລາຍການ todo ທີ່ຖືກກັ່ນຕອງທຸກຄັ້ງທີ່ຄ່າປ້ອນເຂົ້າມີການປ່ຽນແປງ.

useCallback

useCallback ຖືກນໍາໃຊ້ເພື່ອຈື່ຈໍາຫນ້າທີ່ handleInputChange ແລະ handleToggleCompleted ເພື່ອບໍ່ໃຫ້ຖືກສ້າງໃຫມ່ໃນທຸກໆການສະແດງຜົນ.

useMemo

useMemo ຖືກນໍາໃຊ້ເພື່ອຈື່ຈໍາການນັບຂອງລາຍການ todo ສໍາເລັດເພື່ອບໍ່ໃຫ້ມັນ ຄິດໄລ່ຄືນໃຫມ່ ໃນທຸກການສະເເດງຜົນ.

import React, { useState, useEffect, useCallback, useMemo } from "react";

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}
function todo() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [inputValue, setInputValue] = useState("");
  const [filteredTodos, setFilteredTodos] = useState<Todo[]>([]);

  // useEffect ສຳລັບການດຶງຂໍ້ມູນ todos ຈາກ API ເມື່ອເຊື່ອມຕໍ່(Component)
  useEffect(() => {
    fetch("<https://jsonplaceholder.typicode.com/todos>")
      .then((response) => response.json())
      .then((data) => setTodos(data));
  }, []);

  // useEffect ສຳລັບການກັ່ນຕອງລາຍການ todos ໂດຍອີງໃສ່ຄ່າການປ້ອນຂໍ້ມູນ
  useEffect(() => {
    setFilteredTodos(
      todos.filter((todo) => {
        return todo.title.toLowerCase().includes(inputValue.toLowerCase());
      })
    );
  }, [inputValue, todos]);

 // handleInputChange => ເເກ້ໄຂຄ່າການປ້ອນຂໍ້ມູນເມື່ອຜູ້ໃຊ້ພິມໃນແຖບຄົ້ນຫາ
  const handleInputChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setInputValue(event.target.value);
    },
    []
  );

  //handleToggleCompleted => toggle ໝາຍຕິກ ສະຖານະທີ່ສຳເລັດແລ້ວຂອງສິ່ງທີ່ຕ້ອງເຮັດ
  const handleToggleCompleted = useCallback((id: number) => {
    setTodos((prevTodos) =>
      prevTodos.map((todo) => {
        if (todo.id === id) {
          return { ...todo, completed: !todo.completed };
        }
        return todo;
      })
    );
  }, []);

  // ຈື່ຈໍາຈໍານວນສິ່ງທີ່ຕ້ອງໃຫ້ສໍາເລັດ
  const completedTodosCount = useMemo(() => {
    console.log("=> Calculating completed todos count...");
    return todos.filter((todo) => todo.completed).length;
  }, [todos]);
 
  // ສ່ວນນີ້ຈະເປັນສ່ວນຂອງ UI
  return (
    <div>
      <h1>Todo List</h1>

   {/* 1. ການປ້ອນຂໍ້ມູນການຊອກຫາ */}
      <div>
        <label htmlFor="search">Search:</label>
        <input
          id="search"
          type="text"
          value={inputValue}
          onChange={handleInputChange}
        />
      </div>

   {/* 2. ຈໍານວນລາຍການທີ່ຕ້ອງເຮັດສໍາເລັດ */}
      <p>Completed todos: {completedTodosCount}</p>

   {/* 3. ລາຍການທີ່ຕ້ອງເຮັດ ໄດ້ຖືກກັ່ນຕອງໂດຍອີງໃສ່ມູນຄ່າການປ້ອນຂໍ້ມູນ ແລະ 
      ສາມາດສະຫຼັບລະຫວ່າງສໍາເລັດ ແລະ ບໍ່ສໍາເລັດໂດຍການຄລິກໃສ່ກ່ອງກາເຄື່ອງຫມາຍ Toggle
      */}
      <div>
        {filteredTodos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggleCompleted(todo.id)}
            />
            <span>{todo.title}</span>
          </li>
        ))}
      </div>
    </div>
  );
}
export default todo;

ຕົວຢ່າງ Code

CodeSandbox

Support by:

Home - Lao IT Dev