Bắt đầu với React Hooks
React Hooks là một tính năng mới tuyệt vời trong React 16.8 . Hooks là một tính năng mà bạn sẽ sử dụng mỗi ngày trong quá trình phát triển React của bạn . Hooks hữu ích vì chúng kích hoạt nhiều tính năng hơn cho các nhà phát triển. Nếu bạn muốn sử dụng các phương thức trạng thái hoặc vòng đời, bạn thường phải chuyển sang sử dụng React.Component và các lớp. Hooks cho phép ta sử dụng các tính năng này trong các thành phần chức năng.
React's State Hook
Giả sử ta có một thành phần như sau:
Trạng thái trong thành phần
import React, { Component } from 'react'; class JustAnotherCounter extends Component { state = { count: 0 }; setCount = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.setCount}>Count Up To The Moon</button> </div> ); } } Với React Hooks, ta có thể cô đọng lớp đó thành thành phần chức năng này:
Trạng thái với các thành phần chức năng và sử dụng
import React, { useState } from 'react'; function JustAnotherCounter() { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}>Count Up To The Moon</button> </div> ); } Lưu ý cách thành phần chức năng sắp xếp hợp lý mã của ta .
cú pháp useState ()
Bạn có thể không quen với dòng có cú pháp useState() . Điều này sử dụng gán cơ cấu hủy cho các mảng. Điều này tương tự như cách ta kéo các đạo cụ ra một đối tượng bằng cách cấu trúc object destructuring .
Hãy so sánh cấu trúc hủy đối tượng với hủy cấu trúc mảng để xem tại sao cấu trúc sau lại hữu ích.
Cấu trúc đối tượng
const users = { admin: 'chris', user: 'nick' }; // grab the admin and user but rename them to SuperAdmin and SuperUser const { admin: SuperAdmin, user: SuperUser } = users; Việc hủy cấu trúc đối tượng yêu cầu nhiều văn bản hơn để lấy một biến và đổi tên nó. Với cấu trúc mảng, ta chỉ đặt tên cho các biến khi ta lấy chúng ra khỏi mảng. Biến đầu tiên là mục đầu tiên trong mảng.
Cấu trúc mảng
// array destructuring const users = ['chris', 'nick']; // grab in order and rename at the same time const [SuperAdmin, SuperUser] = users; useState cung cấp cho ta hai biến và ta có thể đặt tên cho hai biến của bạn bất cứ thứ gì ta muốn. Chỉ cần biết rằng:
- Biến đầu tiên là giá trị . Tương tự với
this.state - Biến thứ hai là một hàm để cập nhật giá trị đó. Tương tự với
this.setState
Phần cuối cùng của useState là đối số mà ta truyền cho nó. Đối số useState là giá trị trạng thái ban đầu. Trong trường hợp của quầy của ta , ta bắt đầu từ 0.
Phần giới thiệu của React Hooks đưa ra một phần hay về điều này: Các lớp gây nhầm lẫn cho cả người và máy . Ý chính là các lớp đôi khi có thể gây nhầm lẫn và có thể được viết theo bất kỳ cách nào. Đi sâu vào dự án của người khác và bạn có thể tham gia vào một thế giới của các lựa chọn cú pháp và phong cách khác nhau. Lưu ý không có kế hoạch xóa hỗ trợ lớp học. Ta chỉ có một cách khác để viết mã
Bằng cách cho phép các lớp được chuyển đổi thành các thành phần chức năng nhỏ hơn, ta thậm chí có thể chia nhỏ các phần của ứng dụng thành các thành phần nhỏ hơn và tập trung hơn .
Sử dụng nhiều trạng thái Hooks
Ta thậm chí có thể sử dụng useState() nhiều lần trong cùng một hàm.
import React, { useState } from 'react'; function AllTheThings() { const [count, setCount] = useState(0); const [products, setProducts] = useState([{ name: 'Surfboard', price: 100 }]); const [coupon, setCoupon] = useState(null); return <div>{/_ use all those things here _/}</div>; } Móc hiệu ứng của React
State Hook cho phép ta sử dụng state trong các thành phần chức năng của React. Điều này giúp ta tiến gần hơn đến việc sử dụng các thành phần chức năng trên các thành phần lớp. Phần tiếp theo của việc chuyển sang các thành phần chức năng là các phương thức vòng đời. Các hiệu ứng tương tự như componentDidMount , componentDidUpdate và componentWillUnmount .
Đây là những gì mà Móc Hiệu ứng dùng để làm. Tác dụng phụ là những thứ bạn muốn ứng dụng của bạn tạo ra như:
- Tìm nạp dữ liệu
- Thay đổi thủ công DOM (tiêu đề tài liệu)
- Cài đặt đăng ký
Các hiệu ứng sẽ chạy sau mỗi lần hiển thị, kể cả lần hiển thị đầu tiên.
Hãy so sánh một lớp với một thành phần chức năng:
import React, { Component } from 'react'; class DoSomethingCrazy extends Component { componentDidMount() { console.log('i have arrived at the party!'); document.title = 'preesent'; } render() { return <div>stuff goes here</div>; } } Khi sử dụng Effect Hook, ta sử dụng useEffect() :
function DoSomethingCrazy() { useEffect(() => { console.log('i have arrived at the party!'); document.title = 'preesent'; }); return <div>stuff goes here</div>; } useEffect() tương tự như componentDidMount và componentDidUpdate .
Chỉ chạy một Móc hiệu ứng khi có gì đó thay đổi
Vì useEffect() chạy mỗi khi một thành phần hiển thị, ta có thể làm cho nó chỉ chạy một lần trên mount. Hiệu ứng Hook có thể nhận đối số thứ hai, một mảng. Nó sẽ nhìn xuyên suốt mảng và chỉ chạy hiệu ứng nếu một trong những giá trị đó đã thay đổi.
componentDidMount: Chạy một lần
// only run on mount. pass an empty array useEffect(() => { // only runs once }, []); componentDidUpdate: Chạy khi thay đổi
// only run if count changes useEffect( () => { // run here if count changes }, [count] ); componentWillUnmount ()
Để chạy một cái gì đó trước khi một thành phần ngắt kết nối, ta phải trả về một hàm từ useEffect() :
useEffect(() => { UsersAPI.subscribeToUserLikes(); // unsubscribe return () => { UsersAPI.unsubscribeFromUserLikes(); }; }); Sử dụng trạng thái và hiệu ứng cùng nhau
Không có vấn đề gì khi sử dụng chúng cùng nhau. Cùng nhau, chúng có thể tạo ra các thành phần chức năng hoạt động giống như các thành phần lớp của bạn.
Đây là một ví dụ thực tế hơn về một thành phần tìm nạp danh sách user từ API GitHub với useEffect() và giữ họ sử dụng useState() . Ta sẽ bắt đầu bằng cách sử dụng useState() cho user :
Trạng thái sử dụng
import React, { useState } from 'react'; function GitHubUsers() { const [users, setUsers] = useState([]); } Ta đang đặt user là một mảng trống để bắt đầu trong useState([]) . Tiếp theo, ta sẽ sử dụng hook useEffect() và sử dụng tìm nạp để lấy dữ liệu từ API GitHub:
Sử dụng Hiệu ứng
import React, { useState } from 'react'; function GitHubUsers() { const [users, setUsers] = useState([]); useEffect(() => { fetch('https://api.github.com/users') .then(response => response.json()) .then(data => { setUsers(data); // set users in state }); }, []); // empty array because we only run once } Lưu ý ta đang đặt đối số thứ hai cho useEffect là một mảng trống để nó chỉ chạy một lần. Cuối cùng, ta sẽ hiển thị danh sách.
Hiển thị User
import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; function GitHubUsers() { // ...other stuff here... return ( <div className="section"> {users.map(user => ( <div key={user.id} className="card"> <h5>{user.login}</h5> </div> ))} </div> ); } Ta cũng đã thêm Bulma CSS để nó trông đẹp hơn so với mặc định. Đó là những gì section và các lớp card dành cho:
Kết luận
React State và Effect Hooks là những bổ sung tuyệt vời cho thư viện và sẽ là công cụ giúp học React dễ dàng hơn cho các nhà phát triển mới. Rất nhiều thành công của Vue là sự đơn giản trong việc tạo ra các thành phần.
Giờ đây với React, bạn không cần phải phân biệt giữa một lớp hay có nên sử dụng một thành phần chức năng hay không.
Các tin liên quan
