Báo-cáo-ttsx- Tìm Hiểu Về Framework React Native

TRƯỜNG ĐẠI HỌC MỎ ĐỊA CHẤT
KHOA CÔNG NGHỆ THÔNG TIN
-----***-----

Báo Cáo Thực Tập Sản Xuất
Đề tài

Tìm Hiểu Về Framework React Native
Sinh Viên Thực Hiện

Giảng Viên Hướng Dẫn

NGUYỄN TIẾN HOÀNG

TS. LÊ HỒNG ANH

LỚP KHMT K61B

Hà Nội – 2021


LỜI CẢM ƠN

Em xin chân thành cảm ơn Khoa Công Nghệ Thông Tin, Bộ môn Khoa Học
Máy Tính , trường Đại học Mỏ – Địa Chất đã tạo điều kiện tốt cho em hoàn thành
bài báo cáo này.
Em xin gửi lời cảm ơn sâu sắc tới tất cả các thầy cô, những người đã giảng
dạy, trang bị cho em những kiến thức quý báu trong suốt những năm học vừa qua.
Xin chân thành cảm ơn tới gia đình, anh chị, bạn bè đã giúp đỡ, ủng hộ, động
viên em trong suốt thời gian học tập và nghiên cứu.
Mặc dù em đã cố gắng hoàn thiện thật tốt đồ án nhưng do kiến thức có hạn

do đó khơng thể tránh khỏi những sai sót, em rất mong nhận được sự cảm thơng, ý
kiến đóng góp của các q Thầy Cơ và các bạn!
Em xin chân thành cảm ơn !

Hà Nội , Ngày 25 Tháng 01 Năm 2021
Sinh viên thực hiện
Hoàng
Nguyễn Tiến Hoàng

2


Mục lục
Chương I: Tởng Quan Cros-Platfrom

3

1. Cross-Platfrom là gì..............................................................................3
2. Ưu nhược điểm của Cross-Platfrom

3

Chương II : Giới Thiệu Framework React Native 4
2.1 Tổng quan về React Native....................................................................4

2.2 Ưu nhược điểm của React Native
2.3 Thiết lập môi trường

7

2.3.1 Thiết lập môi ảo

7

6

2.3.2 Thiết lập môi thực 12
Chương III :Trợ Năng - Guide 13

AccesiibilityTraits(IOS) 13
AccessibilityViewModal 13
onAccessibilityTap14
onMagicTap 14
Chương IV: Một số Component trong React Native

15

Chương V :Tích hợp React Native vào ứng dụng Native 16

5.1 Tich hợp React Native vào IOS

16

5.2 Tích hợp React Native vào Android
Chương VI :Hiệu suất trong React Native 20
Chương VII :JavaScript RunTime

25

Chương VIII:Native Modules 25

8.1 Android Native Modules
Chương IX : Định hướng phát triển 29
Chương X :Demo 29

3

25

19


I. Tởng quan Cross-Platfrom
1. Cross-Platfrom là gì ?
Trong cơng nghệ điện toán , đa nền tảng (Cross-Platfrom) là một thuật ngữ chỉ
các phần mềm máy tính hay các phương thức điện toán và các khái niệm được thực
thi đầy đủ và vận hanh cùng nhau trên nhiều nền tảng máy tính hay ứng dụng …
Phần mềm đa nền tảng có thể được chia thành hai loại:
+ Loại 1: yêu cầu phải thiết kế hoặc biên dịch từng phiên bản cho mỡi nền tảng
nó hỡ trợ
+ Loại 2: có thể chạy trực tiếp trên bất cứ nền tảng nào mà không cần sự chuẩn
bị thêm đặc biệt nào chẳng hạn như viết một ngôn ngữ thông dịch hay được biên
dich sang mã bytecode có khả năng di động bằng một trình thơng dịch hay các gói
run-time thường dùng hoặc là thành phần tiêu chuẩn trên mọi nền tảng.

