Recently, I talked with some friends about the official react-Native reconfiguration status. However, it happened that the 0.59. X series version was released recently, and there was a big change in the upper design. Just want to talk about the current situation of React Native, the upgrade experience of the new version, and the new support for React Hook and other features.

This article is not about source code analysis and tutorials, but more about discussion and documentation. I have been working onAndroid 、React-Native,FlutterBig front-end development, and sometimes write about itReact 和 Vue, this article is also hope to be able to communicate with you, if you can welcome to ask questions or suggestions, finally also hope this article can inspire you.

It’s been over 4 years since the React-Native project was released, and there’s no 1.0 yet.

A, the present situation

I believe that people’s first impression of React-Native’s “cool” should come from Aribnb’s “Why Airbnb Abandoned React Native”. As described in the article, React-Native does encounter some performance bottlenecks, but this depends on who you compare it with. Personally, I think the code serves the business, and it’s not rigorous to ignore the scenario versus performance. It’s all about how you use it, and whether the official and community is active and optimized.

First, my understanding of cross-platform: a set of logic can run on multiple platforms, which is more to avoid the inconsistency of business logic between platforms, and the reduction of workload is not obvious! Is not obvious. Not obvious! At the same time, when an enterprise project is large, it is generally not limited to a framework.

In fact, Facebook hasn’t given up on React Native. Nearly a year after the official announcement that Facebook is refactoring React Native and will rewrite a lot of the underlying infrastructure, Facebook has rounded it up. But the latest version, 0.59.x, does a good job.

The new version mainly includes the following points:

  • 1. ReducedReact-NativeIts own framework, the webView, viewPager, Netinfo, Async-storage and other built-in package split, independent maintenance through the community, and gradually blurredReact 和 React-NativeBoundaries.
  • 2. Update JavaScriptCore, upgrade, and CLI tools.
  • Support React Hooks.
  • 4. FixedFlatListList control in many problems.

The main objectives of refactoring for future releases are:

  • 1. Reduce the dependence of JSBridge.
  • 2, through theFabricUI architecture, willShadowLayer,UIManager 、NativeModuleMove from Java to C++ to supportBidirectional synchronous and asynchronous rendering and invocation 。

It can be seen that the refactoring and splitting in version 0.59 are preparing for the next step of refactoring. More detailed analysis of the next generation of refactoring can be found in Jd’s in-depth Analysis of React Native Next Generation Architecture Refactoring, which will not be detailed here.

Also in ctrip’s project: The article “Ctrip open Source RN development framework CRN” also said that it was updated to version 0.59. X at the first time.

An aside:

In today’s programming world, there are many “factions”, such as the front-end Vue, React, Angular, cross-platform Cordova, Weex, React-Native, Flutter, etc. When I choose a framework, I usually prioritize the following:

  • 1. Frame activity.
  • 2. Complexity of your business requirements.
  • 3. Team configuration and technical style of team members.
  • 4. Personal comfort with the frame.

Second, the React – Native 0.59. X

Before choosing an upgrade version, we need to know that the React-Native version has A large A small B version number of 0.A.B. One of my feelings during the use of React-Native is:

doingReact-NativeDo not use version 0.A.0, such as 0.59.0. I usually choose a small version iteration after the big version, such as 0.59.4 version to upgrade and update, which is relatively more stable and can reduce some problems.

However, the upgrade of the React-Native version is always a big problem. I usually get stuck in my own open source project first. This time, IN my open source project GSYGithubAPP, I upgraded the version from 0.57.8 to 0.59.4 directly, but the result was not smooth as expected. However, there are three main problems caused by the react-Native version upgrade:

1. Adjustment of official API:

These problems are generally easy to solve, and are explained in detail in the official update documents, In this upgrade, react-Native plug-ins such as webView, Netinfo and Async-storage are replaced with react-native community and some deprecated apis are replaced.

2. Incompatible third-party libraries:

This is also a headache in React-Native, because the maintenance of third-party packages is uneven. Basically, if the author does not maintain them or does not maintain them in a timely manner, he or she will have to laugh at himself or her own work, just like the GSYGithubAPP encountered in the upgrade process:

  • GSYGithubAPP#66 is not a problem that can be solved by simply changing the local library. This is one of the reasons why the update of the project has not been merged into the master.

  • The react-native router-flux and react-Navigation upgrade versions need to correspond to each other, and the react-native Gear-handler dependency needs to be added. And pre-import in the index.js entry to solve some problems.

  • The versions and dependency modes of Android targetSdk and supportSdk of various third-party plug-ins are faulty.

Node_module “black hole” :

