Đồng hồ bấm giờ phản ứng

Tuần này, tôi quay lại những điều cơ bản để tìm hiểu về cách sử dụng móc bằng cách tạo đồng hồ bấm giờ có phản ứng. Tôi nghĩ đây là một dự án nhỏ tuyệt vời có thể được hoàn thành chỉ trong vài giờ và đó là một cách tốt để thực hành React hook. Với đồng hồ bấm giờ này, bạn có thể bắt đầu bấm giờ và đặt lại. Hãy bắt đầu và xem mã.

Chúng tôi sẽ xóa tất cả các tệp trong thư mục src ngoại trừ App.css, App.js và index.js và xóa tất cả các tệp nhập. Chúng tôi sẽ sử dụng các móc trạng thái và hiệu ứng. Đây là thành phần ban đầu của chúng ta sẽ trông như thế nào.

Tuyệt vời vì vậy bây giờ chúng tôi phải hiển thị thời gian của chúng tôi. Chúng ta sẽ bắt đầu bằng cách hiển thị mili giây. Hãy bắt đầu bằng cách xây dựng useEffect của chúng ta. Đầu tiên khoảng thời gian của chúng ta sẽ được xác định và nếu bắt đầu là đúng, bộ đếm thời gian sẽ bắt đầu, nếu không, chúng ta sẽ xóa khoảng thời gian. Trong đối số thứ hai của useEffect, chúng ta sẽ chuyển vào một mảng có bắt đầu. Điều này có nghĩa là hiệu ứng của chúng tôi sẽ chạy khi trạng thái bắt đầu thay đổi. Chúng tôi cũng sẽ thêm một câu lệnh trả về để dọn dẹp. Cuối cùng, chúng ta sẽ có một nút sẽ bắt đầu thời gian sau khi nó được nhấp vào. Đây là những gì sẽ như thế nào.

Bây giờ thời gian của chúng ta sẽ bắt đầu đếm ngược. Hiện tại không có cách nào để dừng hoặc đặt lại đồng hồ bấm giờ. Chúng ta cũng cần phải định dạng những gì được hiển thị để con số trông chính xác. Có một mẹo hay để làm điều này. Đầu tiên chúng ta sẽ chia thời gian cho 10 bởi vì đó là giá trị của một phần nghìn giây sau đó là modulo 1000. Bây giờ chúng ta sẽ thêm nó vào số 0 để khi thời gian bắt đầu sẽ có số 0 thay vì chỉ một chữ số. Cuối cùng, chúng ta sẽ cắt và truyền vào một tham số là -2 để khi số trở thành hai chữ số thì số 0 sẽ bị loại bỏ. Đây là những gì sẽ như thế nào.

Bây giờ con số hiển thị sẽ có ý nghĩa hơn. Cuối cùng những gì chúng ta cần làm là hiển thị giây, phút và tạo nút dừng và đặt lại. Tạo phút và giây thực sự tương tự như những gì chúng ta đã làm với mili giây. Chúng tôi có thể sao chép và dán và thực hiện một số thay đổi. Thay vì sử dụng mô-đun bằng 1000, chúng ta sẽ làm điều đó bằng 60. Một điều khác chúng ta sẽ phải làm là làm tròn các số xuống vì các số thập phân sẽ được hiển thị nếu chúng ta để nguyên. Các nút cũng thực sự giống với nút mà chúng tôi đã có. Ví dụ, chúng tôi sẽ đặt trạng thái bắt đầu thành false trong nút dừng. Đối với nút đặt lại, chúng tôi sẽ đặt thời gian thành 0 và cũng đặt bắt đầu thành sai. Đây là những gì đồng hồ bấm giờ đã hoàn thành của chúng tôi sẽ trông như thế nào.

Đây là một cách hay để thực hành một số nguyên tắc cơ bản như móc câu. Những kỹ thuật tương tự này có thể được sử dụng để tạo các dự án tương tự khác như bộ đếm thời gian hoặc đồng hồ. Thật là thú vị khi xây dựng điều này và không mất nhiều thời gian để thực hiện. Hy vọng bạn có nhiều niềm vui như tôi đã làm. Chúc bạn viết mã vui vẻ! 😎