2. Ưu điểm , nhược điểm của cross-platfrom
2.1 Ưu điểm
+ Mạch lạc về kiến trúc: Để xây dựng một ứng dụng cross-platform thì thiết kế
chặt chẽ , tn thủ theo đúng mơ hình ( MVC, MVVM…) để tách phần phụ thuộc vào
Ó , phần phụ thuộc vào phía 3rd Library . Việc này sẽ là áp lục cho nhà thiết kế , nhưng

bù lại sẽ làm cho ứng dụng có hiệu năng cao , dễ dàng bảo trì trong tương lai.
+ Viết code ít: Bạn chỉ cần code duy nhất một bộ mã và có thể build và chạy trên
các nền tảng khác nhau , Nghĩa là công sức bỏ ra để viết mã máy sẽ được tối ưu.
+ Dễ dàng bảo trì và mở rộng: Do mạch lạc về kiến trúc việc điều tra sửa lỗi cũng
sẽ dễ dàng hơn, giúp cho việc bảo trì và mở rộng cũng sẽ dễ dàng hơn nhiều
+ Tính tái sử dụng cao : Vì cross-platform nên các đoạn mã sẽ dễ dàng được tái sử
dụng và share cho các ứng dụng , phần mềm khác cho dù nó là cross-platform khơng.
+ Chi phí gia cơng và bảo trì thấp: Vì cross-platform tính chất build một lần chạy
được nhiều nơi nên sẽ được giảm được chi phí thuê người code , tăng tốc độ hoàn
thành của dự án.

2.2 Nhược điểm:
+ Hiệu năng thấp
+ Ứng dụng có chức năng nặng về phần cứng sẽ khá khó xử lý
II. Giới Thiệu Framework React Native.
Điều kiện tiên quyết là phải có kiến thức của CSS, JS ( ES6 trở lên),
ReactJS.

4


Sự phát triển về CNTT ngày càng khủng khiếp. Những công nghệ mới đã và
đang làm thay đổi thế giới một cách nhanh chóng. Từ lúc mới ra đời cho đến nay
smartphone đã có những bước tiến mạnh mẽ vì vậy mà những cơng nghệ kèm theo
cũng địi hỏi những nhà phát triển phần mềm viết ra nhiều phần mềm hơn để có thể
sử dụng được trên smartphone chứ khơng còn đơn thuần là những ứng dụng nhắn
tin gọi điện thơng thường.
Kèm theo đó là số lượng người dùng di động (smartphone) tăng lên chóng mặt.
Cụ thể theo những báo cáo mới đây mà các nhà khoa học đã thống kê thì thời gian
dành cho smartphone trung bình qua khảo sát hàng tỉ người thì rơi vào khoảng 3

tiếng một ngày.

Đồng thời giá smartphone đang ngày càng rẻ qua từng năm, vì các dịng
smartphone giá rẻ đến từ các quốc gia phát triển và đông dân như Ấn Độ, Trung Quốc.
Cùng với đó cơng nghệ sản x́t càng dần hồn thiện hơn kéo giá smartphone xuống tới
các tầng lớp phổ thơng của xã hội. Từ đó smartphone trở thành một thiết bị có thể được sở
hữu dễ dàng.

5


Nhiều công ty sản xuất phần mềm trên di động hoặc những cơng ty lớn nhìn thấy
đây là mảnh đất màu mỡ và tiềm năng phát triển của nó rất lớn. Đồng thời dựa theo số
liệu thống kê như trên thì bắt đầu người dùng đã chịu chi tiền cho smartphone nhiều hơn,
số lượng người dùng chịu bỏ tiền ra mua ứng dụng để sử dụng trên smartphone cũng tăng
lên theo từng năm. Do đó kéo theo nhu cầu về cơng việc liên quan đến mảng smartphone
nói chung và lập trình mobile nói riêng tăng lên chóng mặt. Đưa ra những tiềm năng và
thử thách dành cho những ai muốn phát triển theo hướng lập trình ứng dụng di động. Nhu
cầu dạy và học lập trình ứng dụng di động đang dần trở thành xu hướng của xã hội hiện
nay.

6