This kind of problem belongs to personality, for example, the GSYGithubAPP project is upgraded from 0.57 to 0.59, while BackAndroid has been completely abandoned in 0.58, and a modal plug-in in the project happens to use BackAndroid, Although the author also updated the plugin for compatibility, but

After the plug-in is updated, an error still occurs when it is re-run? WTF, and Ming plug-in source code has no traces of BackAndroid, that error where to come?

Check the current bundle source code through Chrome Debug, and finally find the existence of BackAndroid, then determine that there is no problem with the cache.

Rm -rf ~/. Rncache and rm -rf $TMPDIR/* were deleted and node_module was installed again.

  • conclusion

That’s why CROSS-platform development like React-Native doesn’t actually reduce workload. Cross-platform is to solve the unified maintenance of logic, but in the process of development, many times will encounter the problem of compatible development, and the adaptation between platforms also consumes time.

I’m sure every React-Native developer hates the red color all over the screen, so somewhere along the way, React-Native added red and black to the error.

Third, the React of Hooks

React Hooks are actually one of the reasons I upgraded to 0.59, because they are really interesting.

In fact, I’m not strictly a front-end person, and most of the time I don’t have a deep understanding of CSS and ES, but there are a few things that have impressed me in the use of JS:

  • Redux: Redux’s state management design, along with its spinoffs and third-party plugins, was one of the things THAT I personally think helped React catch on so quickly in the first place.

  • HOC and ES7 Decorators: This should actually be included in Redux as well, but HOC + Decorators quickly achieve a similar effect to faceted programming, which is certainly dear to me as a Java developer.

8. React Hooks React Hooks React Hooks 【React In-depth 】 From Mixin to HOC to Hook, the article describes the evolution and comparison of React development styles.

The fact that React Hooks were introduced so early in React Native gives me the impression that the Facebook team is working on blurring the border between the React developer Web and App, and enriching the React developer ecosystem.

As for React Hooks, functional programming is probably closer to the “future” as FAR as I understand it (though I’m not entirely sure), and React Hooks do have distinct advantages:

  • Can better reduce our code volume.
  • It also reduces blocking during code lifecycle execution.
  • Custom Hooks decouple to some extent, increase reuse, reduce nesting.
  • The style of functional programming makes functions independent and code concise and easier to read.

Back to use, React Hooks are the most commonly used default interfaces:

  • useStateAllows you to quickly add state to functions
  • useEffectLets you quickly add life cycle processing
  • useImperativeHandleFast external exposure interface

These built-in hooks can save your code to a certain extent, and provide clear state management logic, while using the official useReducer, the following code, but also can quickly write a pseudo Redux.

import React, {Component, useReducer, useRef, useImperativeHandle, forwardRef} from 'react';
import {Text, View, TouchableOpacity,} from 'react-native';

const initialState = {count: 0};

function reducer(state, action) {
    switch (action.type) {
        case 'reset':
            return initialState;
        case 'increment':
            return {count: state.count + 1};
        case 'decrement':
            return {count: state.count - 1};
        default:
            returnstate; }}export function DemoCounter({initialCount}) {
    const [state, dispatch] = useReducer(reducer, {count: initialCount});
    return (
        <View>
            <Text>Count: {state.count}</Text>
            <TouchableOpacity onPress={() => dispatch({type: 'reset'})}>
                <Text>Reset</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => dispatch({type: 'increment'})}>
                <Text>+</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => dispatch({type: 'decrement'})}>
                <Text>-</Text>
            </TouchableOpacity>
        </View>
    )
}

Copy the code

For React Hooks, use a series of Hooks before rendering. The Hooks use arrays internally to update state data sequentially.

Hooks cannot be used in loops or conditional checks. This is a convention because the Hooks are called sequentially each time. If they are out of order, the cursor will not match the correct data. So the convention is not to use actions like useState in if or for.

React Hooks Learn more about React Hooks:

  • A Preliminary study of React Hook

  • React Hook Isn’t Magic, It’s Arrays

Finally, coding style:

Whether HOC, React Hooks, Redux, etc., in fact, I think there is no so-called optimal solution, the specific choice of use depends on the business scene, excessive design for the sake of design, the consequences of killing the devil is very inconvenient, and easy to accidentally hurt.

If it is personal development, show code bright force this is understandable, but if it is actual team development, it is best to consider the team cooperation selection, otherwise you write code only you can maintain, estimate the final cry or their own.

Well, that’s the end of this piece! (/ / / del / / /)

Full cross-platform projects and articles:
  • Flutter open Source project and articles
  • React Native Open source project and article
  • Weex open source project and article

The full article table of contents is at ReadMe

Other articles

In-depth Analysis of Cross-platform Mobile Development