Một số thủ thuật tối ưu ứng dụng React-Native nên biết!
react-native
8
react native
6
White

Huy Quang viết ngày 05/09/2018

Nguồn: https://codeburst.io/6-simple-ways-to-speed-up-your-react-native-app-d5b775ab3f16

1. Sử dụng PureComponent hoặc shouldComponentUpdate

Khác với Component ta vẫn hay dùng, PureComponent trong react không chứa state, chúng chỉ render dựa trên data từ props. Nó chỉ render view lại khi props thay đổi.
Với Component (Không phải PureComponent), trong vài tính huống nhất định, chúng ta không muốn bị re-render. Phương thức shouldComponentUpdate sẽ rất có ích trong trường hợp này. Bằng cách cho shouldComponentUpdate trả về bằng false, tiến trình re-render sẽ bị dừng lại.

VD :

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 chúng ta hạn chế vài lần render lãng phí. Với VD thứ 2, bạn phải kiểm soát dữ liệu của mình nhiều hơn.

2. Đặt key mỗi items trong List

List là thứ được dùng phổ biến nhất trong mọi ứng dụng. Nếu bạn không thêm khoá cho mỗi mục trên list, react sẽ re-render tất cả các đầu mục item dù chỉ một hay một vài mục nào đó thêm hay xoá khỏi List. Khi có khoá, react sẽ hạn chế re-render lại nó hơn.

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

3. Bind sớm hơn và không tạo functions bên trong render

Thực hiện điều này :

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 thực hiện điều này 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 lần bạn viết như 2 VD trên, một function mới sẽ được tạo.
Với function kèm tham số, bạn có thể viết như thế này:

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

4. Không update state hoặc dispatch trong componentWillUpdate

Phương thức componentWillUpdate được sử dụng để chuẩn bị cho một sự thay đổi, không kích hoạt một đối tương khác. Nếu bạn muốn set state hoặc dispatch bất kì redux action, hãy viết chúng trong componentWillReceiveProps

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

Theo react native docs, VirtualizedList, FlatList and SectionList cho hiệu suất cao hơn khi render List, vì chúng sử dụng vùng nhớ ít hơn.
VirtualizedList là base của FlatList và SectionList. Và nếu bạn có tập dữ liệu bất biến, bạn nên dùng VirtualizedList

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

Mở developer tools và bật perf monitor. Bây giờ khi bạn bắt đầu tương tác, chuyển hướng hay cuộn ứng dụng, bạn có thể nhìn thấy các điểm FPS bị tụt. Và chủ yếu nó trên JS Thread và không trên native UI thread. Vì vậy chúng ta có thể tìm kiếm các điểm chết, nơi FPS bị tụt. Bạn có thể đã set state hoặc dispatching redux action sai ở một vài chỗ hoặc thực hiện quá nhiều tiến trình đồng bộ trên JS thread.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Huy Quang

3 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 5
Chúng ta nên cấu trúc data trong redux như thế nào? Đây là một câu hỏi thường gặp khi sử dụng redux, chắc chắn tôi đã tự hỏi mình nhiều lần. Tôi đã...
Huy Quang viết 1 năm trước
7 5
White
2 0
Việc cài cắm server với các bạn dev có kinh nghiệm chắc cũng không quá xa lạ. Document của aws cũng khá rõ ràng, nhưng mình vần muốn dịch lại và ch...
Huy Quang viết hơn 1 năm trước
2 0
Bài viết liên quan
White
7 0
Hello React Native Chắc hẳn các bạn không còn xa lạ với React Native (RN) nên mình sẽ không giới thiệu nó là cái gì nữa mà sẽ bắt tay vào làm một ...
Derek Nguyen viết hơn 2 năm trước
7 0
White
2 0
(Link) là xu hướng mới trong lập trình hiện này. Nó là một trong những ứng dụng do Facebook phát hành rất được người dùng ưa chuộng. Tuy nhiên khôn...
My Pham viết 10 tháng trước
2 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
1 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!