2.1 Tổng quan về React Native.
React Native là một framework mã nguồn mở do Facebook phát triển nhằm mục
địch giải quyết bài toán hiệu năng của Hybrid và bài toán chi phí khi mà phải viết nhiều
loại ngôn ngữ native cho từng nền tảng di dộng . Chúng ta sẽ build được ứng dụng Native
, và chúng ta có thể build ứng dụng đó một cách đa nền tảng ( Cross-platform) chứ không
phải là một “ mobile web app” , không phải là “ HTML5 app”, và cũng không phải là một

hybrid app, hay cũng không chỉ build trên IOS hay Android mà chúng ta build và chạy
được cả hai hệ sinh thái luôn.
Một điểm hay ho nữa là giảm chi phí recompile của Native bằng cách sử dụng
Hot-loading tức là bạn không cần phải build lại ứng dụng từ đầu nên việc chỉnh sửa diễn
ra nhất nhanh chóng . Giups cho lập trình viên có thể thấy được những chỉnh sửa của họ
một cách nhanh chóng trực quan , khơng cịn phải bỏ quá nhiều thời gian trong việc build
và run ứng dụng nữa.

2.2 Ưu và nhược điểm của React Native
2.2.1 Ưu điểm:
• Hiệu quả về mặt thời gian khi mà bạn muốn phát triển một
ứng dụng nhanh chóng.
• Hiệu năng tương đối ổn định.
7


•
•
•
•
•

Cộng đồng phát triển mạnh.
Tiết kiệm tiền.
Team phát triển nhỏ.
Ứng dụng tin cậy và ổn định.
Xây dựng cho nhiều hệ điều hành khác nhau với ít native
code nhất.
• Trải nghiệm người dùng tốt hơn là hybrid app.

2.2.2 Nhược điểm:
• Vẫn địi hỏi native code..
• Hiệu năng sẽ thấp hơn với app thuần native code.
• Bảo mật khơng cao do dựa trên JS.
• Quản lý bộ nhớ.
• Khả năng tùy biến cũng không thực sự tốt đối với một vài
module.
2.3 Thiết lập mơi trường
Có 2 cách để thiết lập mơi trường phát triển React Native:
• Thiết lập mơi trường ảo thơng qua virtual devices
• Thiết lập mơi trường thực thơng qua Expo

2.3.1 Thiết lập môi trường ảo thông qua virtual devices.
2.3.1.1

Cài đặt Nodejs, JDK, Android Studio.

a) Nodejs.

b) JDK..

8


c) Android Studio.

2.3.1.2 Cài SDK trong Android Studio
Để xây dựng một ứng dụng React Native với code native cần cài đặt một số gói trong
Android Studio.
File -> Settings -> Appearance & Behavior -> System -> Android SDK -> Select Show

package Details -> Android 10.0(Q) -> Select Android SDK Platform 29 , Intel x86
Atom System Image, Intel x86 Atom_64 System Image -> SDK Tools -> Select Show
package Details -> Android SDK Build-Tools -> Select 28.0.3 -> OK
• File -> Settings

9


• Appearance & Behavior -> System -> Android SDK

• Select Show package Details

• Selects: Android 10.0(Q) -> Select Android SDK
Platform 29 , Intel x86 Atom System Image, Intel x86
Atom_64 System Image

10


• SDK Tools

• Select Show Package Details

• Android SDK Build-Tools -> Select 28.0.3 -> OK

11


Tạo biến môi trường Android_Home

Tạo biến Path

12


Cài đặt app bằng npx
Mở cửa sổ cmd gõ lệnh : npx react-native init <ten_project>

Cd AppSearch->npx react-native run android/ios
2.3.2 Thiết lập môi trường thực thông qua ứng dụng Expo
2.3.2.1 Cài đặt global Expo trên cửa sổ cmd
Mở cửa sổ cmd gõ lệnh: npm install -g expo-cli

13


