Render props là kỹ thuật để re-use code rất phổ biến trong React và được sử dụng nhiều trong các thư viện cũng như các dự án lớn. Tuy nhiên chắc hẳn còn nhiều bạn chưa biết đến nó, thế nên mình sẽ giới thiệu qua một chút nhé.
Kỹ thuật render props sử dụng 1 props là function trả về React Component, và component sẽ render giá trị trả về của hàm đó thay vì render ra Component như thông thường
Ví dụ:
class SomeComponent extends React.Component {
render() {
return this.props.render() // Gọi hàm truyền vào thông qua props
}
}
class App extends React.Component {
render() {
return (
<SomeComponent render={
() => (
<div className="hello">
Hello world
</div>
)
}/>
)
}
}
Bạn có thể thấy trong ví dụ, mình truyền vào SomeComponent 1 props là render và gán nó bằng 1 function trả về 1 React Component, ở trong SomeComponent mình gọi funciton this.props.render được truyền từ ngoài vào để render. Và bạn nên nhớ là truyền vào function và gọi nó để render ra cái gì đó thì mới là render props nhé, không phải cứ có cái props tên là render thì là kỹ thuật render props đâu :)). Khi chạy đoạn code như trên, giao diện sẽ hiển thị cái div Hello World đúng như các bạn dự đoán.
Ví dụ trên rất dummy và không cho thấy được tác dụng của việc sử dụng render props, tất nhiên rồi vì nếu bạn gọi 1 function không có tham số thì khác bạn sử dụng hằng số đâu. Sau đây chúng ta sẽ đến với một ví dụ đỡ dummy hơn 1 tí: Bạn có data trả về từ 1 nguồn nào đó, và bạn có thể subscribe sự thay đổi của khối data đó, rồi cập nhật thay đổi giao diện dựa trên data.
Ví dụ:
See the Pen Render props by Tung (@thetungctn) on CodePen.
Hãy nhìn qua ví dụ trên, đừng quan tâm đến code của cái NameStore, bạn chỉ cần biết đó là khối data mà mình đã nói đến, ở đây mình có data là 1 cái tên và cứ 0.5s lại thay đổi, ta có thể lấy dữ liệu từ đó và subscribe sự thay đổi của nó. Và NameComponent, bạn cũng không cần đọc hết nó chỉ cần hiểu là nó sẽ subscribe sự thay đổi của cái NameStore trên và mỗi khi data thay đổi thi nó sẽ setState để thay đổi state name. Cái bạn cần chú ý nhất là hàm render của NameComponent, nó sử dụng render props (như các bạn đã biết :P), và gọi function this.props.render với tham số là this.state.name, vì thế mỗi khi state name được update thì component sẽ render lại và gọi lại function với 1 tham số khác, giao diện cũng được cập nhật tương ứng.
Rồi, vậy là chúng ta đã sử dụng render props với function có tham số, mà sao có cảm giác nó không “make sense” cho lắm nhỉ, nếu như ví dụ trên thì render trực tiếp cho xong, truyền vào cái function kia làm quái gì? Thế nhưng hãy nhớ lại những gì mình đã nói ở đầu bài viết, render props là sử dụng để re-use (sử dụng lại) code, vì thế nếu code của bạn chỉ dùng cho 1 trường hợp nhất định thì chắc chắn là dùng render props không có tác dụng gì rồi. Bạn hãy nghĩ đến trường hợp phải sử dụng lại NameComponent ở những nơi khác nhau, đó chính là khi render props phát huy tác dụng của mình.
Ví dụ
See the Pen Render props by Tung (@thetungctn) on CodePen.
Vẫn cái NameComponent như trên, mình sử dụng cho 3 Component khác nhau, state name được quản lý ở NameComponent và được đưa vào tham số khi gọi function render được truyền từ các component cha. Kết quả, như các bạn thấy, cả 3 Component đều subscribe vào 1 nguồn dữ liệu chung, và nhận sự thay đổi sau mỗi 0.5s.
OK , như vậy bạn đã biết render props là gì và cách sử dụng render props, vậy thì khi nào thì sử dụng render props. Tình huống hay được áp dụng sử dụng render props nhất mà mình biết đó là: Sử dụng để lấy dữ liệu từ nguồn nào đó, listen và cập nhật sự thay đổi, nguồn này có thể là dữ liệu lấy từ DB và cập nhật qua socket, hoặc là những giá trị của DOM và cập nhật dựa trên DOM events, cũng có thể là 1 custom Object mà chúng ta tự tạo ra với mục đích nào đó, …
Tiếp theo là sự phổ biến của render props, rất nhiều thư viện nổi tiếng sử dụng render props để implement và cung cấp API cho người sử dụng, ví dụ như: React Router, React Motion, Down Shift, Unstated, … Và, không biết bạn cập nhật thông tin chưa, React Context API mới, sẽ xuất hiện trong bản 16.3.0 tới đây, sẽ dùng render props trong việc lấy dữ liệu ở những component con, bạn có thể đọc tại đây để hiểu rõ hơn cách sử dụng nhé.
Bài viết tới đây là hết rồi, cám ơn các bạn đã theo dõi đến tận những dòng này, mong các bạn hiểu rõ và vận dụng render props một cách hiểu quả nha. Ye!
Previous post