[React Native Cơ Bản] Bài 3 : props và state trong React native 36.0.0

Hi các em, trong bài tiếp theo này, chúng ta sẽ cùng tìm hiểu 2 khái niệm cơ bản đầu tiên cần biết khi lâp trình React Native là props và state.

  1. props là gì ?

props ( properties ) là các thuộc tính của đối tượng sử dụng trong React Native . hay chúng ta hiểu props tương đương như tham số của 1 phương thức hay hàm tạo trong class của Java . Tức là các thư viện của React Native sử dụng sẽ có những props để chúng ta sử dụng hoặc khi chúng ta định nghĩa 1 function mới, thì chúng ta cũng tự định nghĩa được các props

props sử dụng để truyền, hiển thị thông tin và ko sử dụng để cập nhật thông tin lên giao hiện hiển thị

Chúng ta sẽ làm rõ hơn về props trong 2 ví dụ sau :

1 . ví dụ hiển thị ảnh với đối tượng Image trong React Native sử dụng các props của Image

Trước hết, để sử dụng được Image, ta cần import thư viện ở dòng 2
Dòng 11 : khai báo thẻ Image với các ‘props’ là style để chỉnh kích thước
source để gán đường link cho ảnh .
Mọi đối tượng trong React Native đều được định nghĩa các props để tùy chỉnh.
Ví dụ : Chúng ta muốn biết React Native cung cấp những props để chỉnh sửa nào cho đối tượng Text ta chỉ cần tìm kiếm theo từ khóa “Text props React Native” sẽ được kết quả :

Tại cột Props bên phải . ta thấy rất nhiều thuộc tính để chỉnh sửa.
Tiêu biểu như color – chỉnh màu
fontSize – chỉnh kích thước
fontFamily – chỉnh font
fontStyle – chỉnh kiểu chữ in đậm, nghiêng …
Và nhiều các props khác.

2. Ví dụ tự khai báo Props.

Trong ví dụ này chúng ta sẽ khai báo thêm 1 function tên là Simple như sau (Bấm chuột phải vào cây thư mục chọn new file -> Simple.js)

Dòng 4 : khai báo thêm 1 tham số là props
Dòng 8 : Khai báo thẻ text hiển thị nội dung thì biến old. chứa trong props với cấu trúc {this.props.old}
Dòng 14,15 : tạm xóa thuộc tính flex : 1 (học ở bài sau)

Tại file App.js ta sửa như sau :

Dòng 3 : Thêm câu lệnh import file Simple mới tạo
Dòng 14 : Khai báo thẻ Simple với tham số (props) tự định nghĩa là ‘old‘ giá trị bằng 999

Khi chạy thử ta được kết quả chương trình vẽ function Simple với giá trị là biến old được truyền qua ‘props

Hooks

State là đối tượng dùng để điều khiển hiển thị nội dung hoặc cập nhật giá trị của 1 biến khi được hiển thị trên màn hình

Ở các phiên bản trước chúng ta thường sử dụng state và setState để thao tác
Tuy nhiên, bắt đầu từ phiên bản React Native 35.0.0 chúng ta sẽ sử dụng 1 khái niệm tương tự state là hookuseState

Trong ví dụ này, chúng ta sẽ thực hiện 1 chức năng đơn giản như sau :
Tạo 1 nút ấn với sự kiện click thay đổi giá trị của biến đã khai báo trước đó và cập nhật lên màn hình

Để sử dụng hooks chúng ta khai báo lần lượt như sau :

Dòng 1 : import thư viện useState

Dòng 8 : khai báo 1 biến state tên là name với phương thức setName để cập nhật dữ liệu như cấu trúc const[name,setName]=useState(‘Huy QQQ’);

Dòng 16 : Khai báo Button với sự kiện onPress cập nhật giá trị cho biến name

Kết quả khi nhấn Nút Ok, giá trị của name thay đổi, đồng thời chương trình cũng tự động cập nhật giá trị mới và hiển thị lên màn hình

useEffect

useEffect là phương thức React gọi vào sau mỗi lần chạy render. Phương thức này tương tự componentDidMountcomponentDidUpdate, và componentWillUnmount

Khai báo thêm useEffect với hàm alert, mỗi lần chương trình chạy xong phần return sẽ chạy tới hàm useEffect