2.3.2.2 Tải Expo client về điện thoại.
III. Trợ Năng ( Guide)
Cả iOS và Android đều cung cấp các API để làm cho các ứng dụng có thể
tiếp cận được với người khuyết tật. Ngoài ra, cả hai nền tảng cung cấp công nghệ trợ giúp
kèm theo, như người đọc màn hình VoiceOver (iOS) và TalkBack (Android) dành cho
người khiếm thị. Tương tự, trong bản phản hồi, chúng tôi đã bao gồm các API được thiết
kế để cung cấp cho các nhà phát triển hỗ trợ làm cho các ứng dụng dễ truy cập hơn. Lưu ý,
iOS và Android khác nhau theo cách tiếp cận của họ, và do đó triển khai React Native có
thể thay đởi theo nền tảng.

• accessibilityTraits (iOS)
Các tính năng trợ năng cho người dùng VoiceOver biết họ đã
chọn loại phần tử nào. Đây có phải là một phần của nhãn? Một nut
bâm? Một tiêu đề? Những câu hỏi này được trả lời bởi

•

none được sử dụng khi phần tử khơng có đặc điểm.

•

button được sử dụng khi phần tử được coi như một nút.

•

link được sử dụng khi phần tử được coi như một liên kết.

•

header được sử dụng khi một phần tử hoạt động như phần đầu của phần nội dung
(ví dụ tiêu đề thanh điều hướng).

•

search được sử dụng khi phần tử trường văn bản cũng phải được coi như là một
trường tìm kiếm.

•

image Được sử dụng khi các yếu tố nên được đối xử như một hình ảnh. Có thể kết
hợp với nút hoặc liên kết, ví dụ.

•

selected Sử dụng khi phần tử được chọn. Ví dụ: một hàng được chọn trong một

bảng hoặc một nút được chọn trong một điều khiển phân đoạn.

•

plays được sử dụng khi phần tử phát âm thanh của riêng mình khi kích hoạt.

•

key được sử dụng khi phần tử hoạt động như một phím.
14


•

text được sử dụng khi các phần tử nên được coi như là văn bản tĩnh mà khơng thể
thay đởi.

•

summary được sử dụng khi một phần tử có thể được sử dụng để cung cấp một bản
tóm tắt nhanh các điều kiện hiện tại trong ứng dụng khi ứng dụng được khởi chạy
lần đầu tiên. Ví dụ: khi Thời tiết mở đầu tiên, yếu tố có điều kiện thời tiết hơm nay
được đánh dấu bằng đặc tính này.

•

disabled được sử dụng khi điều khiển không được kích hoạt và không đáp ứng với
đầu vào của người dùng.

•

frequentUpdates được sử dụng khi phần tử thường xuyên cập nhật nhãn hoặc giá
trị, nhưng thường xuyên gửi thông báo. Cho phép khách hàng khả năng truy cập
tìm kiếm các thay đởi. Một stopwatch sẽ là ví dụ.

•

startsMedia được sử dụng khi kích hoạt một phần tử bắt đầu phiên media (ví dụ
như phát phim, ghi âm) không được gián đoạn bởi đầu ra từ một cơng nghệ trợ
giúp, như VoiceOver.

•

adjustable được sử dụng khi một phần tử có thể được "điều chỉnh" (ví dụ như
thanh trượt).

•

allowsDirectInteraction được sử dụng khi một phần tử cho phép tương tác cảm
ứng trực tiếp cho người dùng VoiceOver (ví dụ như chế độ xem thể hiện một bàn
phím piano).

•

pageTurn thơng báo cho VoiceOver rằng nó sẽ di chuyển tới trang tiếp theo khi nó
đọc xong nội dung của phần tử.
•

OnAccessibillityTap(ios)

Sử dụng thuộc tính này để chỉ định một hàm tùy chỉnh để được
gọi khi người nào đó kích hoạt một phần tử có thể truy cập bằng cách
nhấn đúp vào nó khi nó được chọn.
• OnMagicTap
Gán thuộc tính này cho một chức năng tùy chỉnh sẽ được gọi khi
ai đó thực hiện cử chỉ "magic tap", đó là một double-tap bằng hai
ngón tay. Chức năng magic tap phải thực hiện hành động có liên
quan nhất mà người dùng có thể thực hiện trên một thành phần.
Trong ứng dụng trên iPhone, một tập magic tap sẽ trả lời cuộc gọi
điện thoại hoặc kết thúc cuộc gọi hiện tại. Nếu phần tử đã chọn
15


