-
Notifications
You must be signed in to change notification settings - Fork 1
React and React Native
React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff. Whenever a ReactComponent is changing the state, diff algorithm in React runs and identifies what has changed. And then it updates the DOM with the results of diff. The point is - it’s done faster than it would be in the regular DOM.
- Initialization where constructor function is called to set things up, generally states and props.
- Mounting Component renders for the first time and 2 methods are available- ComponentDidMount and ComponentWillMount. How it happens is, willMount is called just before the render method and is called only once in the entire lifecycle. After render method didMount is called.
- Updating where component's state and props changes and it re renders on the page. 4 methods are available at this time:
componentWillReceiveProps receives props,
ShouldComponentUpdate is called just before the component is re rendered and tells whether the component should be updated or not. By default, it returns true.
componentWillUpdate it is called just before the new component gets rendered.
componentDidUpdate This method is called just after the re-rendering of the component. You will have access to the previous props and state with prevProp and prevState as well as the current ones, and you can use this method to update any third party libraries if they happen to need an update due to the re-render.
- Unmounting : At the unmounting stage, the component gets deleted and removed from the page. The only lifecycle method at this stage is componentWillUnmount, which is called just before the component gets deleted. It is used to clear anything that was set up in componentDidMount
React.createElement( type, [props], [...children] )
Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span'), a React component type (a class or a function), or a React fragment type.
- The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time. Takes 2 props: data and renderItem.
- If you want to render a set of data broken into logical sections, maybe with section headers, similar to UITableViews on iOS, then a SectionList is the way to go. Props: renderItem, sections, renderSectionHeader.
- ScrollView will load items (data in it for scrolling) immediately after component loading. So all data will mount into RAM and you can't use hundred or thousand items in it (because of low performance).
- FlatList has a better solution for this issue, it will mount 10 items (by default) to screen, if user scroll view so other items will mount. It's a big gain of FlatList instead of ScrollView.
The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).
- PagingEnabled prop: used to allow paging through views using swiping gestures.
- View-pager component is used to swipe right and left
when we are several screens deep in a stack and want to dismiss all of them to go back to the first screen, we can use poptotop function. It will go back to the first screen in the stack.
The Push action adds a route on top of the stack and navigates forward to it. This differs from navigate in that navigate will pop back to earlier in the stack if a component is already mounted there. Push will always add on top, so a component can be mounted multiple times.