Nếu bạn đã học ReactJS hay React Native, bạn sẽ gặp những khái niệm Props và State rất nhiều .
Nhưng bạn đã thực sự hiểu props là gì ? State là gì chưa ? Khi nào thì sử dụng Props ? Khi nào cần tới State ?
Khi mình mở màn làm dự án Bất Động Sản React Native, trong khi trước đó không hề có kỹ năng và kiến thức về ReactJS, mình đã mất một khoảng chừng thời hạn để hiểu rõ hai khái niệm này. Giống hệt cái cảm xúc như hồi tiếp xúc với Promise trong Javascript vậy ( ^ _ ^ ) .
🔥 Kể chuyện đêm khuya: Lập trình React Native – Tâm sự của người mới học React Native
Để tránh đi vào “ vết xe đổ ” của mình khi học React Native. Mình sẽ đơn giản hóa hai khái niệm Props và State cho những bạn dễ hiểu .
Props là gì ?
Props thực chất là viết tắt của Properties.
Bạn tưởng tượng Props giống như những attribute của thẻ HTML vậy .
Ví dụ đoạn mã HTML sau :
Các attribute như src, width, height cũng có thể coi là props của thẻ
Props là cách để bạn hoàn toàn có thể truyền tài liệu từ component cha xuống component con .
Khi truyền tài liệu qua props, component con chỉ được đọc, không hề đổi khác tài liệu đó. Nhờ đó mà component được sử dụng ở bất kể đâu cũng luôn hiển thị cùng 1 đầu ra khi có cùng 1 giá trị nguồn vào. Điều này giúp chúng ra thuận tiện trấn áp Component hơn .
Ví dụ cách sử dụng Props :
class HelloWorld extends React.Component { render() { return ; } }
const element = ;
Khi nào sử dụng Props ?
Khi nào bạn cần truyền tài liệu từ component cha xuống component con, lúc đó cần sử dụng Props .
🙆 Tìm hiểu kỹ hơn về React Native Component
Mình ví dụ đơn thuần dưới đây để thấy cách sử dụng những props để truyền tài liệu :
// Parent
export default class WelcomeScreen extends React.Component { render () { return ( ) }
}
// Child component
export default class Heading extends React.Component { render () { return ( {this.props.message} ) }
}
Heading.propTypes = { message: PropTypes.string
}
Heading.defaultProps = { message: 'Heading One'
}
Giải thích Props
Trong ví dụ trên, chúng ta có một component Heading, với một props là message. Vì vậy, khi bạn cần sử dụng Heading component (ví dụ như ở màn hình WelcomeScreen), chúng ta chỉ cần truyền giá trị vào message là được:
Lưu ý rằng: Heading component có thể được sử dụng nhiều lần ở nhiều nơi, với các giá trị khác nhau truyền vào props message.
Heading component hoàn toàn có thể được sử dụng nhiều lần ở nhiều nơi, với những giá trị khác nhau truyền vào props
Nhớ rằng, không nên sửa đổi giá trị Props message bên trong component Heading. Ở đây, chúng ta chỉ đọc và in ra màn hình giá trị của props message mà thôi.
Trong trường hợp bản thân một component nhận dữ liệu trực tiếp từ người dùng thì sao? Ví dụ như nhập dữ liệu thông qua các input field. Đây là lúc nghĩ tới sử dụng State.
State là gì ?
State hoạt động giải trí khác với Props. State là đối tượng người dùng thành phần của component, trong khi những props được truyền giá trị từ bên ngoài vào component đó .
Trong ReactJS và React Native, State được sử dụng trong những component để lưu thông tin .
Không cập nhật giá trị của state trực tiếp bằng cách sử dụng this.state. Bạn được khuyến cáo luôn sử dụng hàm setState để cập nhật state.Tại sao lại như vậy?
Bởi vì, khi sử dụng hàm setState() để thay đổi giá trị State, React sẽ cập nhật cây DOM một cách tự động. Bạn không phải lo lắng về việc phải thêm viết thêm xử lý sự kiện nữa.
Lưu ý: Giá trị của State chỉ được thay đổi bởi chính Component khai báo state đó. Các component con không thể thay đổi giá trị state đó được.
Ví dụ về State :
export default TodoApp;
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class App extends Component { state = { myState: 'This is a text component, created using state data. It will change or updated on clicking it.' } updateState = () => this.setState({ myState: 'The state is updated' }) render() { return ( {this.state.myState} ); }
}
Vậy khi nào State được sử dụng ?
Bất cứ khi nào tài liệu trong một component cần biến hóa, State hoàn toàn có thể được sử dụng .
Sự tương tác của người dùng với những component là những ví dụ về cách hoạt động giải trí của state. Như click những button, tick vào checkbox, điền những biểu mẫu … là những ví dụ về sự tương tác của người dùng .
Nếu bạn điền một form gồm những text input field, mỗi field trong form sẽ giữ lại trạng thái của nó dựa trên tài liệu nguồn vào của người dùng .
Nếu nguồn vào biến hóa, trạng thái của những text input sẽ đổi khác. Đây là nguyên do cần re-rendering của component và tổng thể những component con của nó .
🔥 Đừng bỏ lỡ: Tải miễn phí sách Fullstack React Native (giá thị trường là 200$)
State sử dụng như nào ?
Hãy xem đoạn code bên dưới để hiểu rõ hơn cách state hoạt động giải trí như thế nào trong một Form .
class Form extends React.Component { constructor (props) { super(props) this.state = { input: '' } }
handleChangeInput = (text) => { this.setState({ input: text }) } render () { const { input } = this.state return ( ) } }
Trong đoạn code trên, bạn có thể thấy một Form component khai báo state với một key là input.
Form này hiển thị một text input field để người dùng nhập. Mỗi khi người dùng nhập văn bản, onChangeText được kích hoạt, lần lượt gọi setState để thay đổi giá input trong state.
setState kích hoạt re-rendering lại component, và giao diện người dùng (UI) bây giờ được cập nhật với thông tin mới nhất được nhập từ người dùng.
Tip: Nếu bạn không muốn component render lại DOM khi thay đổi của state, bạn có thể sử dụng phương thức shouldComponentUpdate()
Đến đây bạn đã hiểu rõ Props và State là gì rồi đúng không ?
Mình rất muốn nghe quan điểm của bạn về yếu tố này. Nhân tiện, trong bài viết có sử dụng khái niệm như component, đây là một khái niệm quan trọng và mình đã trình diễn ở bài viết : Tìm hiểu Component trong React Native
