Functional programming

1. Pure functions

2. Immutable values

Vdom and diff

JSX nature

JSX not JS

Nature:

The React. CreateElement function is an h function that returns the first vDOM argument, which may be a component or an HTML tag children argument, which may be an array or an undefined argument. The component name must be capitalized.Copy the code

Synthetic events

DOM —–> composite event layer (instantiate unified React Events), dispatchEvent ——> event handlers

1DOM events bubble to the outer layer2The react Event layer instantiates a unified React Event3. Use dispatchEvent to trigger event handlersCopy the code

Benefits of using the synthetic event mechanism

1, better compatibility and cross-platform2And to thedocumentOr root to reduce memory consumption and avoid frequent unbinding3Facilitate unified management of events (e.g. transaction mechanism)Copy the code

setState batchUpdate

SetState main process
1,this.setState(newState) 
2NewState is stored in the pending queue3Is in batch Update mode4.Y, Y (asynchronously) saves components in dirtyComponents4.N, N (synchronous) Iterate through all dirtyComponents and call updateComponent to update the pending state or propsCopy the code
BatchUpdate mechanism

The function starts with isBatchingUpdate = true to indicate batchUpdate, and ends with isBatchingUpdate = false

Which can hit the batchUpdate mechanism

1, the lifecycle (and the functions it calls)2Events registered in React (and functions it calls)3React can "manage" the entryCopy the code

Which failed to hit the batchUpdate mechanism

1,setTimeout setIntervalEtc. (and the function it calls)2, a custom DOM event (and the function it calls)3React don't handle the entranceCopy the code
Transaction mechanism
1, perform the perform (method)2, perform the initialize3, implementation method,4, perform the closeCopy the code

Component rendering process

Component rendering process

1, props state2Render () generates a vnode3And patch (elem, vnode)Copy the code

Component update process

SetState (newState) --> dirtyComponents (possibly subcomponents) render() generate newVnode patch(cnode, newVnode)Copy the code

How does react-Filber optimize performance

Two phases of component update (patch split two phases)

Reconciliation stage - Performs diff algorithm, pure JS calculates commit stage - renders THE DIff results to the DOMCopy the code

There may be performance issues:

JS is single-threaded and shares the same thread with DOM rendering. When the component is complex enough, the calculation and rendering of the component update are under great pressure and DOM manipulation (animation, mouse drag and drop, etc.) is required, it will get stuckCopy the code

Solution fiber

The DOM is paused for rendering and restored when idlewindow.requestIdleCallback
Copy the code