Không nên sử dụng Expo
Chúng ta không nên dùng Expo khi viết các chương trình bằng ngôn ngữ React Native. Vì một số lý do sau đây:
- Toàn bộ quá trình build không được hoàn thành ở local, mà ở cloud Expo, điều này khiến cho các ứng dụng khó có thể kiểm soát và khắc phục mỗi khi có lỗi tiềm tàng trong dự án.
- Khi đang thêm 1 layer phức tạp khác vào trong project, nó sẽ làm cho ứng dụng chậm dần và tăng kích thước của app.
- Điều quan trọng nhất là với 1 số modules iOS/Android khi bạn cần sử dụng có thể sẽ không được hỗ trợ và sẽ chỉ dùng được những module có sẵn được cung cấp bởi Expo SDK mà thôi.
Remove tất cả các log trước khi build bản release
Một vài câu lệnh console.log trong app có thể khiến ứng dụng chậm đi trông thấy, đặc biệt nếu sử dụng thư viện logging như là redux-logger. Vậy nên hãy chắc chắn rằng bạn đã disable các logs trước khi build bản release nhé.
setState() không đồng bộ
Đây là 1 trong những lỗi thường gặp nhất với những người bắt đầu tìm hiểu React Native. Việc thay đổi state của 1 component có thể dẫn đến việc re-render, nếu bạn viết 1 vài thứ như setState({username: 'somevalue'}), sau đó gọi đến this.state.username trong dòng code tiếp theo. Bạn sẽ không lấy được đúng giá trị, do setState() là không đồng bộ.
Sử dụng await setState({username}) để tránh gặp vấn đề này.
Quản lý nguồn ảnh
Đặt tên ảnh rõ ràng (đặt tên là login_button_disabled.png thay vì login_button_gray.png), để nó rõ ràng hơn. Sử dụng @1x, @2x, @3x dimensions để xử lý các độ phân giải màn hình khác nhau cho cả hai hệ điều hành iOS lẫn Android.
Nếu dimensions của hình ảnh quá nhỏ, bạn có thể blurred ảnh, nhưng hãy xem xét kỹ trước khi thực hiện vì điều đó sẽ khiến cho ứng dụng của bạn nhìn thiếu chuyên nghiệp đấy. Nếu bạn muốn giảm kích thước của ảnh mà nhưng vẫn giữ được chất lượng tốt, hãy sử dụng thử Image Optim.
Sử dụng thư viện ngoài
Bạn đang tìm một thư viện hay ho để sử dụng, thay vì tốn thời gian tạo lại một cái tương tự. React Native là sự lựa chọn đáng được nhắc tới.
Nó có đang còn được sử dụng hay không, và có được maintain thường xuyên hay không? Có được rating tốt không? Có được test kỹ hay không? Có issue nào không? Có hỗ trợ cho cả iOS và Android hay không? Đó là những câu hỏi luôn nằm trong đầu người dùng mỗi khi sử dụng các thư viện ngoài.
Nếu bạn muốn làm mới đôi chút trong thư viện ngoài, không được edit trực tiếp folder node_module/. Folder này giả định ignored bất kỳ các version nào, nên bạn thay đổi code trực tiếp, đồng đội của bạn sẽ không thấy các thay đổi đó. Giải pháp là bạn có thể fork original repository và có thể tạo pull request tới tác giả hoặc nếu thư viện nhỏ, bạn có thể copy/paste từng component vào project của bạn sau đó thay đổi nó ở local.
Sử dụng Live Reloading, Hot Reloading và Inspector
Mỗi tính năng của React Native đều rất hữu ích như: Live Reloading giúp bạn tiết kiệm thời gian sử dụng để refreshing app của bạn. Hot Reloading giúp tiết kiệm thời gian thiết kế lại màn hình và cuối cùng Inspector giúp cho bạn tiết kiệm cả đống console.log.
Sửa đổi nội dung của 1 state array/map sẽ không re-render.
Nếu bạn có 1 biến state là 1 hashmap, sửa đổi nội dung của nó sẽ không thay đổi chính nó, nên là render() sẽ không được gọi. Để hạn chế điều này, bạn cần tạo 1 bản copy của biến đó, ví dụ sử dụng hàm _.cloneDeep() trong thư viện lodash.
Ghi đè style
Nếu bạn cần ghi đè 1 style đã tồn tại hoặc sửa đổi style động, bạn có thể làm điều này dễ dàng bằng cách: …, với myStyle là style ghi đè từ containerStyle.
Quan tâm tới iOS Safe Area
Để ứng dụng của bạn hoạt động “ngon” hơn trên mọi thiết bị iOS, bạn cần bao các màn hình vào trong 1 safe area view để tránh sự “rối loạn” view. Bạn có thể gói vào trong React Native component , tại đây bạn có thể thêm mọi thứ bạn cần vào màn hình ứng dụng.
Bạn có thể dispatch redux action từ action khác
Một action không bị giới hạn bởi 1 API request duy nhất. Bất kỳ action nào có thể dispatch từ 1 action khác, từ cùng hoặc khác file.
Không lạm dụng zIndex
Sử dụng zIndex khi thật sự cần thiết. Điển hình như nếu bạn muốn ghi đè 1 lên bên trên , sử dụng zIndex là cách sai để làm điều này. Bạn nên sử dụng component thay thế cho điều đó.
Không sử dụng TouchableWithoutFeedback khi không có 1 lý do chính đáng
Như trong tài liệu chính thống của React Native đã đề cập, tất cả các phần tử có thể nhấn được nên chỉ cần một trạng thái hiển thị khi nhấn chạm.
Hãy sử dụng một cách thận trọng khi tạo UI.
Call API trong componentDidMount()
ComponentDidMount() là nơi lý tưởng để thực hiện việc call API. Nó sẽ không ngăn chặn việc gọi render(), nên sẽ không cần lo lắng đến hiệu năng ứng dụng. Bên cạnh đó, nó còn cho phép bạn có thể xử lý state mặc định để render component với giá trị state rỗng.
Quan tâm đến sự tương thích với các phiên bản trước
Thi thoảng 1 số tính năng bị di chuyển, hoặc có một vài sự thay đổi được giới thiệu như là thay đổi dữ liệu JSON trả về trên một API nào đó. Luôn chú ý rằng người dùng có thể sẽ không update app của bạn tới phiên bản mới nhất. Do đó, những phiên bản cũ có thể sẽ bị crashed theo 1 cách nào đó. Từ đó mà tìm được các phương án xử lý ví dụ như force update và một số khác.
Test component mới cho các case bên lề
Nếu component mới của bạn có một Text username, hãy chắc chắn rằng bạn muốn sử dụng nó trong mọi trường hợp như với một username dài và hãy xem nó wrap như thế nào và cách nó biến mất khỏi layout ra sao.
Từ đó, có thể xem xét việc sử dụng sllipsizeMode và numberOfLines cho nếu cần thiết.
