Bất kỳ ai đã từng nghiên cứu qua React qua những ví dụ trên mạng cũng đều dễ dàng nhận thấy rằng có vài cách để khai báo component. Hiểu biết về sự khác nhau giữa chúng và cách nào nên sử dụng trong từng tính huống không phải dễ dàng. Vì thế hãy tìm hiểu nhanh về class commponents & functional components và một vài cách chúng được tạo ra

1. Class components

Nếu bạn đã từng tiếp xúc React từ những ngày đầu (khoảng 2015). Đây có thể là format component mà bạn quen thuộc nhất. Sử dụng React's createClass , chỉ yêu cầu mỗi method render

const MyComponent = React.createClass ({
  
  render: function() {
    return <h1>My name is { this.props.name }</h1>
  }
                                       
});

Tin tốt là bạn có thể sử dụng cách này không vấn đề. Còn tin xấu là ngày nay cách này không còn là sự lựa chọn tối ưu nữa. Cùng với sự ra đời của ES6, React v0.13 cũng giới thiệu một cách mới để khai báo component sử dụng keyword class & cú pháp module

class MyComponent extends Component {
  
  render () {
    return <h1>My name is { this.props.name }</h1>
  }
  
}

Như đã nói, có 2 cách tạo component khá tương đồng. Mặc dù render function trong ví dụ trên là method required duy nhất trong cả 2 trường hợp, bởi vì những component là các class, ta có thể viết thêm các method khác trong class của chúng ta mà không có vấn đề gì cả. Còn sự khác nhau của 2 cách sẽ là các function life cycle

Using the React Factory Method

const MyComponent = React.createClass ({
  
  getInitialState: function(){
     return { name: ‘Optimus Prime’ };
   },

  getDefaultProps: function(){
    return { quote:’Roll Out!’ }; 
  },

  myFunction: function(){
    return this.state.name + “ commands ” + this.props.quote
  },

  render: function() {
    return <p>{ this.myFunction() }</p>
  }
                                       
});

Extending the React Component Class

class MyComponent extends Component {

  constructor(props) {
    super(props);
    this.state = { name: ‘Optimus Prime’ }
    this.myFunction = this.myFunction.bind(this)
  }

  myFunction: function(){
    return `${this.state.name} commands ${this.props.quote}`
  }

  render () {
    return <p>{ this.myFunction() }</p>
  }

}

MyComponent.defaultProps = {
  quote: “Roll Out!”
}

Dễ thấy sự khác biệt đáng kể khi khai báo state & props. Trong ví dụ đầu tiên, createClass với method getInitialState & getDefaultProps chỉ đơn giản là yêu cầu 1 object được return mà sau đó ta có thể sử dụng ở những chỗ khác thông qua this.state & this.props

Trong khi đó, ở ví dụ 2 được built như 1 ES6 class. Đầu tiên ta có initial state được khai báo trong constructor function. Các props được khai báo thông qua thuộc tính defaultProps. Nếu bạn sử dụng ES7, thì chúng sẽ được gán vào defaultProps ở bên ngoài class (giống như propTypes)

Điều thay đổi quan trọng thứ 2 là constructor function. Điều đầu tiên là ta gọi super(props), nó sẽ truyền incoming props của ta lên lớp cha. Gọi hàm này là ta đã ghi đè những thiết lập của ta lên hàm cha giúp cho ta có thể sử dụng props ở mọi nơi trong class

Tiếp đến ta bind myFunction với this, điều này sẽ giúp this (context) có thể được sử dụng trong hàm myFunction

Functional Components

React 0.14 cho phép ta tạo một stateless component đơn giản hơn rất nhiều. Nó thường được biết đến với cái tên Functional Components bởi vì nó chỉ đơn thuần là các function trong javascript

const MyComponent = ({ name, quote }) => (
  <p>{ `${name} commands ${quote}` }</p>
)

Cách này sẽ giúp cắt giảm những liên kết không cần thiết với class. Nếu muốn khai báo thêm các function khác thì ta phải dùng đến return

const MyComponent = ({ name, quote }) => {

  const myFunction = (name, quote) => {
    return `${name} commands ${quote}`
  }
  
  return (
    <p>{ myFunction(name, quote) }</p>
  )
}

Tuy nhiên, vì cách này không có constructor cũng không extend từ React nên hiển nhiên là nó không thể sử dụng được những method của React: lifecycle methods cũng không có state luôn (Vậy nó mới có tên khác là stateless component)

Khi nào thì dùng Functional Components

Bạn có thể tự hỏi bản thân rằng tại sao nhiều người vẫn sử dụng Functional Components khi mà nó đã bị bỏ hết các tính năng của react rồi. Hẳn là có lí do:

1. Functional component dễ đọc & test hơn vì nó chỉ toàn là các function của JS, không có những thứ hầm bà nhằng như state hay lifecycle-hooks
2. Viết code ít hơn
3. "Có vẻ" nó sẽ giúp tăng tốc độ app của chúng ta