Bài 9 – React Native – state và useEffect

Posted on by

Hi các em, trong bài viết này thầy giới thiệu tới các em phiên bản Expo mới nhất và những thay đổi chú ý trong bản cập nhật lần này.

Link gốc : https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c

Nội dung trong phiên bản mới nhất thời điểm hiện tại expo version 33
  • props

Cách sử dụng props trong bản mới này có 1 chút thay đổi so với phiên bản cũ

Cách truyền props vào component giữ nguyên
thay vì sử dụng class kế thừa Component, trên bản mới chúng ta sử dụng function với tham số là props và gọi props bằng câu lệnh props.message hoặc props.title để hiển thị
  • state and useState

Trong bản cập nhật mới nhất này, phần thay đổi hoàn toàn đó chính là cách sử dụng state.

Để khai báo 1 state, thay vì cách cũ chúng ta cần làm các bước sau :

thêm thư viện

Thêm thư viện import React, {useState, useEffect} from ‘react’

Khai báo state tại dòng số 7 :

const [message, setMessage] = useState(‘Hello’);

const là từ khóa
message là tên của state
setMessage là phương thức thay đổi giá trị của state
useState là từ khóa
‘Hello’ là giá trị ban đầu của state message

  • Khi chưa nhấn nút Update State
  • Sau khi nhấn nút Update State
  • useEffect

useEffect là phương thức React gọi vào sau mỗi lần chạy render. Phương thức này tương tự componentDidMount, componentDidUpdate, và componentWillUnmount trong phiên bản cũ

Khai báo thêm useEffect với hàm alert, mỗi lần chương trình chạy xong phần return sẽ chạy tới hàm useEffect
Kết quả đạt được sau khi thêm useEffect

Danh sách code mẫu sau khi nâng cấp phiên bản mới nhất

https://github.com/huuhuybn/ExpoNew

Cách sử dụng code mẫu :
Truy cập link, tải code mẫu
Truy cập thư mục, mở cmd, cài đặt Navigation, Geolocation, npm install để bổ sung thư viện mn nhé 🙂