Đây là phần thứ ba trong phần tiếp theo của loạt bài học về phản ứng của tôi , nơi tôi đăng một bài báo hàng tuần về tiến trình học phản ứng của mình và chia sẻ các tài nguyên và tài liệu hữu ích và giúp tôi hiểu rõ hơn về các khái niệm và nâng cao kỹ năng javascript của mình.

Theo lộ trình học tập mà tôi đã đặt ra cho bản thân, Hooks là người tiếp theo trên bàn, tôi đã trình bày các câu móc cơ bản và phải biết trong tuần này và sẽ đề cập đến các câu móc nâng cao và móc câu tùy chỉnh trong những tuần tới. Các móc được đề cập trong bài viết này là,

1. UseState
2. UseEffect
3. UseContext
4. UseReducer

Lập trình chức năng

Lập trình chức năng là gì?

Theo FreeCodeCamp, lập trình chức năng là một phong cách lập trình trong đó các giải pháp là các chức năng đơn giản bị cô lập , không có bất kỳ tác dụng phụ nào bên ngoài phạm vi chức năng.

• Hàm cô lập: Điều này có nghĩa là không có sự phụ thuộc vào trạng thái của chương trình, bao gồm các biến toàn cục có thể thay đổi, do đó hàm hoạt động riêng lẻ và chỉ thực hiện công việc đã được giao bởi một lập trình viên.
• Chức năng thuần túy đơn giản: Đầu vào giống nhau luôn cho đầu ra giống nhau.
• Các chức năng có tác dụng phụ không hoặc có giới hạn: Bất kỳ thay đổi nào đối với trạng thái của toàn bộ chương trình bên ngoài chức năng được kiểm soát theo nghĩa không ảnh hưởng đến chức năng hoặc hoạt động của nó.
• Lập trình chức năng có một mô hình lập trình không trạng thái .

Trở lại với Hooks…

Hooks là gì?

Theo phản ứng chính thức của Docs,

“Hooks là một bổ sung mới cho React trong phiên bản 16.8 cho phép bạn sử dụng trạng thái và các tính năng khác của React, chẳng hạn như các phương thức vòng đời, mà không cần viết một lớp.”

Các thành phần chức năng trong React không có gì khác ngoài một mô hình lập trình chức năng cách ly chức năng với nhau để chúng có thể thực hiện các hành động của riêng mình mà không có bất kỳ sự can thiệp nào từ thế giới bên ngoài.

4 Móc được sử dụng nhiều nhất.

1. useState ()

• Hook useState () là gì? Nó là một hook cho phép bạn có các biến trạng thái trong các thành phần chức năng, bạn truyền trạng thái ban đầu cho hàm này và nó trả về một biến có giá trị trạng thái hiện tại và một hàm khác để cập nhật giá trị này khi màn hình hiển thị lại.
• Chúng ta chuyển gì để useState ()? đối số mà useState () nhận là trạng thái ban đầu, nó có thể là một số hoặc một chuỗi nếu đó là những gì bạn cần.
• UseState return () là gì? Nó trả về hai giá trị, trạng thái hiện tại và một hàm để cập nhật trạng thái hiện tại, hãy xem ví dụ bên dưới.

const [foo, setFoo] = useState('bar')

2. useEffect ()

Theo tài liệu chính thức, Hiệu ứng móc cho phép bạn thực hiện các hiệu ứng phụ trong thành phần chức năng. Nói tóm lại, tác vụ xảy ra ngoài chu trình đánh giá và kết xuất thành phần thông thường.

Chúng tôi xử lý các hiệu ứng này một cách riêng biệt để những tác dụng phụ này không làm gián đoạn quá trình hiển thị giao diện người dùng bình thường của thành phần phản ứng.

useEffecct( () => {...}, []

1. Một chức năng nên được thực thi sau mỗi lần đánh giá thành phần, là nơi mã tác dụng phụ của bạn đi đến.
2. Đối số thứ hai là một mảng, đây được gọi là mảng phụ thuộc, đối số đầu tiên tức là hàm sẽ chỉ chạy nếu các phụ thuộc được đề cập được thay đổi.

useEffect(() => {
    effect
    return () => {
        cleanup
    }
}, [])

3. useContext ()

Ngữ cảnh cung cấp một cách để truyền dữ liệu qua cây thành phần mà không cần phải chuyển các đạo cụ xuống theo cách thủ công ở mọi cấp độ. Vâng, nó chỉ đơn giản là thế này.

Ba bước để tạo useContext () Hooks,

• Tạo ngữ cảnh: const createContext = React.createContext (null);
• Wrap với nhà cung cấp và chuyển giá trị ngữ cảnh, giá trị được truyền xuống.
• Xuất: xuất tệp createContext mặc định

4. useReducer ()

Oh Boy! cái này tôi đã mất nhiều ngày để hoàn thành phần mà tôi có thể tự thực hiện nó, tuy nhiên, tôi sẽ cố gắng hết sức để làm cho ít nhất phần lý thuyết dễ dàng hơn cho bạn.

• useReducer là một hook được sử dụng để quản lý nhà nước.
• Nó là một giải pháp thay thế cho useState, trên thực tế, hook useState được xây dựng bằng useReducer.
• Hoạt động của nó liên quan rất nhiều đến chức năng mảng giảm thiểu của javascript.

const [count, dispatch] = useReducer(reducer, initialState)

1. công văn, được sử dụng để gửi một hành động mới. Đây là một chức năng được kích hoạt tự động sau khi một hành động được thực hiện thông qua chức năng giảm tốc, nhận ảnh chụp nhanh trạng thái mới nhất và trả về trạng thái mới và cập nhật.

• useReducer, xác định trạng thái ban đầu.
• Cung cấp một hàm chứa các hành động cập nhật trạng thái.
• Kích hoạt để gửi một trạng thái cập nhật được tính toán liên quan đến trạng thái ban đầu.

Theo css-trick , "Nếu một phần tử trong trạng thái của bạn dựa vào giá trị của một phần tử khác trong trạng thái của bạn, thì hầu như luôn luôn sử dụng useReducer"

Quy tắc ngón tay cái có thể là sử dụng useReducerto xử lý các trạng thái phức tạp, đặc biệt khi trạng thái ban đầu dựa trên trạng thái của các phần tử khác.

Tôi hy vọng bài viết này đã cung cấp cho bạn kiến ​​thức cơ bản về react hook và từ đây bạn có thể tra cứu một số ví dụ về sandbox và hiểu rõ hơn. Dưới đây, tôi đính kèm một số tài liệu tham khảo chi tiết đến một số bài báo cho tất cả các hook mà tôi đã đề cập, nơi bạn có thể xem các ví dụ phức tạp hơn và hiểu sâu hơn về các hook cụ thể.

[1]https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/

[2]https://medium.com/swlh/react-hook-a-guide-to-learning-useeffect-11687e777aeb

[3]https://www.robinwieruch.de/react-usecontext-hook

[4]https://css-tricks.com/getting-to-know-the-usereducer-react-hook/