Hướng dẫn cho người mới bắt đầu về React Hook và cách sử dụng chúng

React Hook là gì và tại sao chúng hữu ích?

React Hooks là một tính năng mới trong React 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 mà không cần viết class. Điều này giúp dễ dàng chia sẻ logic trạng thái giữa các thành phần và giúp làm cho mã của bạn dễ sử dụng lại và dễ hiểu hơn. Móc cũng hữu ích vì chúng cho phép bạn chia mã của mình thành các phần nhỏ hơn, có thể tái sử dụng, điều này có thể giúp quản lý và kiểm tra dễ dàng hơn.

Sự khác biệt giữa React Hook và các thành phần dựa trên lớp

Một số điểm khác biệt chính giữa React Hook và các thành phần dựa trên lớp bao gồm:

1. Móc cho phép bạn sử dụng trạng thái và các tính năng khác của React trong các thành phần chức năng: Trước khi giới thiệu Móc, chỉ các thành phần dựa trên lớp mới có thể có trạng thái và sử dụng các tính năng khác của React như phương thức vòng đời. Với Hooks, bạn có thể thêm trạng thái và các tính năng khác của React vào các thành phần chức năng, làm cho chúng linh hoạt hơn và có thể tái sử dụng.

   
   

2. Móc làm cho mã của bạn ngắn gọn và dễ đọc hơn: Các thành phần dựa trên lớp có thể trở nên dài và phức tạp, đặc biệt nếu bạn phải quản lý nhiều phương thức trạng thái hoặc vòng đời. Với Hooks, bạn có thể sử dụng các hàm tập trung, đơn giản để xử lý các phần trạng thái và logic riêng lẻ, điều này có thể làm cho mã của bạn dễ đọc và dễ hiểu hơn.

   
   

3. Móc cho phép bạn tái sử dụng logic trạng thái: Với Hook, bạn có thể trích xuất logic trạng thái từ một thành phần và chia sẻ nó trên nhiều thành phần, giúp mã của bạn có thể tái sử dụng nhiều hơn và dễ bảo trì hơn. Điều này đặc biệt hữu ích nếu bạn có một thành phần phức tạp với nhiều logic trạng thái và muốn trích xuất một số logic đó thành các hàm có thể sử dụng lại.

Móc phản ứng cơ bản

useState()

UseState hook là một chức năng trong React cho phép bạn thêm trạng thái vào các thành phần chức năng. Trạng thái là tập hợp các giá trị xác định hành vi của thành phần và hiển thị thông tin cho người dùng. Móc useState nhận một đối số duy nhất, là trạng thái ban đầu và trả về một mảng có hai phần tử.

Phần tử đầu tiên là giá trị hiện tại của trạng thái và phần tử thứ hai là một hàm mà bạn có thể sử dụng để cập nhật trạng thái. Đây là một ví dụ về cách bạn có thể sử dụng hook useState trong một thành phần chức năng:

 import React, { useState } from 'react'; const myComponent = () => { // Declare a new state variable, which we'll call "count" // The initial value of count is 0 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times.</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

Trong ví dụ này, móc useState được sử dụng để thêm một phần trạng thái có tên là đếm vào thành phần chức năng MyComponent. Giá trị ban đầu của đếm là 0 và hàm setCount được sử dụng để cập nhật giá trị của đếm khi nhấp vào nút. Mỗi lần nhấp vào nút, giá trị của số đếm sẽ tăng thêm 1 và thành phần sẽ kết xuất lại với giá trị được cập nhật.

sử dụngEffect()

useEffect là một hook trong React cho phép bạn thực hiện các tác dụng phụ trong các thành phần chức năng. Điều này có thể bao gồm những thứ như thiết lập đăng ký, sửa đổi DOM và tương tác với các API bên ngoài. Nó được gọi bên trong thành phần và sẽ chạy mỗi khi thành phần hiển thị.

Đây là một ví dụ về cách sử dụng nó:

 import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { // Perform some side effect, like subscribing to a data source const subscription = someDataSource.subscribe(data => { // Update state with the data from the subscription setState({ data }); }); // Clean up the subscription when the component unmounts return () => subscription.unsubscribe(); }); // Render the component return ( <div> {/* Use the data from the state in the render method */} Data: {state.data} </div> ); }

Trong ví dụ này, hook useEffect được sử dụng để thiết lập đăng ký cho nguồn dữ liệu và cập nhật trạng thái của thành phần với dữ liệu từ đăng ký. Nó cũng bao gồm chức năng dọn dẹp sẽ được gọi khi ngắt kết nối thành phần, để đảm bảo rằng đăng ký được dọn sạch đúng cách và không gây rò rỉ bộ nhớ.

sử dụngContext()

useContext là một hook trong React cho phép bạn truy cập giá trị của ngữ cảnh từ bên trong một thành phần chức năng. Bối 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 truyền các đạo cụ xuống theo cách thủ công ở mọi cấp độ.

Đây là một ví dụ về cách sử dụng useContext:

 import React, { useContext } from 'react'; // Create a context with a default value const MyContext = React.createContext('defaultValue'); function MyComponent() { // Use the useContext hook to access the value of the context const value = useContext(MyContext); return ( <div> {/* Use the value from the context in the render method */} Value from context: {value} </div> ); }

Trong ví dụ này, hook useContext được sử dụng để truy cập giá trị của ngữ cảnh MyContext bên trong thành phần hàm MyComponent. Giá trị của ngữ cảnh sau đó có thể được sử dụng trong phương thức kết xuất.

Điều quan trọng cần lưu ý là giá trị của ngữ cảnh sẽ chỉ được cập nhật trong các thành phần mà ngữ cảnh được sử dụng nếu nhà cung cấp cung cấp giá trị của ngữ cảnh được cập nhật. Điều này có nghĩa là mọi thay đổi đối với giá trị của ngữ cảnh sẽ chỉ được phản ánh trong các thành phần sử dụng ngữ cảnh nếu nhà cung cấp được kết xuất lại với giá trị được cập nhật.

Móc phản ứng nâng cao

sử dụngReducer()

useReducer là một hook trong React được sử dụng để quản lý trạng thái trong ứng dụng React. Nó tương tự như hook useState, nhưng nó cho phép bạn quản lý các đối tượng trạng thái phức tạp hơn và cung cấp một cách để xử lý các hành động trong hàm giảm tốc.

Đây là một ví dụ về cách useReducer có thể được sử dụng trong thành phần React:

 import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'decrement' })}>-</button> <button onClick={() => dispatch({ type: 'increment' })}>+</button> </> ); }

