- Component: Class class component and hooks function component development
- Context, redux Data state management
- Virtual DOM, Fiber architecture
The life cycle
*1. Initial render phase: * This is the phase when the component is about to begin its life journey and enter the DOM.
*2. Update phase: * Once a component is added to the DOM, it is only possible to update and re-render when a prop or state changes. This only happens at this stage.
*3. Unload phase: * This is the final phase of the component’s life cycle, when the component is destroyed and removed from the DOM.
ComponentWillMount: called after creating a component but before rendering it into the DOM: called after the first rendering; Components of DOM elements are now available componentWillReceiveProps: when the attribute update call shouldComponentUpdate: when I received the new props, this method can prevent to render to optimize performance componentWillUpdate: Called componentDidUpdate when the new props is received and ComponentUpdate returns true: called componentWillUnmount after the component is updated: called before the component is removed from the DOM, allowing you to clean up event listeners and the like
React V16.3 introduces two new lifecycle functions: getDerivedStateFromProps and getSnapshotBeforeUpdate
GetDerivedStateFromProps is called before the Render method is called, and is called both during the initial mount and during subsequent updates. It should return an object to update state, and if null is returned, nothing is updated.
GetSnapshotBeforeUpdate is called before the last render output (submitted to the DOM node). It allows the component to capture some information (for example, scroll position) from the DOM before changes are made. Any return value for this life cycle is passed as an argument to componentDidUpdate().
The three lifecycle functions that may be deprecated in V17 are replaced with getDerivedStateFromProps, plus UNSAFE_ for current use: componentWillMount componentWillReceiveProps componentWillUpdate
Class components and functional components
The function component is stateless (again, smaller than React 16.8 version) and returns the output to render. Their preferred way to render the UI is to rely only on properties, because they are simpler and perform better than class-based components. React hooks were introduced to make functional components capable of class components.
react hooks
Class-based components, lifecycle hooks, and the this keyword are not required
It makes it easier to reuse logic by abstracting public functions into custom hooks
Make your code more readable and testable by being able to separate the logic from the components themselves
-
useState
-
UsEffect React Hooks Provide Effect Hooks that perform side effects in function components after the function has rendered the DOM.
-
useContext
Component communication across hierarchies
Provider: external component that provides data
Consumer: component that fetches data in the inner layer
-
useReducer
-
useCallback
-
useMemo
-
useRef
-
useImperativeHandle
-
useLayoutEffect
The react of refs
Refs is the shorthand used in React. It is a property that helps store a reference to a particular React element or component, which is returned by the component render configuration function. A reference to a specific element or component returned by Render (). They come in handy when you need to make DOM measurements or add methods to components. Here are the situations where refs should be used:
- When you need to manage focus, select text, or play media
- Trigger animation
- Integration with third-party DOM libraries
redux
redux
- CreateStore: Creates a store to store data
- Reducer: Initialize state, define state modification rules, and modify state function
- GetState: Gets the status value
- Dispatch: To submit updates, to submit changes to data by dispatching an action
- Action: Actions are submitted to the Reducer function and new states are returned based on the type of the incoming action
- Subscribe: Changes the subscription
react-redux
When redux is used with React, it is necessary to manually subscribe to the component to hear state changes and update the component. In this case, it will call render and getState again each time. Connect the state and React components through Connect to achieve automatic listening effect
Two apis are provided
-
Provider provides stores for descendant components
-
Connect provides data and change methods for components
Connect is a higher-order component that receives the mapStateToProps and mapDispatchToProps parameters, where the mapStateToProps is used to map a specific state to the component’s props. MapDispatchToProps maps DispatchToprops (Action) to props, and subscribe to Store at componentDidMount. All connected components are rendered once.
Summary: The essence of Provider is to use context for unified transmission. The essence of connect is to extract and reuse the logic of listening and obtaining state in a unified manner. This is also a common function of higher-order components.
Story – thunk, redux – logger
Redux is a pure state manager that only supports synchronization by default. Implementing asynchronous tasks such as latency and network requests requires support from the redux-Thunk and Redux-Logger middleware
redux-saga
Redux-thunk supports asynchronous scenarios, but its disadvantages are obvious:
1, the use of callback way to achieve asynchronous, easy to form layer upon layer of callback noodle code
2. Asynchronous logic is scattered in various actions, making it difficult to conduct unified management
As a result, redux-Saga has a more powerful asynchronous management scheme that can be used in place of Redux-Thunk. Its characteristics are as follows:
1. The implementation of generator is more in line with the style of synchronous code;
2, unified monitoring action, when the action is hit, the corresponding saga task will be executed, and support each saga to call each other, making asynchronous code more convenient and unified management.
react-router
Router-router, link-link, route-route, exclusive-switch, and redirection-redirect all have Route rendering priority in component form: children> Component >render
Compare to a HashRouter:
- HashRouter is the simplest, and does not require server side rendering. BrowserRouter requires server side to return different HTML for different URLS.
- BrowserRouter uses the HTML5 history API (pushState, replaceState, and PopState events) to synchronize the UI of the page with the URL.
- The HashRouter does not support location.key and location.state. Pass parameters.
- Hash History does not require any server configuration to run and is relatively simple, browserHistory is generally used in a real online environment because every Web application should aspire to browserHistory.
How the React virtual DOM performs (tree traversal and diff)
Break down the tree structure by hierarchy, comparing only peer elements.
Each unit of the list structure adds a unique key attribute for easy comparison.
React will only match components of the same class.
Merge operations. When calling component’s setState method, React marks it as dirty until the end of each event loop. React checks for all components marked dirty to be redrawn.
Select subtree rendering. Developers can rewrite shouldComponentUpdate to improve diff performance.
Fiber architecture description
- Old: Browser rendering engine single-threaded, when calculating the DOM tree lock the entire threads, synchronization occurs, all behavior problems efficiently, react during the browser will always occupy the main thread, if the component hierarchy is deep, the corresponding stack will be deep and long time takes up the browser to the main thread, any other operations (including the user’s click, Mouse movement, etc.) cannot be performed.
- New: Rewrote the underlying algorithm logic, introduced fiber time slice, asynchronous rendering, React will render a part of the tree to check if there are higher priority tasks to be processed (such as user operations or drawing), continue rendering after processing, and update the priority to manage rendering tasks. Fiber react updates components into phases (Phase 1 && Phase 2), phase1 before render is phase1, phase2 after render is phasE2, 1 can interrupt, 2 can not interrupt one-time update. The three WILL lifecycles may be repeated and should be avoided.
What changes have been made to the virtual DOM of Act16 and 15,
Fiber vs. virtual DOM
Fiber turns the entire virtual DOM tree into a linked list of points to which diff can be terminated at any time
Element -> first child element -> sibling element -> sibling element