Render props pattern trong React

Render props là gì?

Render props (hay còn được gọi là render callback) 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 Element, và component sẽ render giá trị trả về của hàm đó thay vì trực tiếp render React Element 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 Element (div), ở trong SomeComponent mình gọi function 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ó để phục vụ việc render thì mới là render props và tên props bạn đặt là gì tuỳ thích, không phải là 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ụ "smart" hơn 1 tẹo: Bạn có data trả về từ một nguồn nào đó, và bạn có thể subscribe sự thay đổi của khối data và cập nhật thay đổi giao diện dựa trên data này.

Ví dụ:

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 được cập nhật, 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ủa nó. 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