Home

Stateful vs Stateless vs Pure React Components

developer swift
Word count: 932 / Reading time: 6 min
2020/02/20 Share

React tạo ra nhiều biến thể components để giải quyết nhiều vấn đề khác nhau. Mỗi loại componet đều có những ưu nhược điểm riêng, tuỳ thuộc vào vấn đề gặp phải.
Chúng ta có nhiệm vụ lựa chọn component phù hợp nhất để tối ưu hoá performance cho ứng dụng.

Trong phạm phi bài viết này chúng ta sẽ tìm hiểu các loại componet phổ biến trong React sau:

  • Class components (hay còn gọi là ‘Stateful’ components)
  • Pure components
  • Function components (hay còn gọi ‘Stateless’ components)
Class Components

Class components là 1 ES6 classes được mở rộng từ Component của React.

1
2
3
4
5
6
7
class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

Class Components cho phép component truy cập vào các phương thức lifecycle của React, như componentWillMount, componentDidMount, render và chúng ta có thể thao tác với states và props trong vòng đời của chúng.

Class Component trên mặt khác sẽ không so sánh props và state của hiện tại với tương lai. Như vậy, component sẽ re-render bởi mặc định bất cứ khi nào shouldComponentUpdate gọi. Điều này đôi lúc sẽ làm giảm performance của ứng dụng.

Pure component

Mặc dù chuyển thành dạng React.Component nhưng component vẫn sẽ re-render không cần thiết, nguyên nhân là do hàm setState sẽ luôn kích hoạt sự kiện re-render, và điều đó sẽ đôi lúc dẫn tới việc re-render không cần thiết. Việc re-render này sẽ được thực hiện ở cả component hiện tại và component con trực tiếp của nó (kể cả props truyền xuống cho component con đó không có gì thay đổi). Giải pháp đặt ra là bạn có thể bổ sung code check props vào method shouldComponentUpdate để check khi nào thì cần thiết để re-render lại.Đó cũng là cách mà PureComponent hoạt động.

1
2
3
4
5
6
7
8
9
10
11
12
13
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
    }
}

Khi props hoặc state thay đổi, PureComponent sẽ làm một shallow comparison (so sánh nông) trên cả props và state .Khi so sánh props và state trước và sau, một shallow comparison sẽ kiểm tra những giá trị nguyên thuỷ đó có cùng giá trị(ví dụ 1 bằng 1 hoặc true bằng với true) và rằng các references value là giống nhau giữa các giá trị javascript phức tạp như objects và arrays. Sử dụng Pure component giúp hạn chế việc re-render không cần thiết.

Function components
1
2
3
4
5
const PageOne = () => {
    return (
        <h1>Page One</h1>
    );
}

Function components đơn giản hơn. Nó không quản lý states của component và củng không có quyền truy cập vào các phương thức lifecycle do React Native cung cấp

Function componentst nhận dữ liệu qua property binding (tương tự như arguments trong Javascript) và thông báo sự thay đổi qua sự kiện (tương tự như return block).

Hay nói cách khác, Function components không bị tác động bởi các component khác nó. Do đó, chúng ta có thể tái sử dụng, dễ dàng test cũng như xóa chúng đi mà không lo lắng về ảnh hưởng của chúng với ứng dụng.

Một vài điểm đặc biệt của Function components:

  • Không thực hiện request/fetch dữ liẹue
  • Nhận dữ liệu thông qua property binding
  • Bắn dữ liệu ra qua event callbacks
  • Có thể render ra stateless component con, hay thậm chí cả stateful components
  • Có thể có các local UI state
Conclusion

Pure Component giúp tăng đáng kể hiệu năng của ứng dụng, giúp hạn chế việc re-render lại view, phù hợp với các UI có độ phức tạp lớn. Ngoài ra chúng ta có thể sử dụng các method lifecycle của component để xử lý cho các nghiệp vụ phức tạp.

Function Component thì đơn giản hơn, nos phù hợp với các custom View hoặc các View nhỏ đơn giản, cách viết của component củng trở nên đơn giản và ngắn gọn hơn.

Date: February 20th 2020, 11:59:43 pm

CATALOG
  1. 1. Class Components
  2. 2. Pure component
  3. 3. Function components
  4. 4. Conclusion
Total : 23
2021
2020
2019
2018
developer swift auto-layout developer, swift ui-test life-style
iOS human