- vừa được xem lúc

Props và state trong reactjs

0 0 15

Người đăng: LongNguyen

Theo Viblo Asia

Hi anh em, cuối tuần chúc anh em vui vẻ và sức khỏe. Hôm nay mình sẽ giới thiệu về props và state trong reactjs. Không để anh em chờ lâu, cùng bắt đầu vào bài viết nào. Bài viết này mình sẽ nói về định nghĩa, cách sử dụng và đưa ra ví dụ đơn giản về props và state.

1. Props

  • Props là dữ liệu truyền từ component cha xuống component con và chỉ có thể chỉnh sửa ở component cha. Trong component con, props là chỉ đọc (read-only) và không thể thay đổi giá trị của nó.
function Card(props) { return ( <div className="card"> <img src={props.image} alt={props.title} /> <h2>{props.title}</h2> <p>{props.description}</p> </div> );
} function App() { return ( <div> <Card title="Card 1" description="This is the first card." image="https://example.com/card1.jpg" /> <Card title="Card 2" description="This is the second card." image="https://example.com/card2.jpg" /> </div> );
} ReactDOM.render(<App />, document.getElementById('root')); 
  • Props là viết tắt của "properties" (tính chất, thuộc tính) và là một object chứa các thông tin dữ liệu. Dữ liệu này có thể là number, string, array, object, list...

2. Khai báo props và kiểm tra dữ liệu của props

  • Để khai báo props, ta thêm một đối tượng props vào tham số của hàm render của component đó. Ví dụ:
function MyComponent(props) { return <h1>Hello, {props.name}!</h1>;
}
  • Để kiểm tra dữ liệu của props ta dùng PropTypes. Ví dụ như ta có yêu cầu name bắt buộc phải có trong props thì ta làm như sau => nếu name không có thì ta sẽ có cảnh báo trong console.
import PropTypes from 'prop-types'; function MyComponent(props) { return <h1>Hello, {props.name}!</h1>;
} MyComponent.propTypes = { name: PropTypes.string.isRequired
}; 
  • Sử dụng defaultProps để định nghĩa giá trị mặc định cho props. Ví dụ:
function MyComponent(props) { return <h1>Hello, {props.name}!</h1>;
} MyComponent.defaultProps = { name: 'Reactjs'
};

3. State

  • State là một đối tượng dùng cho những dữ liệu thay đổi. State được tạo ra và quản lý bởi component hiện tại.
  • Khi state thay đổi, React sẽ tự động cập nhật component và render lại với state mới.
import React, { useState } from 'react'; function MyComponent() { const [color, setColor] = useState('red'); const handleClick = () => { const newColor = color === 'red' ? 'blue' : 'red'; setColor(newColor); }; return ( <div style={{ backgroundColor: color }}> <h1>Hello world!</h1> <button onClick={handleClick}>Change color</button> </div> );
}
  • Ta sử dụng useState để khởi tạo giá trị ban đầu cho state color là red. Khi click vào button Change Color thì ta sẽ xử lý sự kiện click và gọi tới SetColor để set lại state mới và component sẽ render lại với state color mới.

4. So sánh Props và state.

  • Nhìn vào hình trên ta thấy props được sử dụng để truyền dữ liệu từ component cha xuống component con và props không thể thay đổi giá trị ở component con.
  • State là các giá trị được lưu trữ bên trong một component và có thể được thay đổi bởi component đó. State có thể được sử dụng để lưu trữ các giá trị tạm thời, trạng thái hiện tại của component.
  • Ngoài ra để truyền dữ liệu giữa các trang ta có thể dùng redux. Phần này mình sẽ nói ở bài viết khác.

5. Tổng kết

  • Qua bài viết này hy vọng mọi người hiểu được cơ bản cách sử dụng props và state trong reactjs.
  • Cảm ơn mọi người đã xem bài viết. Chúc mọi người một cuối tuần vui vẻ. Nếu có thắc mắc về các phần trong bài này mọi người có thể inbox qua facebook:https://www.facebook.com/FriendsCode-108096425243996 Mình sẽ giải đáp thắc mắc trong tầm hiểu biết. Cảm ơn mọi người!
  • Hoặc liên hệ mình qua facebook cá nhân: https://www.facebook.com/Flamesofwars/

6. Tham khảo

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 81

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 106

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 41

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 36

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 38

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 67