Trong ví dụ này, hook useReducer được sử dụng để quản lý trạng thái của một thành phần bộ đếm đơn giản. Móc được gọi với hàm rút gọn và trạng thái ban đầu, đồng thời nó trả về trạng thái hiện tại và hàm gửi có thể được sử dụng để gửi các hành động đến bộ giảm tốc. Trong trường hợp này, thành phần này có hai nút gửi các hành động 'tăng' và 'giảm' tới bộ giảm tốc, giúp cập nhật số lượng ở trạng thái tương ứng.

sử dụngMemo()

useMemo là một hook trong React cho phép bạn tối ưu hóa hiệu suất của một thành phần bằng cách ghi nhớ kết quả của nó. Nó nhận một hàm và một mảng các phụ thuộc làm đối số và trả về kết quả được ghi nhớ của hàm.

Ghi nhớ chỉ đơn giản là một kỹ thuật tối ưu hóa được sử dụng để tăng tốc độ và hiệu quả của ứng dụng. nó thực hiện điều này bằng cách lưu trữ kết quả tính toán và trả về kết quả được lưu trong bộ nhớ cache khi các đầu vào tương tự xảy ra lần nữa.

Mảng phụ thuộc cho React biết thời điểm chạy lại chức năng đã ghi nhớ. Mỗi khi một trong các thành phần phụ thuộc trong mảng thay đổi, chức năng ghi nhớ sẽ được chạy lại. Điều này có thể hữu ích để tối ưu hóa hiệu suất trong các thành phần lớn hoặc phức tạp, trong đó việc tính toán lại kết quả của một hàm mỗi khi thành phần hiển thị có thể tốn kém.

sử dụngRef()

Trong React, hook useRef được sử dụng để tạo tham chiếu đến phần tử DOM hoặc phiên bản thành phần React. Sau đó, tham chiếu này có thể được sử dụng để truy cập các thuộc tính của phần tử, chẳng hạn như giá trị hoặc trạng thái được kiểm tra của phần tử hoặc để gọi các hàm trên phần tử, chẳng hạn như tiêu điểm hoặc nhấp chuột.

Dưới đây là một ví dụ về cách useRef có thể được sử dụng để tập trung một yếu tố đầu vào khi nhấp vào nút:

 import { useRef } from 'react'; function MyInput() { const inputRef = useRef(null); function handleClick() { // Use the `current` property of the ref to access the DOM element inputRef.current.focus(); } return ( <div> <input type="text" ref={inputRef} /> <button onClick={handleClick}>Focus the input</button> </div> ); }

Trong ví dụ này, biến inputRef được tạo bằng cách gọi useRef và chuyển null làm giá trị ban đầu cho ref. Tham chiếu này sau đó được gắn vào phần tử đầu vào bằng cách đặt thuộc tính ref thành inputRef.

Khi hàm handleClick được gọi, nó sử dụng thuộc tính hiện tại inputRef để truy cập phần tử đầu vào và gọi phương thức tiêu điểm của nó, phương thức này sẽ di chuyển tiêu điểm đến phần tử đầu vào.

Lưu ý rằng không nên sử dụng useRef để lưu trữ trạng thái trong thành phần của bạn. Thay vào đó, hãy sử dụng hook useState cho mục đích đó. useRef được dùng để lưu trữ các tham chiếu đến các giá trị không phải React, chẳng hạn như các phần tử DOM.

Các trường hợp sử dụng phổ biến cho React Hook

• Quản lý trạng thái trong các thành phần đơn giản và phức tạp
• Thực hiện các tác dụng phụ như gọi API và đăng ký
• Tối ưu hóa hiệu suất với ghi nhớ
• Tạo tham chiếu đến các phần tử để sử dụng trong hoạt ảnh và tương tác

Phần kết luận

Tóm lại, các hook phản ứng mang lại một số lợi ích so với các thành phần dựa trên lớp truyền thống. Chẳng hạn như tính đơn giản, khả năng sử dụng lại, khả năng kết hợp (tức là khả năng kết hợp nhiều phần logic thành một chức năng duy nhất) và hiệu suất được cải thiện.

Tôi khuyên bạn nên tự làm quen với những kiến thức cơ bản về React Hook và cố gắng áp dụng chúng trong dự án tiếp theo của mình.