Chuyển đổi một thành phần dựa trên lớp React thành một chức năng bằng cách sử dụng State Hook
Hooks là tất cả những cơn thịnh nộ trong React, đặc biệt là bây giờ chúng đã ổn định kể từ React v16.8 ! Đề xuất Hooks là một nỗ lực để giải quyết một số mối quan tâm lớn của các nhà phát triển với React. Về cơ bản, Hook là một chức năng đặc biệt cho phép bạn “kết nối” các tính năng của React. Hooks là lý tưởng nếu trước đó bạn đã viết một thành phần chức năng và nhận ra rằng bạn cần thêm trạng thái vào nó.
Nếu bạn chưa quen với Hooks và muốn có một cái nhìn tổng quan, hãy xem phần giới thiệu của ta về React Hooks .
Trong hướng dẫn này, ta sẽ lấy một thành phần dựa trên lớp đã viết trước đó và chuyển nó thành một thành phần chức năng bằng cách sử dụng useState Hook.
useState Tổng quan
Nói một cách đơn giản, useState khai báo một biến trạng thái để bảo toàn giá trị giữa các lần gọi hàm. Các biến được giữ nguyên bởi React. useState chỉ nhận một đối số khởi tạo giá trị của trạng thái mà bạn đang cài đặt . Bằng cách thực hiện useState ta cần không còn this.whatever , ta có thể truy cập vào biến trực tiếp.
Bắt đầu
Để giúp đẩy nhanh tiến độ, ta đã chuẩn bị một số mã khởi động. Trong đoạn mã khởi động, ta đã cài đặt version mới nhất của react và react-dom cũng như reactstrap để giúp ta có một số định dạng dễ dàng.
Để bắt đầu:
$ git clone https://github.com/alligatorio/convert-class-to-hook $ npm i $ npm start 
Thành phần dựa trên lớp
Đầu tiên ta hãy xem thành phần ClassBasedForm.js hiện tại nằm trong folder thành phần. Nếu bạn làm việc với React thường xuyên, tất cả điều này sẽ trông khá chuẩn. Bây giờ hãy chuyển đổi nó thành một thành phần chức năng bằng useState Hook.
Chuyển đổi thành một chức năng
Đầu tiên, tạo một thành phần Form bổ sung trong folder components . Đặt tiêu đề cho nó là FunctionBasedForm.js . Ta sẽ sử dụng thành phần này để xây dựng một biểu mẫu giống hệt nhau bằng cách sử dụng useState Hook. Đặt hai thành phần cạnh nhau sẽ cho phép bạn chuyển đổi và dễ dàng xác định sự khác biệt.
Đầu tiên ta sẽ nhập React và tạo một biến hàm đơn giản có tên là FunctionBasedForm trả về một số văn bản. Hãy chắc chắn để xuất chức năng này.
import React from 'react'; const FunctionBasedForm = () => { return ( <h1>Function Based Form</h1> ) }; export default FunctionBasedForm; Lật lại file App.js của bạn và nhập thành phần mới của bạn. Hiện tại, chỉ cần comment về lần nhập ClassBasedForm trước đó. Thay thế thành phần trước đó của bạn bằng thành phần <FunctionBasedForm /> trong câu lệnh trả về.
import React, { Component } from 'react'; import { Container } from 'reactstrap'; // import ClassBasedForm from './components/ClassBasedForm'; import FunctionBasedForm from './components/FunctionBasedForm'; import Logo from './assets/alligator-logo2.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <img src={ Logo } alt="alligator.io logo" width="200" /> <Container> <FunctionBasedForm /> </Container> </div> ); } } export default App; Hãy xem localhost: 3000 trong trình duyệt để chắc chắn rằng ta không thấy bất kỳ lỗi nào.
Khai báo trạng thái
Gần đây, React đã thực hiện một số bản cập nhật khá mạnh mẽ, đây là tiến trình của việc cài đặt trạng thái, đề phòng trường hợp bạn đang trốn dưới một tảng đá… hoặc ra ngoài leo núi! 🧗
Trong thành phần ClassBasedForm.js ban đầu, ta khởi tạo trạng thái của bạn bằng cách sử dụng một hàm tạo. Ta không còn cần phải khởi tạo trạng thái trong một thành phần lớp điển hình nữa, cũng như đối với hook! Hãy xem một ví dụ.
Hầu hết ta đều quen thuộc với trạng thái khởi tạo như sau:
constructor(props) { super(props); this.state = { email: '', password: '', }; } Kể từ React 16, ta không cần một hàm tạo nữa. Trước đây trở thành:
state = { email: '', password: '', }; Bây giờ trong một thành phần chức năng , ta có thể sử dụng hook để kết nối trò chơi của bạn . Ta có thể khởi tạo trạng thái và bộ cài đặt liên quan ở đầu hàm của ta . Điều này có thể loại bỏ một số dòng mã cho ta . Đây là cách ta sẽ khởi tạo các biến trạng thái trong thành phần mới của ta .
const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); Chính xác thì ta đang làm gì ở đây?
Hãy chia nhỏ một trong những dòng trên.
const [ email, setEmail] = useState(''); - const : Tạo một biến cho cả trạng thái của ta và bộ cài đặt biến trạng thái liên quan.
- email : Khởi tạo và khai báo email biến đầu tiên của ta .
- setEmail : Khởi tạo hàm setter được liên kết với email biến. Mặc dù sử dụng có vẻ dư thừa
useStatechỉ được sử dụng cho một giá trị duy nhất. - useState (“) : Khai báo rằng biến email bắt đầu dưới dạng một chuỗi rỗng.
Triển khai hàm biến liên quan
Hãy quay trở lại mã của ta và lấy mã ta đã có từ thành phần dựa trên lớp và loại bỏ tất cả các chức năng, nhấp vào trình xử lý và các biến trạng thái. Tiếp theo, hãy thêm { useState } vào phần nhập React của bạn cũng như các dòng ở trên nơi ta khởi tạo các biến và bộ cài đặt liên quan. Mã của bạn sẽ trông giống như sau:
import React, { useState } from 'react'; import { Form, FormGroup, Input, Label, Col, Button, } from 'reactstrap'; const FunctionBasedForm = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); return ( <Form> <h1>Function Based Form</h1> <FormGroup row> <Label for="exampleEmail" sm={ 2 }>Email</Label> <Col sm={ 8 }> <Input type="email" name="email" id="exampleEmail" placeholder="email" /> </Col> </FormGroup> <FormGroup row> <Label for="examplePassword" sm={ 2 }>Password</Label> <Col sm={ 8 }> <Input type="password" name="password" id="examplePassword" placeholder="password" /> </Col> </FormGroup> <FormGroup check row> <Col sm={ { size: 10, offset: 8 } }> <Button>Submit</Button> </Col> </FormGroup> </Form> ) }; export default FunctionBasedForm; Nếu bạn quay lại trình duyệt của bạn , ứng dụng sẽ trông giống như khi bạn chạy npm start .
Thêm chức năng trở lại
Bây giờ ta hãy sửa đổi các chức năng của ta để sử dụng Hooks.
Hãy xem cách ta cập nhật trạng thái trong thành phần dựa trên lớp của mình :
onChange={ (event) => this.setState({ email: event.target.value }) Với hook, ta không cần this hoặc this.setState() vì ta đã khởi tạo các biến trạng thái của bạn và đính kèm một setter. Vì ta chỉ có hai biến mà ta đang sử dụng, ta sẽ sử dụng một hàm nội tuyến để gọi setter mà ta đã khởi tạo trong useState cho mỗi đầu vào. Ta cũng sẽ thêm lại giá trị của bạn mà không có tiền tố này .
<Input type="email" name="email" id="exampleEmail" placeholder="email" value={ email } onChange={ event => setEmail(event.target.value) } /> <Input type="password" name="password" id="examplePassword" placeholder="password" value={ password } onChange={ event => setPassword(event.target.value) } /> Nếu ta có một số biến và muốn chia sẻ chúng giữa các thành phần, ta sẽ sử dụng một hook bổ sung mà ta sẽ đề cập trong bài viết sau.
Bây giờ ta hãy viết lại hàm handleSubmit của ta .
Đây là cách hàm được viết trước đây:
handleSubmit(e) { e.preventDefault(); console.log(this.state); } Tiền boa! Trong React 16, nếu bạn viết hàm này dưới dạng hàm mũi tên, bạn sẽ không cần phải ràng buộc nó trong hàm tạo.
Bây giờ ta cần tạo một const cho hàm. Ta lại ngăn chặn chức năng mặc định, đặt các biến và console.log chúng.
const handleSubmit = e => { e.preventDefault(); console.log(email); console.log(password); } Bây giờ ta có thể thêm chức năng handleSubmit mình vào onSubmit trong biểu mẫu của ta .
Đây là cách hook chức năng mới của bạn sẽ trông như thế nào:
import React, { useState } from 'react' import { Form, FormGroup, Input, Label, Col, Button, } from 'reactstrap'; const FunctionBasedForm = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = event => { event.preventDefault(); console.log(email); console.log(password); } return ( <Form onSubmit={ handleSubmit }> <h1>Function Based Form</h1> <FormGroup row> <Label for="exampleEmail" sm={ 2 }>Email</Label> <Col sm={ 8 }> <Input type="email" name="email" id="exampleEmail" placeholder="email" value={ email } onChange={ event => setEmail(event.target.value) } /> </Col> </FormGroup> <FormGroup row> <Label for="examplePassword" sm={ 2 }>Password</Label> <Col sm={ 8 }> <Input type="password" name="password" id="examplePassword" placeholder="password" value={ password } onChange={ event => setPassword(event.target.value) } /> </Col> </FormGroup> <FormGroup check row> <Col sm={ { size: 10, offset: 8 } }> <Button>Submit</Button> </Col> </FormGroup> </Form> ) }; export default FunctionBasedForm; Lật lại trình duyệt của bạn và thêm một số giá trị vào biểu mẫu của bạn và nhấn gửi. Nếu app console.log() của bạn quay lại với các biến bạn đã nhập, thì bạn là vàng! Làm tốt!
Các tin liên quan
