Ví dụ không trạng thái
Thành phần đầu tiên của chúng ta trong ví dụ sau là Ứng dụng . Thành phần này là chủ sở hữu của Header và Content . Chúng tôi đang tạo Tiêu đề và Nội dung riêng biệt và chỉ thêm nó vào bên trong cây JSX trong thành phần Ứng dụng của chúng tôi . Chỉ thành phần Ứng dụng cần được xuất.
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
export default App;
Để có thể hiển thị điều này trên trang, chúng ta cần nhập nó vào tệp main.js và gọi reactDOM.render () . Chúng tôi đã làm điều này trong khi thiết lập môi trường.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
Đoạn mã trên sẽ tạo ra kết quả sau.
Ví dụ về trạng thái
Trong ví dụ này, chúng tôi sẽ đặt trạng thái cho thành phần chủ sở hữu ( Ứng dụng ). Thành phần Header chỉ được thêm vào giống như trong ví dụ trước vì nó không cần bất kỳ trạng thái nào. Thay vì thẻ nội dung, chúng tôi đang tạo các phần tử bảng và tbody , nơi chúng tôi sẽ tự động chèn TableRow cho mọi đối tượng từ mảng dữ liệu .
Có thể thấy rằng chúng ta đang sử dụng cú pháp mũi tên (=>) của EcmaScript 2015 trông gọn gàng hơn nhiều so với cú pháp JavaScript cũ. Điều này sẽ giúp chúng tôi tạo các phần tử của mình với ít dòng mã hơn. Nó đặc biệt hữu ích khi chúng ta cần tạo một danh sách với rất nhiều mục.
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person} />)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
Lưu ý – Lưu ý rằng chúng ta đang sử dụng hàm key = {i} bên trong map () . Điều này sẽ giúp React chỉ cập nhật các phần tử cần thiết thay vì hiển thị lại toàn bộ danh sách khi có điều gì đó thay đổi. Đó là một sự tăng hiệu suất rất lớn cho số lượng lớn hơn các phần tử được tạo động.
