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.children
thuộ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.children
trong 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.
Tải xuống miễn phí của tôiSổ tay React
Các hướng dẫn về phản ứng khác:
- Ví dụ về ứng dụng React đơn giản: tìm nạp thông tin người dùng GitHub qua API
- Tạo một bộ đếm đơn giản với React
- Thiết lập mã VS để phát triển React
- Cách chuyển các đạo cụ cho một thành phần con thông qua React Router
- Tạo ứng dụng với Electron và React
- Hướng dẫn: tạo Bảng tính bằng React
- Lộ trình học React
- Tìm hiểu cách sử dụng Redux
- Bắt đầu với JSX
- Các thành phần được tạo kiểu
- Giới thiệu về Redux Saga
- Giới thiệu về React Router
- Giới thiệu về React
- Các thành phần React
- DOM ảo
- Sự kiện React
- Trạng thái phản ứng
- React Props
- Phân đoạn phản ứng
- API ngữ cảnh phản ứng
- React PropTypes
- Các khái niệm phản ứng: khai báo
- React: Cách hiển thị một thành phần khác khi nhấp chuột
- Cách lặp lại bên trong React JSX
- Props so với State trong React
- Bạn nên sử dụng jQuery hay React?
- Bạn cần biết bao nhiêu JavaScript để sử dụng React?
- Giới thiệu về Gatsby
- Cách tham chiếu phần tử DOM trong React
- Luồng dữ liệu một chiều trong React
- React Các thành phần thứ tự cao hơn
- Sự kiện vòng đời phản ứng
- Khái niệm React: Tính bất biến
- Khái niệm React: Độ tinh khiết
- Giới thiệu về React Hooks
- Giới thiệu về ứng dụng tạo-phản ứng
- Khái niệm React: Thành phần
- React: Các thành phần trình bày so với vùng chứa
- Tách mã trong React
- Kết xuất phía máy chủ với React
- Cách cài đặt React
- CSS trong React
- Sử dụng SASS trong React
- Xử lý các biểu mẫu trong React
- Chế độ phản ứng nghiêm ngặt
- Cổng phản ứng
- React Render Props
- Kiểm tra các thành phần React
- Cách chuyển một tham số cho các trình xử lý sự kiện trong React
- Cách xử lý lỗi trong React
- Cách trả về nhiều phần tử trong JSX
- Kết xuất có điều kiện trong React
- React, cách chuyển đạo cụ sang các thành phần con
- Cách lấy giá trị của một phần tử đầu vào trong React
- Cách sử dụng hook useState React
- Cách sử dụng useCallback React hook
- Cách sử dụng useEffect React hook
- Cách sử dụng useMemo React hook
- Cách sử dụng hook useRef React
- Cách sử dụng hook useContext React
- Cách sử dụng useReducer React hook
- Cách kết nối ứng dụng React của bạn với một chương trình phụ trợ trên cùng một nguồn gốc
- Hướng dẫn tiếp cận bộ định tuyến
- Cách sử dụng Công cụ dành cho nhà phát triển React
- Cách học React
- Cách gỡ lỗi ứng dụng React
- Cách hiển thị HTML trong React
- Cách sửa lỗi không khớp với `` risklySetInnerHTML '' trong React
- Cách tôi khắc phục sự cố với trạng thái biểu mẫu đăng nhập React và tính năng tự động điền của Trình duyệt
- Cách định cấu hình HTTPS trong ứng dụng React trên localhost
- Cách khắc phục lỗi "không thể cập nhật một thành phần trong khi hiển thị một thành phần khác" trong React
- Tôi có thể sử dụng React hooks bên trong một điều kiện không?
- Sử dụng useState với một đối tượng: cách cập nhật
- Cách di chuyển xung quanh các khối mã với React và Tailwind
- Phản ứng, tập trung một mục trong React khi được thêm vào DOM
- Phản ứng, chỉnh sửa văn bản trên doubleclick