This article was originally published on our official account: ReactNative development circle.
This paper will not be updated on a regular basis, want to check out the latest version, please visit https://github.com/forrest23/react-native-interview
1.React Native has many advantages over Native ios and Android?
1. Performance comparable to native APP 2. Use JavaScript coding, just learn the language 3. Most of the code can be shared by Android and IOS 4. Component development, high code reuse 5. Like writing web pages, modify the code can automatically refresh, do not need to slowly compile, save a lot of compile waiting time 6. APP hot update is supported without reinstalling the APP
Cons: Relatively high memory footprint, unstable version, constant updates, no stable 1.0 release yet
2.React Native component lifecycle
GetDefaultProps 1(global call once) No getInitialState 1 No componentWillMount 1 Yes Render >=1 No ComponentDidMount 1 is componentWillReceiveProps > = 0 is shouldComponentUpdate > = 0 n componentWillUpdate > = 0 n ComponentDidUpdate >=0 No componentWillUnmount 1 No
3. What happens when you call setState?
When setState is called, the first thing React does is merge the object passed to setState into the current state of the component. That would start a process called reconciliation. The ultimate goal of reconciliation is to update the UI based on this new state in the most efficient way possible. To do this, React builds a new React element tree (which you can think of as an object representation of the UI). Once you have the tree, React compares the new tree to the previous element tree (diff) in order to see how the UI changes in response to the new state. By doing this, React will know exactly what has changed, and by knowing what has changed, you can minimize the footprint of the UI by making updates only when absolutely necessary.
4. Similarities and differences between props and state
1. Any changes to props or state will cause the render to be rerendered. 2. Each can be initialized by the corresponding initialization function of its own component.
The initial value of state comes from its own getInitalState (constructor) function; Props comes from the parent component or getDefaultProps itself (the former overrides the latter if the key is the same).
2. Modification method: State Can only be set in its own component, but cannot be changed by the parent component. Props can only be modified by the parent component, not by its own component.
3. For child components: props is a data flow that is passed from a parent component to a child component. This data flow can be passed to a descendant component. State represents the internal state of a component and can only exist in its own component.
5. What should shouldComponentUpdate do
The question also has to do with reconciliation. The ultimate goal of reconciliation is to update the user interface with the new status in the most efficient way possible. If we know that some part of our user interface (UI) won’t change, there’s no reason React should go to the trouble of trying to figure out if it should render. By returning false from shouldComponentUpdate, React will assume that the current component and all its children will remain the same as the current component
6. The props. Children. Map function of reactJS receives an exception when traversing. How should I traverse it?
The value of this.props. Children has three possibilities: 1. The current component has no child node, it is undefined; 2. There is a child node whose data type is Object. 3. There are multiple child nodes. The data type is array. The react.children.map () method is provided to safely traverse child node objects
7. Redux status management process
8. Mechanism for loading bundles
To implement hot updates of RN’s scripts, we need to understand how RN loads scripts. When we write our business logic, we’ll have a bunch of JS files, and when we pack them RN will pack them into a file called index.android.bundle(ios is index.ios.bundle), All js code (including RN source code, third-party libraries, and business logic code) is stored in this file. The bundle file is loaded as soon as the App starts, so what the script hot update does is replace this bundle file.
9. The Flex layout
Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”
The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.
By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.
Container properties The following six properties are set on the container. The flex-direction attribute determines the direction of the main axis (that is, the alignment of items). The flex-wrap property defines how to wrap a line if an axis does not fit. Flex-flow The flex-flow property is a short form of the flex-direction and flex-wrap properties. Context-content defines the alignment of items on the main axis. The align-items property defines how items are aligned on the cross axis. The align-content align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.
10. Please briefly explain the principle of code push
Code push invokes the React Native package command to package all the non-native code in the current environment into a bundle file and upload it to the Windows Azure server. Start page (or splash page) in APP to write the code to request update (the request contains the local version, hashCode, appToken and other information). The Microsoft server side compares the local JS bundle version with the version of Microsoft server. If the local version is low, Download the new JS bundle and implement the update (code push framework implementation).
11. What are the biggest differences between synchronous and asynchronous actions in Redux
Synchronization only returns a plain Action object. An asynchronous operation returns a promise function midway through. Of course, a normal action object is also returned after the Promise function finishes processing. Thunk middleware determines that if a function is returned, it is not transmitted to the reducer until the reducer detects that it is a common action object, and then the reducer processes it.
This paper will not be updated on a regular basis, want to check out the latest version, please visit https://github.com/forrest23/react-native-interview
The title of this article is excerpted from the Internet, if there is infringement please contact me!
Welcome to follow my wechat official account: ReactNative Development circle
