Trong React, state là các thành phần để xây dựng nên một component.
State là nơi lưu trữ data trong ReactJs. Khi lập trình chúng ta nên đơn giản hóa state hết mức có thể và hạn chế số lượng components chứa state. Ví dụ nếu chúng ta có 10 components muốn có data từ state, chúng ta nên tạo một component và chứa state của 10 components kia.Các bạn xem ví dụ dưới đây về 1 component chứa state sử dụng EcmaScript2016 syntaxlưu lưu trữ các giá trị của component, khi state thay đổi thì component cũng được render lại.
App.js
| Code Block | ||
|---|---|---|
| ||
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from state...",
content: "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
|
Và ta được kết quả là:
...
Props:
Trong ReactJs ngoài state ra còn 1 hình thức lưu giữ data nữa đó là props, vậy props khác state như thế nào? Hiểu đơn giản là state thuộc về component, bạn có thể update, chỉnh sửa state, còn props cũng lưu dữ liệu như state nhưng được nhận từ component cha truyền xuống, bạn không thể chỉnh sửa trực tiếp props mà phải thay đổi từ cha nó. Bạn xem ví dụ sau để hiểu rõ hơn:
App.js
| Code Block | ||
|---|---|---|
| ||
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
export default App;
|
index.js
| Code Block | ||
|---|---|---|
| ||
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
from props..."/>, document.getElementById('root'));
export default App;
|
Nếu bạn so sánh App.js với bài State, bạn sẽ thấy giờ đây App không còn state để giữ data để truyền vào 2 thẻ h1,h2 nữa mà thay vào đó lấy từ props. Kết quả hiển thị vẫn giống State:
...
Default Props¶
Bạn có thể set default props cho component thay vì phải truyền vào lúc ReactDom.render()
App.js
| Code Block | ||
|---|---|---|
| ||
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
App.defaultProps = {
headerProp: "Header from props...",
contentProp:"Content from props..."
}
export default App;
|
index.js
| Code Block | ||
|---|---|---|
| ||
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App/>, document.getElementById('root'));
|
State and Props¶
Ví dụ dưới đây sẽ hướng dẫn bạn cách sử dụng state và props cùng với nhau. Chúng ta sẽ khởi tạo state trong component cha và chuyền nó xuống các components con thông qua props.
App.js
| Code Block | ||
|---|---|---|
| ||
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from stateprops...",
content: "Content from stateprops..."
}
}
render() {
return (
<div>
<h1><Header headerProp = {this.state.header}/>
<Content contentProp = {this.state.content}/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>{this.stateprops.contentcontentProp}</h2>
</div>
);
}
}
export default App;
|
index.js
| Code Block | ||
|---|---|---|
| ||
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App/>, document.getElementById('root')); |
Và ta được kết quả làvẫn không đổi:
...
...