React là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng (UI). Tại trái tim của React là các component – các khối xây dựng cơ bản giúp bạn tạo ra các ứng dụng phức tạp từ những phần nhỏ hơn. Bài viết này sẽ cung cấp cho bạn cái nhìn tổng quan về component trong React, cách chúng hoạt động, các loại component khác nhau, và những điều bạn cần biết để làm việc hiệu quả với chúng.
Component trong React Là Gì?
Định Nghĩa
Component trong React là các phần tử UI độc lập, có thể tái sử dụng. Mỗi component trong React thường tương ứng với một phần cụ thể của giao diện người dùng, như một nút bấm, một biểu mẫu, hoặc thậm chí là toàn bộ trang.
Tại Sao Sử Dụng Component?
- Tái Sử Dụng: Component có thể được tái sử dụng trong nhiều phần khác nhau của ứng dụng, giúp giảm thiểu mã lặp.
- Quản Lý Dễ Dàng: Chia nhỏ giao diện thành các component giúp quản lý và phát triển ứng dụng dễ dàng hơn.
- Độc Lập: Component hoạt động độc lập, có thể nhận dữ liệu từ bên ngoài thông qua
propsvà quản lý trạng thái riêng bằngstate.
Các Loại Component trong React
Functional Component
Functional component là các hàm JavaScript đơn giản nhận props làm tham số và trả về các phần tử React.
Ví Dụ Functional Component
import React from 'react';
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
export default Greeting;Class Component
Class component là các lớp JavaScript mở rộng từ React.Component. Chúng có thể quản lý state và sử dụng các phương thức vòng đời của React.
Ví Dụ Class Component
import React, { Component } from 'react';
class Greeting extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
export default Greeting;Props và State
Props
Props (viết tắt của “properties”) là các đối tượng được truyền từ component cha xuống component con. Chúng không thể thay đổi bởi component nhận.
Ví Dụ Sử Dụng Props
import React from 'react';
import ReactDOM from 'react-dom';
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
ReactDOM.render(<Greeting name="Alice" />, document.getElementById('root'));State
State là một đối tượng quản lý trạng thái nội bộ của component. Nó có thể thay đổi theo thời gian và ảnh hưởng đến việc render của component.
Ví Dụ Sử Dụng State
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;Lifecycle Methods
Class component có các phương thức vòng đời, cho phép bạn quản lý các giai đoạn khác nhau của vòng đời component, từ khi được tạo ra đến khi bị hủy.
Các Phương Thức Vòng Đời Quan Trọng
componentDidMount: Được gọi sau khi component được render lần đầu tiên.componentDidUpdate: Được gọi sau khi component cập nhật.componentWillUnmount: Được gọi ngay trước khi component bị hủy.
Ví Dụ Sử Dụng Lifecycle Methods
import React, { Component } from 'react';
class LifecycleDemo extends Component {
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <h1>Lifecycle Methods Demo</h1>;
}
}
export default LifecycleDemo;Tái Sử Dụng Component
Tạo Các Component Tái Sử Dụng
Component tái sử dụng giúp giảm thiểu mã lặp và tăng tính nhất quán trong giao diện người dùng.
Ví Dụ Tạo Component Tái Sử Dụng
import React from 'react';
const Button = ({ onClick, children }) => {
return <button onClick={onClick}>{children}</button>;
};
export default Button;Sử dụng component Button:
import React from 'react';
import Button from './Button';
const App = () => {
return (
<div>
<Button onClick={() => alert('Button clicked!')}>Click Me</Button>
</div>
);
};
export default App;Container Component và Presentational Component
- Presentational Component: Chủ yếu chịu trách nhiệm về giao diện, nhận dữ liệu qua
propsvà không quản lý trạng thái. - Container Component: Quản lý trạng thái và logic, thường không chứa nhiều mã giao diện.
Ví Dụ Container và Presentational Component
// Presentational Component
const UserList = ({ users }) => {
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};
// Container Component
import React, { Component } from 'react';
import UserList from './UserList';
class UserContainer extends Component {
state = {
users: []
};
componentDidMount() {
fetch('/api/users')
.then((response) => response.json())
.then((users) => this.setState({ users }));
}
render() {
return <UserList users={this.state.users} />;
}
}
export default UserContainer;Context API
Context API trong React cho phép truyền dữ liệu qua nhiều cấp component mà không cần phải truyền props qua từng cấp.
Ví Dụ Sử Dụng Context API
import React, { createContext, useContext, useState } from 'react';
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
const ThemedComponent = () => {
const { theme, setTheme } = useContext(ThemeContext);
return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
<p>The current theme is {theme}</p>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
</div>
);
};
const App = () => {
return (
<ThemeProvider>
<ThemedComponent />
</ThemeProvider>
);
};
export default App;Kết Luận
Component là nền tảng của React, giúp bạn xây dựng giao diện người dùng mạnh mẽ và linh hoạt. Hiểu rõ về cách sử dụng props, state, và các phương thức vòng đời của component sẽ giúp bạn phát triển các ứng dụng React một cách hiệu quả. Hãy tận dụng các tính năng của React như Context API và phân chia rõ ràng giữa Presentational và Container Component để tối ưu hóa mã nguồn và tăng tính tái sử dụng.
Tham Khảo
- React Documentation
- MDN Web Docs on React
- FreeCodeCamp Guide to React Components
- Context API in React
- Using Hooks in React
