Khái niệm React: Thành phần

Thành phần là gì và tại sao nó là một khái niệm chính trong các ứng dụng React của bạn

Trong lập trình, thành phần cho phép bạn xây dựng chức năng phức tạp hơn bằng cách kết hợp các chức năng nhỏ và tập trung.

Ví dụ, hãy nghĩ về việc sử dụngmap()để tạo một mảng mới từ một tập hợp ban đầu, và sau đó lọc kết quả bằng cách sử dụngfilter():

const list = ['Apple', 'Orange', 'Egg']
list.map(item => item[0]).filter(item => item === 'A') //'A'

Trong React, thành phần cho phép bạn có một số lợi thế khá thú vị.

Bạn tạo các thành phần nhỏ và gọn gàng và sử dụng chúng đểsoạn, biên soạnnhiều chức năng hơn trên chúng. Làm sao?

Tạo phiên bản chuyên biệt của một thành phần

Sử dụng một thành phần bên ngoài để mở rộng và chuyên biệt hóa một thành phần chung chung hơn:

const Button = props => {
  return <button>{props.text}</button>
}
const SubmitButton = () => {
return <Button text=“Submit” />
}
const LoginButton = () => {
return <Button text=“Login” />
}

Truyền phương thức làm đạo cụ

Ví dụ: một thành phần có thể tập trung vào việc theo dõi sự kiện nhấp chuột và điều gì thực sự xảy ra khi sự kiện nhấp chuột xảy ra là tùy thuộc vào thành phần vùng chứa:

const Button = props => {
  return <button onClick={props.onClickHandler}>{props.text}</button>
}
const LoginButton = props => {
return <Button text=“Login” onClickHandler={props.onClickHandler} />
}
const Container = () => {
const onClickHandler = () => {
alert(‘clicked’)
}
return <LoginButton onClickHandler={onClickHandler} />
}

Sử dụng trẻ em

Cácprops.childrenthuộc tính cho phép bạn đưa các thành phần vào bên trong các thành phần khác.

Thành phần cần xuấtprops.childrentrong JSX của nó:

const Sidebar = props => {
  return <aside>{props.children}</aside>
}

và bạn nhúng nhiều thành phần hơn vào nó một cách minh bạch:

<Sidebar>
  <Link title="First link" />
  <Link title="Second link" />
</Sidebar>

Thành phần thứ tự cao hơn

Khi một thành phần nhận một thành phần làm chỗ dựa và trả về một thành phần, nó được gọi là thành phần bậc cao hơn.

Bạn có thể tìm hiểu thêm về các thành phần bậc cao trên bài viết của tôiReact Các thành phần thứ tự cao hơn.