bridge
Not be a react native bridge

Từ khi lúc đụng đến React native, mình đã thấy người ta viết style cho các components như sau:

Nhưng ngoài cách này, thỉnh thoảng mình cũng thấy những đoạn code kiểu như:

<View style={{/*nội dung style*/}} />

Rồi trong đầu mình nãy sinh 1 câu hỏi “Tại sao phải dùng StyleSheet.create? Nó có tác dụng gì? Liệu cách code như bên dưới có khác gì với việc dùng StyleSheet.create?”.

 

Mặc dù lúc đó thắc mắc nhưng mình lại không chịu bỏ thời gian ra tìm hiểu. Mình tự suy diễn rằng có thể dùng StyleSheet.create giúp IDE gợi ý code tốt hơn, nó hiểu được đó là styles chứ không phải là 1 object thông thường. Vì đã cho rằng như vậy nên mình đã không để ý đến vấn đề đó nữa. Rồi đến 1 ngày, ngẫu hứng, mình lại có mong muốn hiểu rõ vấn đề. Mình đã Google 1 phát, và đáp án ra ngay.

Nói vòng vo vậy thôi, hôm nay mình viết bài này để giải thích cái vấn đề mà mình đã đặt ra đó.

Tái sử dụng

Với lí do này thì có lẽ nhiều người cũng biết. Khi render component, thường có  nhiều React JSX elements có style giống nhau. Vậy nên dùng StyleSheet thay vì inline style để định nghĩa 1 style dùng chung cho nhiều elements. Điều này cũng tương tự như với CSS trên web.

IDE hỗ trợ tốt hơn

Như mình đã nói ở phần đầu, cái lí do này là do mình suy diễn ra. Nhưng mà nó cũng đúng. Có thể không hoàn toàn đúng với tất cả các IDE, nhưng ít ra nó đúng với IDE mà mình đã dùng VSCode. Khi mình viết với cú pháp StyleSheet.create, nó phân tích, nó hiểu được mình đang định nghĩa StyleSheet, nó gợi ý cho mình các thuộc tính của style, cũng như gợi ý giá trị của một số thuộc tính như flexDirection, alignItems…

Validate styles

So với việc IDE hỗ trợ lúc code, thì StyleSheet nó hỗ trợ lúc chạy, nó sẽ kiểm tra thuộc tính nào không đúng hay giá trị nào không đúng để cảnh báo cho chúng ta biết. Đôi lúc có những lúc có lỗi typo thôi mà cũng phải nhức đầu debug, thì những cảnh báo này giúp chúng ta phần nào dễ dàng hơn trong việc phát hiện và sửa các lỗi typo của chúng ta.

Tối ưu hiệu suất

React native ngoài JavaScript, nó còn có phần native nữa. JavaScript giao tiếp với native thông qua 1 cái gọi là bridge (Cầu nối).

Khi dùng StyleSheet, các styles được truyền qua cầu nối đúng 1 lần. Nhưng khi dùng styles object thì các styles được truyền qua cầu nối nhiều lần. Việc truyền dữ liệu qua cầu nối khá là tốn kém, nên cần phải hạn chế việc truyền dữ liệu không cần thiết.

Khi dùng StyleSheet, các styles được truyền qua cầu nối sẽ được gán các id. Do đó khi  sử dụng, cái được truyền vào element cũng là cái được truyền qua cầu nối chỉ là cái id của style chứ không phải là style object.

Kết

Như tiêu đề bài viết: Nên dùng StyleSheet, với những lí do nêu trên.

Tiện thể, mình chia sẻ luôn cái link trên cái trang stackoverflow của cái câu hỏi của cái người mà có cái thắc mắc giống với cái thắc mắc của mình lúc đó:

https://stackoverflow.com/questions/38886020/what-is-the-point-of-stylesheet-create/38887003