khơng có chức năng onMagicTap, hệ thống sẽ đi qua phân cấp chế độ
xem cho đến khi nó tìm ra chế độ xem đó.
• AccesssibilityComponentType(Android)
Trong một số trường hợp, chúng tôi cũng muốn cảnh báo người dùng cuối về loại
thành phần đã chọn (nghĩa là nó là một "Button"). Nếu chúng tôi sử dụng các nút mặc
định, điều này sẽ hoạt động tự động. Vì chúng ta đang sử dụng javascript, chúng ta cần
cung cấp thêm một ngữ cảnh cho TalkBack. Để làm như vậy, bạn phải chỉ định thuộc tính
'accessibilityComponentType' cho bất kỳ thành phần UI nào

IV. Một số Components trong React Native
IV.1
Điều khiển Text Input.
TextInput là một thành phần cơ bản cho phép người dùng có thể nhập text. Nó có
một tham số onChangeText dành cho việc cài đặt một function được gọi mỗi khi nội dung
text trong khung nhập thay đổi, và một tham số onSubmitEditing để cài đặt function được
gọi khi text được submit.

16


17


ScrollView là một thành phần giao diện cha, nó có thể chứa được nhiều những
thành phần khác bên trong nó, và nó có khả năng scroll các thành phần ở bên trong nó. Các
thành phần có thể scroll cần phải đồng nhất, và bạn có thể scroll dọc hoặc ngang bằng cách
cài đặt cho thuộc tính horizontal.
ListView là thành phần hiển thị các thành phần con có thể vuốt dọc được, như các
thành phần bên trong có cấu trúc tương tự nhau.
ListView yêu cầu hai thuộc tính dataSource và renderRow. Thuộc
tính dataSource là thông tin nguồn để hiển thị lên ListView. renderRow sẽ trả về định dạng
hiển thị của một row trong ListView.

V. Tích hợp React Native vào ứng dụng Native
V.1 IOS(Swift)
React Native là sự lựa chọn tốt khi bắt đầu một dụng mobile mới sử dụng
việc kết hợp . Dù sao thì nó cũng sẽ hoạt động tốt khi thêm một màn hình hoặc
thêm một lường xử lý mới vào các ứng dụng native . Với một vài bước cơ bản
dưới đây, có thể thêm được các tính năng cơ bản trên nền tảng React Native ,
các màng hình , các view và nhiều hơn thế nữa.
V.1.1 Những khái niệm chính .
• Cài đặt React Native dependencies và cấu trúc thư mục
• Hiểu được những thành phần trong React Native được sử
dụng trong ứng dụng
18

• Thêm các thành phần như là các dependencies sử dụng
CocoaPods
• Phát triển các thành phần React Native với JavaScript
• Thêm một RCTRootView vào ứng dụng dùng IOS , View này
sẽ phục vụ cho việc lưu trữ các thành phần React Native
• Start React Native server và chạy ứng dụng native
• Xác nhận React Native trong ứng dụng của bạn đã hoạt động
như kỳ vọng
V.1.2 Điều kiện cần
Đã cài đặt React Native Cli Môi trường phát triển để build ra
ứng dụng native của IOS
V.1.3 Thiết lập cấu trúc thư mục:

Để đảm bảo trải nghiệm mượt mà, hãy tạo một thư
mục mới cho dự án React Native của bạn , sau đó
sao chép dự án IOS hiện có của bạn vào thư mục
/IOS của dự án React Native
V.1.4 Cài đặt JavaScript dependencies

