React vs. React Native

• React is mainly used to implement some UI components on the browser side and can also be used for server rendering. React can use htML-provided tags or encapsulate custom components. React also provides a way to manipulate the DOM directly.
• React Native is mainly used to implement UI components of client applications. It can only use Native components packaged by Facebook or its own. The development is mainly based on JavaScript, basically saying no to HTML and CSS, but the advantage is that you can use ES6.

Without further ado, the text begins

React Native has never been used before, and the process of using React Native is quite bumpy. Here is a brief summary of several ways I have used to communicate with components.

React 最基础的 props 和 state

Components use state internally

constructor(props) { super(props); This. state = {isOnline: true // component state}; } render() { if(this.state.isOnline){ //... } //... Remaining code}Copy the code

Parent and child component communication props

Class MyComponent extends Component {constructor(props) {super(props); // Class MyComponent extends Component {constructor(props) {super(props); // let isOnline = this.props. IsOnline; } / /... Remaining code}Copy the code

Parent component communication can also be used as props

Class MyComponent extends Component {constructor(props) {super(props); // Class MyComponent extends Component {constructor(props) {super(props); } componentDidMount() {this.props. OnChange ('newVal'); } render() { return ( ); }}Copy the code

Class parentCpt extends Component {constructor(props) {super(props); this.state = { key: 'defVal' }; } // The parent takes the child's argument and changes state handleChange(val) {this.setState({key: val}); } render() { //... Return ({this.handlechange (val)}} />); }}Copy the code

Use the Refs

Class MyComponent extends Component {constructor(props) {super(props); // Class MyComponent extends Component {constructor(props) {super(props); } // Open instance method doIt() {//... } render() {return (); }}Copy the code

Class parentCpt extends Component {constructor(props) {super(props); Return ({this.mycpt = c;} render() {this.mycpt = c; }} / >); } componentDidMount() {// Call the componentinstance method this.mycpt.doit (); }}Copy the code

The use of global

Global is similar to the window object in the browser. It is global, defined in one place and accessible to all components. It is generally used to store some global configuration parameters or methods.

Usage scenario: Global parameters do not passpropsSome components do not care about this parameter and only one of the nested components uses it

global.isOnline = true;
Copy the code

Using RCTDeviceEventEmitter

RCTDeviceEventEmitter is an event mechanism. The React Native documentation is only briefly covered. DeviceEventEmitter can also be used, which encapsulates RCTDeviceEventEmitter with a layer and uses a slightly different method.

According to the documentation, RCTDeviceEventEmitter is primarily used to send events to JavaScript Native, but can actually be used to send custom events.

Usage scenario: This parameter is available when multiple components use asynchronous modules and asynchronous modules depend on each other in sequence.

// Import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter'; / / to monitor the custom event RCTDeviceEventEmitter. AddListener (' customEvt, (o) = > {the console. The log (o.d ata); //'some data' // do something else}); / / send a custom event, can pass data RCTDeviceEventEmitter emit (' customEvt '{data:' some data '});Copy the code

useAsyncStorage

import { AsyncStorage } from 'react-native'; SetItem (' @mysuperstore :key', 'I like to save it.'); / / get AsyncStorage. The getItem (' @ MySuperStore: key)Copy the code