Giới thiệu
Trong hướng dẫn này, bạn sẽ tạo đồng hồ đếm ngược bằng cách sử dụng React hooks để cập nhật trạng thái và quản lý các hiệu ứng phụ trong một thành phần React.
Với React hooks, bạn có thể tạo mã sạch hơn, logic có thể tái sử dụng giữa các thành phần và cập nhật trạng thái mà không cần lớp.
Bộ hẹn giờ đếm ngược là một thành phần giao diện người dùng phổ biến. Họ có thể thông báo cho người dùng biết họ đã làm việc gì đó bao lâu hoặc bao lâu cho đến khi một sự kiện nào đó xảy ra. Sự kiện bạn sẽ đếm ngược trong hướng dẫn này là Hacktoberfest của DigitalOcean.
Đến cuối hướng dẫn này, bạn sẽ có một đồng hồ đếm ngược chức năng và có thể sử dụng lại bằng cách sử dụng React's useState() và useEffect() móc câu.
Điều kiện tiên quyết
Trước khi bắt đầu hướng dẫn này, bạn sẽ cần những thứ sau:
Hướng dẫn này đã được xác minh với Node.js v16.13.1, npm v8.2.0 và react v17.0.2.
Bước 1 – Tạo một dự án trống
Trong bước này, bạn sẽ tạo một dự án mới bằng Tạo ứng dụng React. Sau đó, bạn sẽ xóa dự án mẫu và các tệp liên quan được cài đặt khi bạn khởi động dự án.
Để bắt đầu, hãy thực hiện một dự án mới. Trong thiết bị đầu cuối của bạn, hãy chạy tập lệnh sau để cài đặt một dự án mới bằng cách sử dụng create-react-app:
- npx create-react-app react-hooks-timer
Sau khi dự án kết thúc, hãy thay đổi vào thư mục:
In a new terminal tab or window, start the project using the Create React App start script. The browser will auto-refresh on changes, so leave this script running while you work:
You will get a local running server. If the project did not open in a browser window, you can open it with http://localhost:3000/. Nếu bạn đang chạy điều này từ một máy chủ từ xa, địa chỉ sẽ là http://your_server_ip:3000.
Trình duyệt của bạn sẽ tải bằng một ứng dụng React được tạo bởi Create React App:
Bạn sẽ xây dựng một tập hợp các thành phần tùy chỉnh mới, vì vậy bạn sẽ cần bắt đầu bằng cách xóa một số mã soạn sẵn để bạn có thể có một dự án trống.
Để bắt đầu, hãy mở src/App.js trong một trình soạn thảo văn bản. Đây là thành phần gốc được đưa vào trang. Tất cả các thành phần sẽ bắt đầu từ đây. Bạn có thể tìm thêm thông tin về App.js tại Cách thiết lập một dự án React với Tạo ứng dụng React.
Mở src/App.js bằng lệnh sau:
You will see a file like this:
react-hooks-timer/src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Sau đó, thay thế mọi thứ trong return câu lệnh để trả về một tập hợp các thẻ. Điều này sẽ cung cấp cho bạn một trang hợp lệ mà không trả lại gì. Mã cuối cùng sẽ giống như sau:
react-hooks-timer / src / App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
)
}
export default App;
Tiếp theo, loại bỏ logo. Xóa dòng import logo from './logo.svg';.
Lưu và thoát khỏi trình soạn thảo văn bản.
Cuối cùng, xóa logo vì bạn sẽ không sử dụng nó trong ứng dụng này. Bạn nên xóa các tệp không sử dụng khi làm việc để tránh nhầm lẫn.
Trong cửa sổ dòng lệnh nhập lệnh sau:
Now that the project is set up, you can create your first component.
Step 2 — Calculating How Much Time is Left
In this step, you will create a function that calculates the time remaining between the current date and the first day of Hacktoberfest.
First, set up a function called calculateTimeLeft:
react-hooks-timer / src / App.js
// ...
const calculateTimeLeft = () => {
};
// ...
Tiếp theo, bên trong hàm, bạn sẽ sử dụng JavaScript Date đối tượng để tìm hiện tại year.
Tạo một biến có tên là year được đặt thành JavaScript date phương pháp Date.getFullYear().
Thêm mã sau vào bên trong calculateTimeLeft chức năng:
react-hooks-timer / src / App.js
// ...
const calculateTimeLeft = () => {
let year = new Date().getFullYear();
}
// ...
Ghi chú: Bạn có thể sử dụng JavaScript Date đối tượng để làm việc với ngày và giờ.
Các Date.getFullYear() phương thức sẽ lấy năm hiện tại.
Bây giờ bạn có thể sử dụng biến này để tính toán sự khác biệt giữa ngày hiện tại và ngày đầu tiên của Hacktoberfest.
Bên trong calculateTimeLeft , hãy thêm một biến mới được gọi là difference. Đặt nó bằng một cái mới Date đối tượng có mã sau:
react-hooks-timer / src / App.js
// ...
const calculateTimeLeft = () => {
let year = new Date().getFullYear();
const difference = +new Date(`10/01/${year}`) - +new Date();
}
// ...
Các + trước cái mới Date đối tượng là cách viết tắt để ra lệnh cho JavaScript truyền đối tượng dưới dạng số nguyên, cung cấp cho bạn dấu thời gian Unix của đối tượng được biểu thị dưới dạng micro giây kể từ kỷ nguyên.
Ghi chú: Đối với hướng dẫn này, hãy đảm bảo ngày bạn đếm ngược được đặt trong tương lai, nếu không bạn sẽ gặp lỗi.
Để giữ cho mã có thể sử dụng lại được, bạn sử dụng một mẫu JavaScript Literal và thêm vào year biến cùng với tháng và ngày của Hacktoberfest. Hacktoberfest bắt đầu vào ngày 1 tháng 10 hàng năm. Khi bạn sử dụng year thay cho một năm được mã hóa cứng, bạn sẽ luôn có năm hiện tại.
Bây giờ bạn đã tính được tổng số mili giây cho đến khi đồng hồ đếm ngược hết hạn, bạn cần chuyển đổi số mili giây thành một thứ gì đó thân thiện hơn và con người dễ đọc hơn.
Bước 3 - Định dạng thành Ngày, Giờ, Phút và Giây
Trong bước này, bạn sẽ tạo một đối tượng trống có tên là timeLeft, sử dụng một if để kiểm tra xem còn thời gian hay không và tính tổng số giờ, phút và giây bằng cách sử dụng toán học và môđun (%) nhà điều hành. Cuối cùng, bạn sẽ trả lại timeLeft.
Đầu tiên, tạo đối tượng trống có tên timeLeft sau đó sẽ được điền ngày, giờ, phút và giây trong if bản tường trình.
Thêm mã sau vào bên trong calculateTimeLeft chức năng:
react-hooks-timer / src / App.js
// ...
const calculateTimeLeft = () => {
let year = new Date().getFullYear();
let difference = +new Date(`10/01/${year}`) - +new Date();
let timeLeft = {};
}
// ...
Bây giờ hãy tạo một if tuyên bố sẽ so sánh difference để xem liệu nó có lớn hơn 0.
Thêm mã này vào bên trong calculateTimeLeft chức năng:
react-hooks-timer / src / App.js
// ...
const calculateTimeLeft = () => {
let year = new Date().getFullYear();
let difference = +new Date(`10/01/${year}`) - +new Date();
let timeLeft = {};
if (difference > 0) {
timeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60)
};
}
}
// ...
Trong mã này, bạn làm tròn các số từ ngày, giờ, phút và giây xuống và giảm phần còn lại để nhận được một giá trị số nguyên. Sau đó, bạn có thể so sánh difference để xem liệu nó có lớn hơn 0.
Cuối cùng, bạn cần trở lại timeLeft để bạn có thể sử dụng giá trị ở nơi khác trong thành phần.
Thêm mã này vào bên trong calculateTimeLeft chức năng:
react-hooks-timer / src / App.js
// ...
const calculateTimeLeft = () => {
let year = new Date().getFullYear();
let difference = +new Date(`10/01/${year}`) - +new Date();
let timeLeft = {};
if (difference > 0) {
timeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60)
};
}
return timeLeft;
}
// ...
Bây giờ bạn đã tạo một chức năng tính toán thời gian còn lại cho đến Hacktoberfest, bạn có thể thêm vào trạng thái ứng dụng sẽ kiểm soát và cập nhật bộ đếm thời gian của bạn.
Bước 4 - Cập nhật Trạng thái ứng dụng của bạn với useState và useEffect
Với React Hooks, bạn có thể thêm khả năng quản lý trạng thái vào các thành phần chức năng hiện có mà không cần chuyển đổi chúng thành một lớp.
Trong bước này, bạn sẽ nhập useState và useEffect móc từ React để quản lý trạng thái trong thành phần này.
Ở trên cùng của App.js tập tin, thêm useState và useEffect trong câu lệnh nhập của bạn:
react-hooks-timer / src / App.js
import React, { useEffect, useState } from "react";
// ...
Mã này cho React biết rằng bạn muốn sử dụng các hook cụ thể này và chức năng của chúng có sẵn từ React.
Để làm cho đồng hồ đếm ngược hoạt động, bạn sẽ cần thiết lập phương pháp thời gian còn lại mà chúng tôi đã mã hóa trước đó để cập nhật trạng thái:
Thêm mã này sau calculateTimeLeft chức năng:
react-hooks-timer / src / App.js
// ...
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
// ...
Cú pháp JavaScript này được gọi là cấu trúc mảng.
Các useState phương thức chấp nhận một tham số để thiết lập trạng thái ban đầu và trả về một mảng chứa trạng thái hiện tại và một hàm để thiết lập trạng thái.
timeLeft sẽ mang theo đối tượng khoảng thời gian còn lại của chúng ta và cung cấp cho chúng ta một phương pháp để thiết lập trạng thái. Khi tải thành phần, timeLeft giá trị được đặt thành giá trị bên trái thời gian hiện tại.
Tiếp theo, bạn sẽ sử dụng useEffect móc để đối phó với các tác dụng phụ của thành phần.
Ghi chú: MỘT tác dụng phụ là bất cứ điều gì ảnh hưởng đến một cái gì đó bên ngoài phạm vi của hàm đang được thực thi.
Trong giải pháp này, bạn sẽ sử dụng setTimeout phương pháp bên trong của useEffect cái móc. setTimeout và tương tự setInterval phương thức là các mẫu React phổ biến khi được sử dụng bên trong useEffect cái móc.
Hầu hết các hành vi không đồng bộ như setTimeout phương thức trong React được định nghĩa với sự kết hợp của useEffect và useState móc câu.
Ghi chú: Bạn có thể đọc thêm về thời điểm và cách sử dụng các phương pháp như setTimeout và setInterval trong phần này của Tài liệu React.
Thêm mã này sau useState() chức năng:
react-hooks-timer / src / App.js
// ...
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
useEffect(() => {
const timer = setTimeout(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
});
// ...
Các useEffect là những gì cập nhật lượng thời gian còn lại. Theo mặc định, React sẽ gọi lại hiệu ứng sau mỗi lần hiển thị.
Mỗi khi biến timeLeft được cập nhật ở trạng thái, useEffect đám cháy. Mỗi lần kích hoạt, chúng tôi đặt bộ hẹn giờ trong 1 giây (hoặc 1.000 mili giây), bộ hẹn giờ sẽ cập nhật thời gian còn lại sau khi thời gian đó trôi qua.
Chu kỳ sẽ tiếp tục mỗi giây sau đó.
Để giúp loại bỏ khả năng hết thời gian chờ xếp chồng và gây ra lỗi, hãy thêm clearTimeout phương pháp bên trong useEffect móc cũng vậy.
Thêm một clearTimeout và truyền vào bộ định thời biến dưới dạng một tham số:
react-hooks-timer / src / App.js
// ...
useEffect(() => {
const timer = setTimeout(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
return () => clearTimeout(timer);
});
// ...
Các return chức năng chạy mỗi khi useEffect chạy timer ngoại trừ lần chạy đầu tiên của thành phần và sẽ xóa hết thời gian chờ nếu thành phần đó được ngắt kết nối.
Bây giờ trạng thái của bạn được đặt thành calculateTimeLeft() và đang cập nhật bên trong móc hiệu ứng của bạn, nó có thể được sử dụng để xây dựng thành phần hiển thị của bạn.
Bước 5 - Sử dụng Object.keys
Trong bước này, bạn sẽ sử dụng Object.keys lặp lại timeLeft đối tượng và xây dựng một thành phần hiển thị. Bạn sẽ sử dụng thành phần hiển thị để hiển thị thời gian còn lại trước khi Hacktoberfest bắt đầu.
Đầu tiên, hãy tạo một biến mới trong useEffect móc được gọi là timerComponents:
react-hooks-timer / src / App.js
// ...
const timerComponents = [];
// ...
Sau khi lặp lại các phím trong timeLeft, bạn sẽ sử dụng biến này để đẩy một thành phần JSX mới với thời gian còn lại.
Tiếp theo, sử dụng Object.keys lặp lại timeLeft đối tượng bạn trả lại từ của bạn calculateTimeLeft chức năng.
Thêm mã này vào timerComponents Biến đổi:
react-hooks-timer / src / App.js
// ...
const timerComponents = [];
Object.keys(timeLeft).forEach((interval) => {
if (!timeLeft[interval]) {
return;
}
timerComponents.push(
<span>
{timeLeft[interval]} {interval}{" "}
</span>
);
});
// ...
Ở đây mã lặp qua các thuộc tính của timeLeft sự vật. Nếu khoảng thời gian hẹn giờ có giá trị lớn hơn 0, nó sẽ thêm một phần tử vào timerComponents mảng.
Ghi chú: Bổ sung {" "} trong mã được sử dụng để các khoảng hiển thị thời gian còn lại không chạy vào nhau khi hiển thị trên màn hình.
Các {} cho phép bạn sử dụng JavaScript bên trong JSX của bạn và "" thêm không gian.
Bây giờ bạn đã sẵn sàng để thêm JSX mới trong các thành phần Ứng dụng return để hiển thị thời gian còn lại cho đến Hacktoberfest.
Bước 6 - Hiển thị thời gian còn lại
Trong bước này, bạn sẽ thêm các thành phần JSX vào thành phần ứng dụng return bản tường trình. Bạn sẽ sử dụng toán tử bậc ba để kiểm tra xem còn thời gian hay đã đến lúc cho Hacktoberfest,
Để sử dụng timerComponents , bạn cần kiểm tra độ dài của nó và trả lại hoặc cho người dùng biết rằng bộ hẹn giờ đã trôi qua.
Thêm mã này vào bên trong return bản tường trình:
react-hooks-timer / src / App.js
// ...
return (
<div>
{timerComponents.length ? timerComponents : <span>Time's up!</span>}
</div>
);
// ...
Trong các thành phần của React JSX, bạn sử dụng toán tử bậc ba thay cho JavaScript if bản tường trình. Điều này là do chỉ các biểu thức được phép bên trong JSX.
Các timerComponents.length dòng mã kiểm tra xem có bất kỳ thứ gì bên trong timerComponents mảng và kết xuất nó nếu có, nếu không, nó hiển thị Time's up!.
Tiếp theo, bạn sẽ thêm hai thành phần JSX nữa vào return để cho người dùng biết những gì họ đang đếm ngược:
react-hooks-timer / src / App.js
// ...
return (
<div>
<h1>Hacktoberfest 2020 Countdown</h1>
<h2>With React Hooks!</h2>
{timerComponents.length ? timerComponents : <span>Time's up!</span>}
</div>
);
// ...
Để sử dụng năm hiện tại thay vì mã hóa cứng 2020, bạn có thể tạo một biến trạng thái mới và đặt trạng thái ban đầu thành new Date().getFullYear();.
Sau lần đầu tiên useState() biến, thêm mã này:
react-hooks-timer / src / App.js
// ...
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
const [year] = useState(new Date().getFullYear());
// ...
Phương pháp này sẽ lấy năm hiện tại như bạn đã sử dụng trong calculateTimeLeft chức năng.
Sau đó, bạn có thể xóa mã cứng 2020 từ của bạn h1 và thay thế nó bằng year:
react-hooks-timer / src / App.js
// ...
return (
<div>
<h1>Hacktoberfest {year} Countdown</h1>
<h2>With React Hooks!</h2>
{timerComponents.length ? timerComponents : <span>Time's up!</span>}
</div>
);
// ...
Điều này sẽ hiển thị biến trạng thái của bạn, biến này sẽ luôn có năm hiện tại. Dự án đã hoàn thành của bạn sẽ trông như thế này:
Kiểm tra kho lưu trữ GitHub này để xem mã đầy đủ.
Sự kết luận
Trong hướng dẫn này, bạn đã xây dựng một thành phần giao diện người dùng đếm ngược bằng cách sử dụng useState và useEffect móc để quản lý và cập nhật trạng thái ứng dụng của bạn.
Từ đây, bạn có thể tiếp tục việc học của mình với việc tạo kiểu các thành phần React để tạo giao diện người dùng đếm ngược hấp dẫn hơn.
Bạn cũng có thể theo dõi toàn bộ loạt bài Cách viết mã trong React.js trên DigitalOcean để tìm hiểu thêm về cách phát triển với React.
.