V.1.5 Cài đặt React và Reat Native
V.1.6 Cài đặt CocoaPods
V.1.7 Cấu hình CocoPods dependencies
Tích hợp React Native vào trong ứng dụng của đã cài trước đó, muốn định
nghĩa thành phần nào của React Native mà bạn muốn tích hợp . Chúng ta sẽ sử
dụng CocoaPods để chỉ rõ đâu là subspecs mà ứng dụng của bạn sẽ phụ thuộc.
Danh sách các subspecs được hỗ trợ đã sẵn sàng trong /node_modules/reactnative/Reacat.podpec. Chúng đã được tạo ra và đặt tên theo chức năng.
Có thể chỉ rõ subspecs mà bạn sẽ cần trong một Podfile file. Cách dễ nhất là
tạo ra một Podfile là chạy CocoPods init trong thư mục con IOS/ của dự án
Gõ lệnh trên terminal: pod init
19

Podfile sẽ bao gồm một bản mẫu cài đặt , nó sex nhóm các mục tiêu tích
hợp .Cuối cùng, một file Podfile sẽ trông tương tự như sau:

V.1.8 Tích hợp code
V.1.8.1 Tạo file app.js
Đầu tiên , tạo một empty file index.js ở root của React Native project index.js là
điểm bắt đầu của ứng dụng, và nó là một yêu cầu bắt buộc . Nó có thể là một file nhỏ và
require đến các phần khác của các thành phần trong React Native hoặc ứng dụng hoặc nó
có thể bao gồm tất cả các code mà bạn cần cho nó . Trong trường hợp của chúng ta ,
chúng ta sẽ đưa tất cả mọi thứ vào trong app.js

V.1.8.2

Thêm code của React Native

20


V.2 Android (Java)
V.2.1 Các khái niệm chính
• Thiết lập cấu trúc thư muc
• Phát triển các thành phần React Native của dự án
trong Js
• Thêm ReactRootView vào ứng dụng Android của dự
án
• Khởi động máy chủ React Native và chạy ứng dụng
native của dự án
V.2.2 Điều kiện tiên quyết:

Phải sử dụng React Native Cli
V.2.3 Thiết lập cấu trúc thư mục
Để đảm bảo trải nghiệm mượt mà, hãy tạo một thư mục mới cho dự
án React Native tích hợp của bạn, sau đó sao chép dự án Android hiện có
của bạn vào một /androidthư mục con.

V.2.4 Cài đặt JavaScript dêpndencies
21


V.2.5 Thêm React Native vào ứng dụng
• Cấu hình Maven

V.2.6 Code integration
V.2.7 React Native Components
VI. Hiệu suất trong React Native
Một lý do thuyết phục để sử dụng React Native thay vì các cơng cụ dựa trên
WebView là để hiển thị được 60 khung hình mỡi giây và một giao diện tương tự native cho
ứng dụng của bạn. Những nơi có thể, chúng tôi muốn React Native làm đúng như nền tảng
cơ bản và giúp bạn tập trung vào ứng dụng của bạn thay vì tối ưu hóa hiệu śt, nhưng có
những lĩnh vực mà chúng tơi chưa thực sự hồn thiện và những nơi khác mà React Native
(tương tự như viết native code) có thể khơng thể tìm được cách tốt nhất để tối ưu hóa cho
bạn, vì thế đơi khi sự can thiệp bằng tay sẽ là cần thiết. Chúng tôi cố gắng hết sức để cung
cấp hiệu suất UI mượt mà tương tự mặc định, nhưng đôi khi điều đó là khơng thể.
movies trước đây được tạo ra được gọi là "moving pictures" vì một lý do: chuyển
động thực tế trong video là ảo được tạo ra bằng cách thay đởi nhanh hình ảnh tĩnh với tốc
độ nhất quán. Chúng tơi đề cập đến mỡi hình ảnh dưới dạng frames. Số frames được hiển
thị mỗi giây ảnh hưởng trực tiếp đến mức độ trơn tru và tương tự như video (hoặc giao
diện người dùng) có vẻ như vậy. Thiết bị iOS hiển thị 60 frames mỗi giây, trong khi và hệ
thống UI cần khoảng 16.67ms để thực hiện tất cả cơng việc cần thiết để tạo ra hình ảnh

tĩnh (frame) mà người dùng sẽ thấy trên màn hình trong khoảng thời gian đó. Nếu bạn
khơng thể làm các cơng việc cần thiết để tạo ra khung đó trong 16.67ms được phân bở thì
bạn sẽ "mất một frame" và trong giao diện người dùng nó sẽ khơng x́t hiện.

