State là một cấu trúc có thể cập nhật được dùng để chứa dữ liệu hoặc thông tin về thành phần và có thể thay đổi theo thời gian. Sự thay đổi state có thể xảy ra dưới dạng phản hồi đối với hành động của người dùng hoặc events hệ thống. Nó là trung tâm của thành phần phản ứng, xác định hành vi của thành phần và cách nó sẽ hiển thị. Một state phải được giữ càng đơn giản càng tốt. Nó đại diện cho state hoặc thông tin cục bộ của thành phần. Nó chỉ có thể được truy cập hoặc sửa đổi bên trong thành phần hoặc bởi thành phần trực tiếp.
Khái niệm về State và Props trong React
State và Props là hai khái niệm quan trọng trong React, được sử dụng để quản lý và truyền dữ liệu giữa các thành phần trong ứng dụng React.
State
State cũng là một khái niệm quan trọng trong ReactJS. State lưu trữ dữ liệu động của một component. State cho phép một component theo dõi thông tin thay đổi giữa các lần render và làm cho component có khả năng tương tác.
State chỉ có thể được sử dụng bên trong component mà nó thuộc về. Nếu bạn dự định một component cần quản lý state, thì component đó nên được tạo dưới dạng class component chứ không phải là function component.
Để minh họa cách sử dụng state, chúng ta có ví dụ sau:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
Trong ví dụ này:
- Component “Clock” khởi tạo và khởi tạo state với thuộc tính “date” là thời gian hiện tại.
- Sau khi component được khởi tạo, phương thức “componentDidMount” được gọi và tạo một interval để cập nhật state mỗi giây.
- Khi interval chạy, state sẽ được cập nhật bằng phương thức “this.setState”, và khi state thay đổi, component sẽ tự động render lại để hiển thị thời gian mới nhất.
- Trước khi rời khỏi trang, phương thức “componentWillUnmount” sẽ chạy để dừng interval.
Các thành phần State in React rất cần thiết để quản lý và giao tiếp dữ liệu trong ứng dụng của bạn. Nó được biểu diễn dưới dạng một đối tượng JavaScript và có phạm vi cấp thành phần , nó có thể được coi là dữ liệu riêng tư của component của bạn.
Trong ví dụ dưới đây chúng ta định nghĩa một số trạng thái ban đầu trong constructor của các component và tận dụng nó trong render function
class ExampleComponent extends React.Component {
constructor(props){
super(props);
// thiết lập trạng thái ban đầu
this.state = {
greeting: 'Hiya Buddy!'
};
}
render() {
// chúng ta có thể truy cập hệ thống bằng this.state
return(
<div>{this.state.greeting}</div>
);
}
Common Antipattern
Chúng ta không nên lưu props trong state. Nó được coi là 1 anti-pattern. Ví dụ:
export default class MyComponent extends React.Component {
constructor() {
super();
this.state = {
url: ''
}
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({
url: this.props.url + '/days=?' + e.target.value
});
}
componentWillMount() {
this.setState({url: this.props.url});
}
render() {
return (
<div>
<input defaultValue={2} onChange={this.onChange} />
URL: {this.state.url}
</div>
)
}
} Prop url được lưu trong state và sau đó được sửa đổi. Thay vào đó, hãy lựa chọn lưu các thay đổi cho state và xây dựng đường dẫn đầy đủ bằng cách sử dụng state và props:
export default class MyComponent extends React.Component {
constructor() {
super();
this.state = {
days: ''
}
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({
days: e.target.value
});
}
render() {
return (
<div>
<input defaultValue={2} onChange={this.onChange} />
URL: {this.props.url + '/days?=' + this.state.days}
</div>
)
}
} Điều này là do trong một ứng dụng React, chúng ta muốn có một source duy nhất – tức là tất cả dữ liệu thuộc trách nhiệm của một component duy nhất và chỉ một component. Component này có trách nhiệm lưu trữ dữ liệu trong state của nó và phân phối dữ liệu đến các components khác thông qua props.
Trong ví dụ đầu tiên, cả class MyComponent và lớp cha của nó đều đang duy trì ‘url’ trong state của chúng. Nếu chúng ta cập nhật state.url trong MyComponent, những thay đổi này sẽ không được phản ánh trong trang gốc. Chúng ta đã đánh mất source duy nhất của mình và ngày càng khó theo dõi luồng dữ liệu thông qua ứng dụng. Đối chiếu điều này với ví dụ thứ hai – url chỉ được duy trì ở trạng thái của parent component và được sử dụng làm prop trong MyComponent – do đó chúng tôi duy trì một source duy nhất.
Sử dụng setState()
Cách chính để bạn thực hiện cập nhật giao diện người dùng cho các ứng dụng React của mình là thông qua lệnh gọi hàm setState () . Hàm này sẽ thực hiện shallow merge giữa trạng thái mới mà bạn cung cấp và trạng thái trước đó, đồng thời sẽ kích hoạt re-render của component và tất cả các decedents.
Thông số
- updater : Nó có thể là một đối tượng có một số cặp khóa-giá trị cần được hợp nhất vào trạng thái hoặc một hàm trả về một đối tượng.
- callback ( tùy chọn ) : một hàm sẽ được thực thi sau khi setState () được thực thi thành công. Thực tế là các lệnh gọi setState () không được React đảm bảo là nguyên tử, điều này đôi khi có thể hữu ích nếu bạn muốn thực hiện một số hành động sau khi khẳng định rằng setState () đã được thực thi thành công.
Sử dụng:
Phương thức setState chấp nhận 1 đối số của trình cập nhật, có thể có 1 đối tượng có 1 số cặp khóa- giá trị cần được hợp nhất vào trạng thái, hoặc 1 hàm trả về một đối tượng, như vậy tính từ prevState và props
Using setState() với Object as updater
// ví dụ về ES6 style component, cập nhật trạng thái chỉ bằng 1 lần nhấp vào button// đồng thời chứng minh nơi có thể đặt state trực tiếp và nới setState nên được sử dụng. //
class Greeting extends React.Component {
constructor(props) {
super(props);
this.click = this.click.bind(this);
// đặt trạng thái ban đầu (chỉ được cấp phép trong CONSTRUCTOR)
this.state = {
greeting: 'Hello!'
};
}
click(e) {
this.setState({
greeting: 'Hello World!'
});
}
render() {
return(
<div>
<p>{this.state.greeting}</p>
<button onClick={this.click}>Click me</button>
</div>
);
}
} // điều này thường được sử dụng nhất khi bạn muốn kiểm tra hoặc sử dụng
// trạng thái trước khi cập nhật.
//
// điều này thường được sử dụng nhất khi bạn muốn kiểm tra hoặc sử dụng
// trạng thái trước khi cập nhật.
//
this.setState(function(previousState, currentProps) {
return {
counter: previousState.counter + 1
};
});
Điều này có thể an toàn hơn so với việc sử dụng một đối số đối tượng trong đó nhiều lệnh gọi đến setState () để sử dụng, vì nhiều lệnh gọi có thể được React ghép nối với nhau và được thực thi cùng một lúc và là cách tiếp cận được ưa thích khi sử dụng các props hiện tại để thiết lập trạng thái.
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 }); Các lệnh gọi này có thể được React kết hợp với nhau bằng Object.assign(), dẫn đến bộ đếm được tăng lên 1 thay vì 3.
Cách tiếp cận chức năng cũng có thể được sử dụng để di chuyển logic thiết lập trạng thái ra bên ngoài các components. Điều này cho phép cô lập và sử dụng lại logic trạng thái.
// bên ngoài lớp component, có khả năng nằm trong file/module khác
function incrementCounter(previousState, currentProps) {
return {
counter: previousState.counter + 1
};
}
//Ở trong component
this.setState(incrementCounter);
Calling setState() with an Object and a callback function
//
// 'Hi There' sẽ được đăng nhập vào bảng điều khiển sau khi setState hoàn tất
//
this.setState({ name: 'John Doe' }, console.log('Hi there')); State, Events và Managed Controls
Đây là một ví dụ về thành phần React với trường đầu vào “được quản lý”. Bất cứ khi nào giá trị của trường đầu vào thay đổi, một trình xử lý sự kiện được gọi để cập nhật trạng thái của component với giá trị mới của trường đầu vào. Lệnh gọi setState trong trình xử lý sự kiện sẽ kích hoạt lệnh gọi để render cập nhật component trong dom.
import React from 'react';
import {render} from 'react-dom';
class ManagedControlDemo extends React.Component {
constructor(props){
super(props);
this.state = {message: ""};
}
handleChange(e){
this.setState({message: e.target.value});
}
render() {
return (
<div>
<legend>Type something here</legend>
<input
onChange={this.handleChange.bind(this)}
value={this.state.message}
autoFocus />
<h1>{this.state.message}</h1>
</div>
);
}
}
render(<ManagedControlDemo/>, document.querySelector('#app')); Điều rất quan trọng cần lưu ý là hành vi thời gian chạy. Mỗi khi người dùng thay đổi giá trị trong trường đầu vào handleChange sẽ được gọi và như vậy
- setState sẽ được gọi và như vậy
- render sẽ được gọi
Props
Props là viết tắt của “properties” và là một khái niệm quan trọng trong ReactJS. Props là một đối tượng, nó lưu trữ các giá trị của các thuộc tính (attributes) của một thẻ (tag). Props cho phép các component nhận dữ liệu từ bên ngoài và cũng là cách các component có thể trò chuyện với nhau.
Props được sử dụng để truyền dữ liệu và phương thức từ component mẹ sang component con. Những điều thú vị sau về props:
- Chúng là bất biến
- Chúng cho phép tạo ra các components có thể tái sử dụng
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="ReactJS" />;
ReactDOM.render(
element,
document.getElementById('root')
);
Trong ví dụ này, “name” ở {props.name} là một prop, “Welcome” là một component. Mỗi prop của component tương ứng với một thuộc tính của thẻ, và giá trị của thuộc tính đó được truyền vào prop của component.
Chúng ta sử dụng props để truyền dữ liệu đến các component. Mọi component trong ReactJS được xem như là hàm javascript thuần khiết (pure function), và props tương ứng với các tham số của hàm javascript thuần khiết. Props không thể thay đổi sau khi đã được thiết lập.
State và Props có vai trò quan trọng trong việc quản lý dữ liệu và tương tác giữa các thành phần trong ứng dụng React. State được sử dụng để lưu trữ dữ liệu nội bộ và quản lý trạng thái của thành phần, trong khi Props được sử dụng để truyền dữ liệu từ thành phần cha xuống thành phần con. Việc hiểu và sử dụng State và Props đúng cách sẽ giúp bạn xây dựng các thành phần linh hoạt và dễ bảo trì trong ứng dụng React.
Xem thêm State trong React
- Default Props
Defaultprops cho phép bạn thiết lập giá trị mặc định hoặc dự phòng cho các prop của component. Điều này hữu ích khi bạn sử dụng các component từ các loại xem khác nhau với các prop cố định, nhưng ở một số loại xem, bạn có thể cần truyền giá trị khác nhau.
Cú pháp:
// Cấu trúc ES5
var MyClass = React.createClass({
getDefaultProps: function() {
return {
randomObject: {},
// ...
};
}
}
// Cấu trúc ES6
class MyClass extends React.Component {...}
MyClass.defaultProps = {
randomObject: {},
// ...
}
// Cấu trúc ES7
class MyClass extends React.Component {
static defaultProps = {
randomObject: {},
// ...
};
}Kết quả của getDefaultProps() hoặc defaultProps sẽ được lưu vào bộ nhớ cache và sử dụng để đảm bảo rằng this.props.randomObject sẽ có giá trị nếu không được chỉ định bởi component mẹ.
- PropTypes
PropTypes cho phép bạn chỉ định các prop mà component của bạn cần. Mặc dù component có thể hoạt động mà không cần đặt propTypes, nhưng việc xác định chúng giúp làm cho component của bạn dễ đọc hơn và cung cấp thông tin cho các nhà phát triển khác đang đọc mã của bạn.
Một số propTypes thường được sử dụng:
optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol
Nếu bạn sử dụng isRequired với bất kỳ propType nào, prop đó phải được cung cấp khi tạo một phiên bản của component. Nếu không cung cấp propTypes cần thiết, bạn sẽ không thể tạo component.
Cú pháp:
// Cú pháp ES5
var MyClass = React.createClass({
propTypes: {
randomObject: React.PropTypes.object,
callback: React.PropTypes.func.isRequired,
// ...
}
}
// Cú pháp ES6
class MyClass extends React.Component {...}
MyClass.propTypes = {
randomObject: React.PropTypes.object,
callback: React.PropTypes.func.isRequired,
// ...
};
// Cú pháp ES7
class MyClass extends React.Component {
static propTypes = {
randomObject: React.PropTypes.object,
callback: React.PropTypes.func.isRequired,
// ...
};
}- Xác định Props
Tương tự, PropTypes cho phép bạn xác định các props. Ví dụ:
// Xác định đối tượng
randomObject: React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
text: React.PropTypes.string,
}).isRequired,
// Xác thực trên mảng đối tượng
arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
text: React.PropTypes.string,
})).isRequired,
// ...- Chuyển xuống Props bằng toán tử spread
Thay vì:
var component = <Component foo={this.props.x} bar={this.props.y} />;Bạn có thể sử dụng toán tử spread ... để chuyển xuống tất cả các giá trị:
var component = <Component {...props} />;Lưu ý rằng thứ tự là quan trọng, và các prop sau đó sẽ ghi đè các prop trước đó.
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'- Props.children và Kết hợp Component
Các components “con” của một component có sẵn qua prop props.children. Điều này giúp “kết hợp” các components với nhau và làm cho JSX trở nên trực quan hơn.
var SomeComponent = function () {
return (
<article className="textBox">
<header>{this.props.heading}</header>
<div className="paragraphs">
{this.props.children}
</div>
</article>
);
}Prop props.children có thể được điều khiển bởi component và React cung cấp các hàm tiện ích dưới dạng React.Children.
- Loại Components con
Đôi khi, biết loại component con khi lặp qua chúng có thể thực sự hữu ích. Để làm điều này, bạn có thể sử dụng React.Children.map:
React.Children.map(this.props.children, (child) => {
if (child.type === MyComponentType) {
// ...
}
});Đối tượng con hiển thị thuộc tính kiểu, mà bạn có thể so sánh với một loại component cụ thể.
Truyền và truy cập Props
Chúng tôi có thể chuyển các Props cho bất kỳ component nào khi chúng tôi khai báo các thuộc tính cho bất kỳ thẻ HTML nào. Hãy xem đoạn mã dưới đây:
<DemoComponent sampleProp = "Demo Props" />
Trong đoạn mã trên, chúng tôi đang chuyển một phần mềm có tên là sampleProp tới component có tên DemoComponent. Giá trị này có giá trị “Demo Props”. Bây giờ chúng ta hãy xem làm thế nào chúng ta có thể truy cập các Props này.
Chúng tôi có thể truy cập bất kỳ Props nào bên trong từ lớp của component mà Props được chuyển đến. Các Props có thể được truy cập như hình dưới đây:
this.props.propName;
Chúng tôi có thể truy cập bất kỳ phần mềm hỗ trợ nào từ bên trong lớp của một component bằng cách sử dụng cú pháp trên. ‘This.props’ là một loại đối tượng toàn cục lưu trữ tất cả các Props component. PropName, đó là tên của các Props là chìa khóa của đối tượng này.
Truyền Props thông qua Class
Dưới đây là một chương trình mẫu để minh họa cách chuyển và truy cập các Props từ một component:
import React from 'react';
import ReactDOM from 'react-dom';
// Ví dụ về DEmo Component
class Component extends React.Component{
render(){
return(
<div>
{/*truy cập vào props */}
<h2>Hello {this.props.user}</h2>
<h3>Welcome websitehcm.com</h3>
</div>
);
}
}
ReactDOM.render(
// truyền thông tin Props
<DemoComponent user = "websitehcm" />,
document.getElementById("root")
);Trong ví dụ trên, chúng tôi đã sử dụng một component dựa trên lớp để minh họa các Props. Nhưng chúng ta có thể chuyển các Props cho một component dựa trên hàm giống như chúng ta đã làm trong ví dụ trên.
Xem thêm CSS trong React
Nhưng để truy cập một chỗ dựa từ một hàm, chúng ta không cần sử dụng từ khóa ‘this’ nữa. Các component chức năng chấp nhận Props làm tham số và có thể được truy cập trực tiếp.
Truyền Props thông qua function
Dưới đây là ví dụ tương tự như trên nhưng lần này sử dụng một component dựa trên function thay vì một component dựa trên class.
Mở dự án phản ứng của bạn và chỉnh sửa tệp App.js trong thư mục src:
import React from 'react';
import ReactDOM from 'react-dom';
// functional Demo component
function DemoComponent(props){
return(
<div>
{/*truy cập thông tin thông qua tham số hàm*/}
<h2>Hello {props.user}</h2>
<h3>Welcome to websitehcm.com</h3>
</div>
);
}
ReactDOM.render(
// gửi thông tin props
<DemoComponent user = "websitehcm" />,
document.getElementById("root")
);
Đầu ra của chương trình này sẽ giống như đầu ra của chương trình trên. Sự khác biệt duy nhất là chúng tôi đã sử dụng một component dựa trên function thay vì một component dựa trên Class.
Xem thêm Điều kiện Rendering trong react
Truyền thông tin từ component này sang component khác
Đây là một trong những tính năng thú vị nhất của React. Chúng ta có thể tạo ra các component để tương tác với nhau. Chúng tôi sẽ xem xét hai component Parent và Child để giải thích điều này.
Chúng tôi sẽ chuyển một số thông tin làm Props từ component Gốc của chúng tôi sang component Con. Chúng tôi có thể chuyển bao nhiêu Props tùy thích cho một component.
Nhìn vào đoạn mã dưới đây:
import React from 'react';
import ReactDOM from 'react-dom';
// Class Parent Component
class Parent extends React.Component{
render(){
return(
<div>
<h2>Thông tin trong class Parent</h2>
<Child name="User" userId = "5555"/>
</div>
);
}
}
// Class Child Component
class Child extends React.Component{
render(){
return(
<div>
<h2>Hello, {this.props.name}</h2>
<h3>Thông tin trong class child</h3>
<h3>User id là gì: {this.props.userId}</h3>
</div>
);
}
}
ReactDOM.render(
// truyền thông tin Props
<Parent />,
document.getElementById("root")
);
Mở dự án của bạn và chỉnh sửa tệp App.js trong thư mục src:
Vì vậy, chúng ta đã thấy các Props trong React và cũng đã tìm hiểu về cách các Props được sử dụng, cách chúng có thể được chuyển cho một component, cách chúng được truy cập bên trong một component và hơn thế nữa.
Chúng tôi đã sử dụng “this.props.propName” rất thường xuyên trong kịch bản hoàn chỉnh này để truy cập các Props. Bây giờ chúng ta hãy kiểm tra những gì thực sự đang được lưu trữ trong này.
Chúng tôi sẽ console.log “this.props” trong chương trình trên bên trong component con và sẽ cố gắng quan sát những gì được đăng nhập vào bảng console. Dưới đây là chương trình đã sửa đổi với câu lệnh console.log ():
Mở dự án phản ứng của bạn và chỉnh sửa tệp App.js trong thư mục src:
import React from 'react';
import ReactDOM from 'react-dom';
// Class Parent Component
class Parent extends React.Component{
render(){
return(
<div>
<h2>Thông tin trong Parent component</h2>
<Child name="User" userId = "5555"/>
</div>
);
}
}
// Class Child Component
class Child extends React.Component{
render(){
console.log(this.props);
return(
<div>
<h2>Hello, {this.props.name}</h2>
<h3>Thông tin trong class child</h3>
<h3>Your user id is: {this.props.userId}</h3>
</div>
);
}
}
ReactDOM.render(
// passing props
<Parent />,
document.getElementById("root")
);
Bạn có thể thấy rõ trong hình trên rằng trong bảng điều khiển hiển thị rằng this.props là một đối tượng và nó chứa tất cả các Props được chuyển cho component con. Tên Props của component con là các khóa của đối tượng này và giá trị của chúng là giá trị của các khóa này. Vì vậy, rõ ràng là bây giờ bất kỳ thông tin nào được chuyển đến một component bằng cách sử dụng Props đều được lưu trữ bên trong một đối tượng.
Lưu ý: Props ở chế độ chỉ đọc. Chúng tôi không được phép sửa đổi nội dung của một chỗ dựa. Dù loại component là gì – theo chức năng hay dựa trên lớp, không ai trong số chúng được phép sửa đổi Props của chúng.
ReactJS Props Validator
Props là một cơ chế quan trọng để chuyển các thuộc tính chỉ đọc cho các thành phần React. Các props thường được yêu cầu sử dụng chính xác trong thành phần. Nếu nó không được sử dụng đúng cách, các thành phần có thể không hoạt động như mong đợi. Do đó, cần phải sử dụng xác nhận props để cải thiện các thành phần phản ứng.
Xác thực props là một công cụ sẽ giúp các nhà phát triển tránh được các lỗi và sự cố trong tương lai. Đó là một cách hữu ích để buộc sử dụng đúng các thành phần của bạn. Nó làm cho mã của bạn dễ đọc hơn. Các thành phần React đã sử dụng thuộc tính đặc biệt PropTypes giúp bạn bắt lỗi bằng cách xác thực các kiểu dữ liệu của các giá trị được chuyển qua các props, mặc dù không cần thiết phải xác định các thành phần bằng propTypes. Tuy nhiên, nếu bạn sử dụng propTypes với các thành phần của mình, nó sẽ giúp bạn tránh được các lỗi không mong muốn.
App.propTypes được sử dụng để xác thực props trong thành phần phản ứng. Khi một số props được chuyển với loại không hợp lệ, bạn sẽ nhận được cảnh báo trên bảng điều khiển JavaScript. Sau khi chỉ định các mẫu xác thực, bạn sẽ đặt App.defaultProps
| PropsType | Tác dụng |
| PropTypes.any | Đạo cụ có thể thuộc bất kỳ kiểu dữ liệu nào. |
| PropTypes.array | Các đạo cụ phải là một mảng. |
| PropTypes.bool | Đạo cụ phải là boolean. |
| PropTypes.func | Các đạo cụ phải là một chức năng. |
| PropTypes.number | Các đạo cụ phải là một con số. |
| PropTypes.object | Các đạo cụ nên là một đối tượng. |
| PropTypes.string | Các đạo cụ phải là một chuỗi. |
| PropTypes.symbol | Các đạo cụ nên là một biểu tượng. |
| PropTypes.instanceOf | Các đạo cụ phải là một phiên bản của một lớp JavaScript cụ thể. |
| PropTypes.isRequired | Các đạo cụ phải được cung cấp. |
| PropTypes.element | Đạo cụ phải là một phần tử. |
| PropTypes.node | Các đạo cụ có thể render bất cứ thứ gì: số, chuỗi, phần tử hoặc một mảng (hoặc phân fragments) có chứa các loại này. |
| PropTypes.oneOf() | Đạo cụ phải là một trong một số loại giá trị cụ thể. |
| PropTypes.oneOfType ([PropTypes.string, PropTypes.number]) | Các đạo cụ phải là một đối tượng có thể là một trong nhiều loại. |
Tại sao sử dụng Props trong ReactJS
Props trong ReactJS được sử dụng để truyền dữ liệu từ một component cha sang một component con. Điều này cho phép bạn tái sử dụng mã và giảm sự phức tạp của mã, vì bạn chỉ cần xác định giá trị của props trong component cha và truyền nó sang component con.
Ví dụ, nếu bạn muốn hiển thị tên của một người dùng trong một component, bạn có thể tạo ra một component cha với tên của người dùng là một prop, và truyền nó sang component con để hiển thị tên.
Trong tổng quan, sử dụng props trong ReactJS giúp bạn tái sử dụng mã và giảm sự phức tạp của mã, và cho phép bạn truyền dữ liệu từ component cha sang component con dễ dàng và một cách trực quan.
Ví dụ:
class Parent extends React.Component{
doSomething(){
console.log("Parent component");
}
render() {
return <div>
<Child
text="This is the child number 1"
title="Title 1"
onClick={this.doSomething} />
<Child
text="This is the child number 2"
title="Title 2"
onClick={this.doSomething} />
</div>
}
}
class Child extends React.Component{
render() {
return <div>
<h1>{this.props.title}</h1>
<h2>{this.props.text}</h2>
</div>
}
} Trong ví dụ trên, nhờ các props, chúng ta có thể tạo ra các components có thể tái sử dụng.
Sự khác nhau giữa State và Props
Props:
- Có thể nhận giá trị ban đầu từ component cha.
- Có thể thay đổi bởi component cha.
- Có thể set giá trị mặc định bên trong component.
- Không thể thay đổi bên trong component.
- Có thể set giá trị ban đầu cho các component con.
- Có thể thay đổi trong các component con.
State:
- Không thể nhận giá trị ban đầu từ component cha.
- Không thể thay đổi bởi component cha.
- Có thể set giá trị mặc định bên trong component.
- Có thể thay đổi bên trong component.
- Không thể set giá trị ban đầu cho các component con.
- Không thể thay đổi trong các component con.
Tóm lại, State và Props đóng vai trò quan trọng trong việc quản lý dữ liệu và tương tác giữa các thành phần trong ứng dụng React. State được sử dụng để lưu trữ và quản lý trạng thái của thành phần, trong khi Props được sử dụng để truyền dữ liệu từ thành phần cha xuống thành phần con.
Xem thêm State Management trong flutter
Quản lý State và Props trong ứng dụng React lớn
Trong ứng dụng React lớn, quản lý State và Props trở nên quan trọng để đảm bảo sự hiệu quả và quản lý dễ dàng. Dưới đây là một số lời khuyên để quản lý State và Props trong ứng dụng React lớn:
- Tổ chức thành phần (Component) theo cấu trúc phân cấp: Xác định các thành phần con và cha trong ứng dụng của bạn và xây dựng cấu trúc phân cấp dựa trên quan hệ này. Điều này giúp bạn xác định rõ ràng những thành phần nào cần truyền Props và quản lý State.
- Quản lý State tại mức cao nhất có thể: Trạng thái (State) cần được quản lý ở mức cao nhất có thể trong cấu trúc phân cấp của ứng dụng. Điều này giúp giảm sự phức tạp và đảm bảo sự nhất quán của dữ liệu trạng thái trong toàn bộ ứng dụng.
- Sử dụng Redux hoặc Context API: Đối với ứng dụng React lớn, sử dụng các thư viện quản lý trạng thái như Redux hoặc Context API có thể giúp bạn quản lý State và Props một cách hiệu quả. Điều này cho phép bạn lưu trữ và chia sẻ trạng thái ở mức ứng dụng và sử dụng chúng trong các thành phần một cách dễ dàng.
- Sử dụng prop-types: Đảm bảo kiểm tra kiểu dữ liệu của Props được truyền vào các thành phần. Sử dụng thư viện prop-types để định nghĩa kiểu dữ liệu và yêu cầu của Props, giúp phát hiện lỗi và cải thiện tính ổn định của ứng dụng.
- Sử dụng phương pháp truyền Props theo hướng dữ liệu (Data Down, Actions Up – DDAU): Theo phương pháp này, Props được truyền từ thành phần cha xuống thành phần con để cung cấp dữ liệu, trong khi các hành động (actions) được truyền từ thành phần con lên thành phần cha để thay đổi State. Điều này giúp giữ cho quy trình truyền Props và quản lý State trong ứng dụng rõ ràng và dễ hiểu.
- Tách các thành phần thành nhóm chức năng (Functional Grouping): Phân chia các thành phần thành nhóm chức năng tương tự nhau giúp giảm sự phức tạp và tăng tính tái sử dụng. Điều này giúp bạn quản lý State và Props theo nhóm chức năng, làm cho việc hiểu và duy trì ứng dụng dễ dàng hơn.
- Sử dụng các thư viện hỗ trợ: Trong quá trình phát triển ứng dụng React lớn, sử dụng các thư viện hỗ trợ như React Router, Redux Toolkit, hoặc MobX để giúp quản lý State và Props một cách hiệu quả và tiện lợi.
Lưu ý rằng quản lý State và Props trong ứng dụng React lớn là một quá trình liên tục và cần được điều chỉnh và cải thiện theo thời gian. Nắm vững các nguyên tắc và công cụ trong quá trình phát triển để đảm bảo ứng dụng của bạn có sự nhất quán, dễ bảo trì và tăng tính mở rộng.
