6 cách đơn giản để tăng tốc độ ứng dụng React Native

0
337
Bài này thuộc phần 6 của 9 phần trong series React Native Training cho người mới

Bài viết trước, mình đã chia sẻ một số thủ thuật nhỏ để cải thiện performance của Javascript. Tất cả những thủ thuật đó bạn đều có thể áp dụng cho ứng dụng React Native. Vì vậy, nếu bạn chưa đọc nó, hãy đọc lại ngay bây giờ nhé!

Tuy nhiên, với ứng dụng React Native thì mình còn có một số thủ thuật khác nữa để tiếp tục tối ưu performance ứng dụng. Qua đó, ứng dụng mobile của bạn sẽ rất là mượt mà và trải nghiệm của người dùng luôn được đảm bảo.

Hãy cùng tìm hiểu nhé!

6 cách đơn giản để tăng tốc độ ứng dụng React Native

Tăng tốc độ ứng dụng React Native bằng cách nào?

1. Nên sử dụng PureComponent hoặc shouldComponentUpdate khi có thể

PureComponent trong React không có state, chúng chỉ render các component dựa trên dữ liệu được truyền qua props. Nó chỉ được render lại khi và chỉ khi props bị thay đổi.

shouldComponentUpdate life-cycle method được sử dụng trong Component React thông thường để hủy render lại bằng cách trả về false trong các tình huống nhất định.

Bạn thử tham khảo ví dụ sau và làm tương tự nhé:

class MyComponent extends React.PureComponent {
  //
}

class MyComponent extends React.Component {
  //
  shouldComponentUpdate(nextProps, nextState) {
    if(this.props.firstProp === nextProps. firstProp &&
       this.props.secondProp === nextProps.secondProp) {
      return false;
    }
    return true
  }
  //
}

Cả hai ví dụ trên có thể giúp bạn tiết kiệm một số render bị lãng phí. Ví dụ đầu tiên là thực hiện logic shouldComponentUpdate cho bạn. Ở ví dụ thứ hai thì cho phép bạn kiểm soát nhiều hơn một chút. Bạn có thể duy trì state trong component và ngừng việc re-rendering nếu state này không thay đổi.

Đại khái như sau:

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if(this.state.isLoading === nextState. isLoading) {
      return false;
    }
    return true
  }
}

2. Sử dụng key attribute trên các list items

List là thứ được sử dụng phổ biến nhất trong mọi ứng dụng. Như ứng dụng native trong android thì có ListView, RecyclerView…Nếu bạn không chỉ định unique key cho mỗi item trong list, react sẽ re-render tất cả item mỗi khi một item nào được thêm vào hoặc bị xóa khỏi list. Nếu bạn có một unique key cho mỗi item, bạn sẽ không phải tốn tài nguyên để re-render lại những item không có thay đổi.

class MyComponent extends React.PureComponent {
  render() {
    return this.props.data.map((item, i) => {
      return <Text key={item.id}>{item.title}</Text>
    });
  }
}

3. Bind ngay khi có thể và đừng tạo functions bên trong render

Kiểu như sau:

class MyComponent extends React.PureComponent {
  
  constructor(props) {
    super(props);
    this.doWork = this.doWork.bind(this);
  }
  doWork() {
    // doing some work here.
    // this.props.dispatch....
  }
  
  render() {
    return <Text onPress={this.doWork}>Do Some Work</Text>
  }
  
}

Không nên thực hiện trong render

<Text onPress={ () => this.doWork() }>Do Some Work</Text>

Hoặc

<Text onPress={ this.doWork.bind(this) }>Do Some Work</Text>

Bởi vì render được gọi thường xuyên và mỗi khi bạn gọi một trong hai thứ trên, một hàm mới sẽ được tạo ra => tốn tài nguyên không cần thiết

Nếu bạn muốn truyền đối số cho hàm doWork, bạn có thể sử dụng một closure như thế này

doWork = (param) => () => {
 console.log(param)
}
<Text onPress={this.doWork(someVarParam)}Do Some Work With Args</Text>

4. Không cập nhật state hoặc gửi actions bên trong componentWillUpdate

componentWillUpdate lifecycle method được sử dụng để chuẩn bị cho bản cập nhật nào đó, không kích hoạt cập nhật khác. Nếu bạn muốn đặt state hoặc gửi bất kỳ actions nào, hãy thực hiện chúng trong componentWillReceiveProps.

5. Sử dụng VirtualizedList, FlatList và SectionList cho các tập dữ liệu lớn.

Theo tài liệu chính thức của React Native: VirtualizedList, FlatList và SectionList là những API dùng cho việc hiển thị list và sử dụng rất ít bộ nhớ.

Vì vậy nếu bạn có một danh sách với hàng trăm items, thì không phải tất cả chúng đều được tải lên màn hình cho đến khi bạn cuộn xuống.

Cả FlatList và SectionList đều base trên VirtualizedList. Và lời khuyên của mình là nếu bạn có tập dữ liệu không bị thay đổi dữ liệu khi ứng dụng chạy(Ví dụ: sách các thành phố trên thế giới, danh sách đất nước…), bạn nên sử dụng VirtualizedList trực tiếp thay vì FlatList hay SectionList.

6. Sử dụng Perf monitor để xem FPS

Bật developer tools và enable lên perf monitor. Giờ đây, khi bạn sử dụng ứng dụng, đôi khi bạn thấy FPS bị giảm xuống.  Chủ yếu là giảm trên JS thread chứ không phải trên native UI thread.

Vì vậy, hãy bắt đầu tìm kiếm những lỗi khiến FPS đang giảm. Có thể state bị thiết lập sai hoặc gửi các actions ở sai chỗ trong code…. Cũng có thể là bạn đang thực hiện quá nhiều công việc đồng bộ(synchronous) trên JS thread.

Nói chung, có rất nhiều nguyên nhân có thể khiến ứng dụng của bạn bị chậm. Nếu cảm thấy cần thiết, hãy sử dụng Perf monitor để kiểm tra và phát hiện nguyên nhân. Hoặc bạn có thể tiến hành debug trên các thiết bị thật xem vấn đề có xuất hiện không. Đây là cách debug React Native.

Chắc chắn mình sẽ chia sẻ các kỹ thuật nâng cao hơn trong bài viết tiếp theo về ứng dụng React Native. Đừng quên subcribe mình để nhận những bài viết mới nhé

Nếu bạn có bất kì thắc mắc hãy để comment bên dưới nhé, mình luôn luôn lắng nghe ^^

Xem tiếp các bài trong Series
Phần trước: React Native: Authentication với Firebase đơn giản và dễ hiểuPhần kế tiếp: Học React Native: Giới thiệu bộ UI KIT cho IOS

Bình luận. Đặt câu hỏi cũng là một cách học

avatar
  Theo dõi bình luận  
Thông báo