22


JS frame rate (JavaScript thread)
Đối với hầu hết các ứng dụng React Native, business logic của bạn sẽ chạy trên
JavaScript. Đây là nơi ứng dụng React của bạn đang hoạt động, các cuộc gọi API được
thực hiện, xử lý các sự kiện chạm trên màn hình, v.v ... Cập nhật native-backed views được
chuyển thể và gửi tới các điểu khiển native sau đó kết thúc với các vịng lặp của sự kiện
đó, trước mỡi thời gian hiển thị của frame (nếu như tất cả đều hiển thị tốt). Nếu JavaScript
không phản hồi cho một frames, nó sẽ được coi là một frame bỏ. Ví dụ, nếu bạn
gọi this.setState trên thành phần gốc của một ứng dụng phức tạp và kết quả trả lại là render
lại các thành phần cũ, thì có thể hiểu rằng điều này có thể mất 200ms và kết quả là 12
frames bị bỏ. Bất kỳ hoạt ảnh nào được kiểm soát bởi JavaScript dường như đóng băng
trong thời gian đó. Nếu có gì dài hơn 100ms, người dùng sẽ cảm thấy nó.
Điều này thường xảy ra trong quá trình chuyển đởi của Navigator: khi bạn đẩy một route
mới, luồn JavaScript cần hiển thị tất cả các thành phần cần thiết cho cảnh để gửi qua các
lệnh thích hợp tới native để tạo lại view. Thông thường để cơng việc được hồn tất thì nó
sẽ lấy mất một vài frames và căn nguyên của jank là bởi vì việc chuyển đởi đó được điểu
khiển bởi luồn của JavaScript. Đôi khi các thành phần sẽ làm thêm công việc
trên componentDidMount, điều này có thể dẫn đến sự thay đởi thứ hai trong quá trình
chuyển đởi.
Một ví dụ khác đó là phản hồi của hành động chạm: nếu bạn đang làm việc trên nhiều
khung trong luồn của JavaScript, bạn có thể nhận thấy sự chậm trễ trong việc phản hồi
với TouchableOpacity. Điều này là do luồng JavaScript đang bận và không thể xử lý sự
kiện cảm ứng được gửi qua từ native. Kết quả là, TouchableOpacity không thể phản ứng
với các sự kiện chạm và thể hiện để điều chỉnh độ mờ của nó.

UI frame rate (main thread)
Nhiều người đã nhận thấy rằng hiệu suất của NavigatorIOS là tốt hơn so với
Navigator. Lý do cho điều này là các hình ảnh động cho quá trình chuyển đởi được thực
hiện hồn tồn trên main thread, và do đó chúng khơng bị gián đoạn bởi các khung bị mất
trên luồng JavaScript.
Tương tự như vậy, bạn có thoải mái scroll thơng qua một ScrollView khi luồng JavaScript
bị khóa vì ScrollView đang thực thi trên main thread. Các sự kiện scroll được gửi đến
luồng JS, nhưng không nhận được sự phản hồi để sự kiện scroll được thực thi.

23


Common sources of performance problems
Chạy ứng dụng trong chế độ development (dev=true)
Hiệu năng của luồng JavaScript bị ảnh hưởng rất nhiều khi chạy trong chế độ dev.
Điều này là không thể tránh khỏi: có rất nhiều cơng việc phải thực hiện trong thời gian
chạy để cung cấp cho bạn các cảnh báo và thông báo lỗi tốt, chẳng hạn như xác nhận hợp
lệ propTypes và các giá trị khác. Cần luôn luôn chắc chắn kiểm tra hiệu suất trong build
relesase.

Sử dụng lệnh console.log
When running a bundled app, these statements can cause a big bottleneck in the
JavaScript thread. This includes calls from debugging libraries such as redux-logger, so
make sure to remove them before bundling. Bạn cũng có thể sử dụng babel plugin loại bỏ
tất cả việc gọi console.* . Trước tiên, bạn cần cài đặt nó với npm i babel-plugin-transformremove-console --save, và sau đó chỉnh sửa tập tin .babelrc dưới thư mục dự án của bạn
như sau:

