prop là gì

Nếu các bạn vẫn học tập ReactJS hoặc React Native, các bạn sẽ gặp gỡ những định nghĩa Props và State thật nhiều.

Bạn đang xem: prop là gì

Nhưng các bạn vẫn thực sự hiểu props là gì? State là gì chưa? Khi nào là thì dùng Props? Khi nào là cần thiết cho tới State?

Khi bản thân chính thức thực hiện dự án công trình React Native, trong những khi trước bại ko hề với kỹ năng và kiến thức về ReactJS, tôi đã rơi rụng một khoảng tầm thời hạn nhằm làm rõ nhị định nghĩa này. Giống hệt loại cảm hứng như hồi xúc tiếp với Promise nhập Javascript vậy (^_^).

🔥 Kể chuyện tối khuya: Lập trình React Native – Tâm sự của những người mới mẻ học tập React Native

Để rời lên đường nhập “vết xe cộ đổ” của tớ lúc học React Native. Mình tiếp tục đơn giản và giản dị hóa nhị định nghĩa Props và State mang lại chúng ta dễ nắm bắt.

Props là gì?

Props thực tế là viết lách tắt của Properties.

Bạn tưởng tượng Props như là giống như các attribute của thẻ HTML vậy.

Ví dụ đoạn mã HTML sau:

<img src="img_girl.jpg" width="500" height="600">

Các attribute như src, width, height cũng hoàn toàn có thể xem là props của thẻ <img>

Props là phương pháp để chúng ta cũng có thể truyền tài liệu kể từ component phụ vương xuống component con cái.

Khi truyền tài liệu qua quýt props, component con cái chỉ được hiểu, ko thể thay cho thay đổi tài liệu bại. Nhờ này mà component được dùng ở ngẫu nhiên đâu cũng luôn luôn hiển thị nằm trong 1 Output Khi với nằm trong 1 độ quý hiếm nguồn vào. Như vậy canh ty bọn chúng rời khỏi đơn giản và dễ dàng trấn áp Component rộng lớn.

Ví dụ cơ hội dùng Props:

class HelloWorld extends React.Component { render() { return <h1>Xin xin chào {this.props.name}</h1>; } } const element = <HelloWorld name="VNTALKING" />;

Khi nào là dùng Props?

Khi nào là bạn phải truyền tài liệu kể từ component phụ vương xuống component con cái, khi bại cần dùng Props.

🙆 Tìm hiểu kỹ rộng lớn về React Native Component

Mình ví dụ đơn giản và giản dị sau đây giúp thấy cơ hội dùng những props nhằm truyền dữ liệu:

// Parent export mặc định class WelcomeScreen extends React.Component { render () { return ( <View> <Heading message={'Chào mừng fan hâm mộ cho tới VNTALKING '}/> </View> ) } } // Child component export mặc định class Heading extends React.Component { render () { return ( <View> <Text>{this.props.message}</Text> </View> ) } } Heading.propTypes = { message: PropTypes.string } Heading.defaultProps = { message: 'Heading One' }

Giải mến Props

Trong ví dụ bên trên, tất cả chúng ta với cùng 1 component Heading, với cùng 1 props là message. Vì vậy, khi chúng ta cần dùng Heading component (ví dụ như ở screen WelcomeScreen), tất cả chúng ta chỉ việc truyền độ quý hiếm nhập message là được:

<Heading message={'Chào mừng fan hâm mộ cho tới VNTALKING '}/>

Xem thêm: bánh sinh nhật cho bé gái 1 tuổi

Trong tình huống phiên bản đằm thắm một component nhận tài liệu thẳng kể từ người tiêu dùng thì sao? Ví dụ như nhập tài liệu trải qua những input field. Đây là khi suy nghĩ cho tới dùng State.

State là gì?

State sinh hoạt không giống với Props. State là đối tượng người dùng bộ phận của component, trong những khi những props được truyền độ quý hiếm kể từ bên phía ngoài nhập component bại.

Trong ReactJS và React Native, State được dùng trong số component nhằm lưu vấn đề.

Không update độ quý hiếm của state thẳng bằng phương pháp dùng this.state. quý khách hàng được lời khuyên luôn luôn dùng hàm setState nhằm update state.Tại sao lại như vậy?

Bởi vì thế, Khi dùng hàm setState() để thay thế thay đổi độ quý hiếm State, React tiếp tục update cây DOM một cơ hội tự động hóa. quý khách hàng ko cần lo ngại về sự việc cần tăng viết lách tăng xử lý sự khiếu nại nữa.

Ví dụ về State:

export mặc định TodoApp; import React, { Component } from 'react'; import { Text, View } from 'react-native'; export mặc định 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 ( <View> <Text onPress={this.updateState}> {this.state.myState} </Text> </View> ); } }

Vậy lúc nào State được sử dụng?

Bất cứ lúc nào tài liệu nhập một component cần thiết thay cho thay đổi, State hoàn toàn có thể được dùng.

Sự tương tác của người tiêu dùng với những component là những ví dụ về phong thái sinh hoạt của state. Như click những button, tick nhập checkbox, điền những biểu mẫu… là những ví dụ về sự việc tương tác của người tiêu dùng.

Nếu các bạn điền một size bao gồm những text input field, từng field nhập size sẽ giữ lại được lại tình trạng của chính nó dựa vào tài liệu nguồn vào của người tiêu dùng.

Nếu nguồn vào thay cho thay đổi, tình trạng của những text input tiếp tục thay cho thay đổi. Đây là nguyên vẹn nhân cần thiết re-rendering của component và toàn bộ những component con cái của chính nó.

🔥 Đừng vứt lỡ: Tải không tính tiền sách Fullstack React Native (giá thị ngôi trường là 200$)

State dùng như nào?

Hãy coi đoạn code bên dưới nhằm làm rõ rộng lớn cơ hội state sinh hoạt thế nào nhập 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 ( <View> <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={this.handleChangeInput} value={input} /> </View> ) } }

Trong đoạn code bên trên, chúng ta cũng có thể thấy một Form component khai báo state với cùng 1 key là input.

Form này hiển thị một text input field nhằm người tiêu dùng nhập. Mỗi Khi người tiêu dùng nhập văn phiên bản, onChangeText được kích hoạt, theo thứ tự gọi setState để thay thế thay đổi giá chỉ input nhập state.

setState kích hoạt re-rendering lại component, và skin người tiêu dùng (UI) giờ đây được update với vấn đề tiên tiến nhất được nhập kể từ người tiêu dùng.

Đến phía trên các bạn vẫn làm rõ Props và State là gì rồi trúng không?

Mình đặc biệt mong muốn nghe chủ kiến của chúng ta về yếu tố này. Nhân tiện, nhập nội dung bài viết với dùng định nghĩa như component, đấy là một định nghĩa cần thiết và tôi đã trình diễn ở bài bác viết: Tìm hiểu Component nhập React Native

Xem thêm: lùn 1m50 cách phối đồ cho người lùn mập