Nếu bạn chưa quen với React Native hoặc mới bắt đầu sử dụng React Native thì bài viết này sẽ rất hữu ích cho bạn.

Ở đây, ta sẽ cùng tìm hiểu làm như thế nào để tái sử dụng các component trong ứng dụng của mình. Việc rút gọn code sẽ giúp ứng dụng dễ hiểu và tường minh hơn, điều đó khiến bạn dễ dàng nâng cấp và chỉnh sửa về sau.

Để bắt đầu với những kiến thức tiếp theo ta hãy cùng điểm qua một vài kiến thức cơ bản:

• Truyền dữ liệu qua props
• Lồng ghép các component
• Higher order component

Để cho dễ hình dung ra các vấn đề hãy xem ví dụ bên dưới. Điều này rất quan trọng vì nó phụ thuộc vào từng trường hợp và làm sao để cho chúng có thể tái sử dụng nhiều nhất, nó sẽ tiết kiệm thời gian và hạn chế viết lại code.

Truyền dữ liệu qua props

Ta có một component và được sử dụng ở nhiều nơi khác nhau, ở mỗi trường hợp ta chỉ cần thay đổi các thuộc tính của nó là sẽ đúng yêu cầu.

Ví dụ cho việc sử dụng component Button.

<Button
	label="Submit"
/>

<Button
	label="Sign up"
	textColor={{ color: 'red' }}
	onPress={() => console.log('hello')}
/>

Lồng ghép các component

Phương pháp này hữu ích nếu chúng ta muốn sử dụng lại một thuộc tính nào đó của Button ở một vài nơi. Điều chúng ta cần làm là phải ghi đè lên các props mà ta muốn sử dụng chúng. Ví dụ ta muốn Button luôn có màu nâu thì chỉ cần tạo ra một component Button.Brown và style backgroundColor brown.

Sử dụng nó chỉ cần import và sử dụng như sau:

<Button.Brown />

Higher order component

HOCs về cơ bản là một hàm trả về một component mới được bọc trong một component khác. Trong ví dụ này ta sẽ thử làm một component Button với animation scale khi nhấn onPress.

Để sử dụng HOCs scale animation thì ta sẽ bọc component Button trong hàm withScaleAniamtion.

const AnimatedBasicButton = withScaleAnimation(Button);

<AnimatedBasicButton onPress={buttonPressed} />

Hy vọng sau khi đọc bài này, bạn đã hiểu qua một phần nào đó về việc tái sử dụng các component. Việc chia cắt các component vừa đủ nhỏ sẽ giúp tận dụng lại đoạn code đó.