ListView khởi tạo và hiển thị quá chậm hoặc hiệu suất scroll không tốt
với một list có sớ lượng lớn

Sử dụng thành phần mới như FlatList hoặc SectionList để thay thế. Bên cạnh việc
đơn giản hoá API, các thành phần danh sách mới cũng có các cải tiến hiệu suất đáng kể,
cái chính là nó sẽ chiếm dụng một vùng bộ nhớ cố định không đởi dù số lượng của các row
có là bao nhiêu đi chăng nữa.
Nếu FlatList hiển thị chậm, hãy chắc chắn rằng bạn đã implement getItemLayout để tối ưu
hóa tốc độ hiển thị bằng cách bỏ qua các phép đo kích thước của các item được hiển thị.

24


JS FPS nhúng vào khi vẽ lại một view mà view đó là khó thay đởi
Nếu bạn đang sử dụng ListView, bạn phải cung cấp một hàm rowHasChanged có
thể làm giảm rất nhiều cơng việc bằng cách nhanh chóng xác định liệu một hàng cần phải
được render lại hay không. Nếu bạn đang sử dụng cấu trúc dữ liệu không thay đổi, điều
này sẽ đơn giản như kiểm tra tính tương đồng.
Tương tự, bạn có thể implement shouldComponentUpdate và chỉ ra các điều kiện chính
xác các thành phần cẩn phải render lại. Nếu bạn viết các thành phần đơn giản (nơi mà giá
trị trả lại của hàm render hoàn toàn phụ thuộc vào props và state), bạn có thể tận
dụng PureRenderMixin để làm điều này cho bạn. Một lần nữa, các cấu trúc dữ liệu không
thay đổi sẽ hữu ích để giữ cho tốc độ render được nhanh chóng - nếu bạn phải so sánh sâu
về một danh sách lớn các đối tượng, có thể việc tái hiển thị tồn bộ thành phần của bạn sẽ
nhanh hơn và chắc chắn sẽ yêu cầu ít mã hơn .

Loại bỏ FPS của luồng JS vì nó phải làm quá nhiều việc trong cùng thời gian
chạy của luồng JavaScript
"Slow Navigator transitions" là sự biểu hiện phở biến nhất của điều này, nhưng có những
thứ khác khác mà điều này cũng có thể xảy ra. Sử dụng InteractionManager có thể là một
cách tiếp cận tốt nhưng nếu yêu cầu trải nghiệm của người dùng quá cao để trì hỗn cơng
việc trong một quá trình chạy animation, thì bạn nên muốn xem xét đến việc sử dụng
LayoutAnimation.

Animated API hiện tại đang tính mỗi frames theo yêu cầu trên luồng JavaScript trừ khi
bạn thiết lập useNativeDriver: true, trong khi LayoutAnimation cố gắng thực hiện Core
Animation và không bị ảnh hưởng bởi luồng JS và main thread.
Một trong những trường hợp tôi đã sử dụng điều này là để chạy một animate trong một
phương thức (sliding down từ trên xuống, và fade trong một lớp phủ mờ) trong khi khởi
tạo đồng thời có thể nhận được phản hồi của một số request mạng, hiển thị nội dung của
phương thức và cập nhật view nơi mà phương thức được thực hiện. Xem Animations để
biết thêm thông tin về cách sử dụng LayoutAnimation.

Di chuyển một view trên màn hình (scrolling, translating, rotating) bỏ
luồng UI FPS
Điều này đặc biệt đúng khi bạn có văn bản với nền trong suốt nằm ở phía trên cùng
của hình ảnh hoặc bất kỳ trường hợp nào khác nơi chuyển đổi giá trị alpha sẽ được yêu cầu
vẽ lại view trên mỗi frame. Bạn sẽ tìm cách kích
hoạt shouldRasterizeIOS hoặc renderToHardwareTextureAndroid có thể giúp bạn làm
được việc này.

25