1. How can I not distinguish between static and object methods when exporting module methods to js on the native side?How do I export a single object?
Trace: A module exported from the native side is added to the middle of a configuration table.Through breakpoints, the module is discovered to be traversed at program startup, and all modules are initialized in the main thread in a synchronous manner, that is, all the objects of the export module are created at program startup, and there is only one object. All the export modules are singleton objects.
The following is a sequence diagram of how module initialization methods are invoked at program startup
2. POST request for react-native-fetch-blob was unsuccessful.
3. Why is PureComponent more efficient than Component?
Trace: The implementation of these two components is in the middle of ReactBaseClasses.js, with the comment removed, as follows
function ReactComponent(props, context, updater) { this.props = props; this.context = context; this.refs = emptyObject; this.updater = updater || ReactNoopUpdateQueue; } ReactComponent.prototype.isReactComponent = {}; ReactComponent.prototype.setState = function (partialState, callback) { !(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : _prodInvariant('85') : void 0; this.updater.enqueueSetState(this, partialState, callback, 'setState'); }; ReactComponent.prototype.forceUpdate = function (callback) { this.updater.enqueueForceUpdate(this, callback, 'forceUpdate'); }; function ReactPureComponent(props, context, updater) { this.props = props; this.context = context; this.refs = emptyObject; this.updater = updater || ReactNoopUpdateQueue; } function ComponentDummy() {} ComponentDummy.prototype = ReactComponent.prototype; ReactPureComponent.prototype = new ComponentDummy(); ReactPureComponent.prototype.constructor = ReactPureComponent; _assign(ReactPureComponent.prototype, ReactComponent.prototype); ReactPureComponent.prototype.isPureReactComponent = true; module.exports = { Component: ReactComponent, PureComponent: ReactPureComponent };
Discovering that Component only implements a construction method, defining the setState method is done.ReactPureComponent, on the other hand, inherits the Component using the JS prototype mock inheritance method, then defines the property isPureReactComponent as true.A global search for the isPureReactComponent property found its use in ReactCompositeComponent.js, which manages component updates, loads, and so on.The key code in the updateComponent method is as follows
var shouldUpdate = true; // This variable determines whether the component needs to be re-rendered if (!this._pendingForceUpdate) { var prevState = inst.state; shouldUpdate = willReceive || nextState !== prevState; // inst represents an instance of a component and this criterion is whether the component itself implements the shouldComponentUpdate method if (inst.shouldComponentUpdate) { if (__DEV__) { shouldUpdate = measureLifeCyclePerf( () => inst.shouldComponentUpdate(nextProps, nextState, nextContext), this._debugID, 'shouldComponentUpdate', ); } else { shouldUpdate = inst.shouldComponentUpdate( nextProps, nextState, nextContext, ); } } else {// Component does not implement shouldComponentUpdate method and is PureComponent, shallowEqual shallow comparison if (this._compositeType === ReactCompositeComponentTypes.PureClass) { shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState); } } }
ShallowEqual is implemented in shallowEqual.js to make a shallow comparison, that is, an array of objects, etc. only compares whether the addresses of the objects are equal, not the specific content, because deep recursive comparisons of the consistency of object contents can be performance-intensive.
Above, conclusion: PureComponent is a subclass of Component. There is no difference between the two components when PureComponent manually implements the shouldComponentUpdate method, but if this method is not implemented manually, PureComponent uses the default shallowEqual to compare object equivalence for better performance.The page not refreshing phenomenon that may result from this can be solved by other means, such as regenerating new objects, using immutable.js objects, etc.
4. The keyboard appears slowly when TextInput first focus, Carton
Follow-up: The reason is that the keyboard is lazy loading mode, it takes time to initialize the keyboard view first when it first appears. To reduce the time interval for the first time, you can have the keyboard initialized beforehand.The js side didn't think of how to do this, but the native side could be written in the didFinishLaunchingWithOptions method:
UITextField *textField = [[UITextField alloc] init]; [self.window addSubview:textField]; [textField becomeFirstResponder]; [textField resignFirstResponder]; [textField removeFromSuperview];
The keyboard pops up when TextInput is focused. Clicking on a keyboard that is not in the blank space of TextInput will not disappear. To achieve this function, simply have TextInput embedded in ScrollView.
Then the problem arises again. By doing so, clicking on the keyboard anywhere on the screen except TextInput will disappear first, causing, for example, a button A on the page. When you click A, you will first step off the keyboard, and then click again to trigger the A event. This is tedious.The solutions are as follows:
_addEvent = (event) => { this.events.push(event.nativeEvent.target) }; _onStartShouldSetResponder(event) { let target = event.nativeEvent.target; if (!this.events.includes(target)) { Keyboard.dismiss() } return false; } render() { return ( <ScrollView keyboardShouldPersistTaps='always' > <View style={{alignItems:'center',flex:1,height:SCREEN_HEIGHT}} onStartShouldSetResponder={(event)=>this._onStartShouldSetResponder(event)} > <Button text='Land' onLayout={event=>this._addEvent(event)} /> </View> </ScrollView> ) }
If the keyboardShouldPersistTaps property of ScrollView is set to always, the keyboard will no longer intercept the click event and the keyboard will not disappear automatically when you click in the blank space.onStartShouldSetResponderCapture is called when a click event occurs, asks the view if it wants to intercept the event, customizes the process, and returns the keyboard when the click screen is in place other than the specified location.The keyboard does not go backwards when location A, such as the login button, is clicked.A onLayout completes a callback on the view layout, and event.nativeEvent.target uniquely identifies the component.