Jsliang Job Series – 38 – React series summary

React is a popular front-end framework for many big companies.

React is different from Vue, but it is also a MV* framework. Although the implementation may be different, it has some similar concepts, such as data-driven, componentization, and virtual DOM.

Of course, there are some questions that may not be clear these days, because Rome wasn’t built in a day:

• How does React work? What are the advantages and disadvantages?

These often need to dig deeper to know their own conclusions, long way to go, non-stop.

• Front-end history Evolution
• React vs. native
  • componentization
  • Natural stratification
  • Good ecological
  • Development efficiency
• React vs. Vue
  • Common points: virtual DOM, componentization, build tools, companion frameworks, Chrome development tools
  • Differences: template and JSX, different ways of listening data changes, different Diff
• React Fiber
• React lifecycle
  • Mount stage:constructor,getDerivedStateFromProps,render,componentDidMount
  • Update phase:getDerivedStateFromProps,shouldComponentUpdate,render,getSnapshotBeforeUpdate,componentDidUpdate
  • Unloading stage:componentWillUnmount
• setState
  • What happens after the call
  • Synchronous or asynchronous
• This points to the problem
  • throughbindcorrection
  • Corrected by arrow function
  • bindAnd the arrow function
• Controlled and uncontrolled components:value 和 defaultValue
• Component communication
  • props
  • Context
  • Redux
• Redux:Redux,React-ReduxAs well asRedux-Sagaworkflow
• Mixin,HOC 和 Hook
• Performance optimization
  • Optimized first screen renderingprerender-spa-plugin
  • Page placeholderreact-placeholder
  • Page switching optimizationhtml-webpack-plugin
  • Reduce the business volume codeTree Shaking
  • Extract common codeSplitChunkPlugin
  • Segmentation codeCode Splitting
  • Lazy loadingreact-lazyload

• JQuery era

The data is retrieved from the back end via Ajax, and DOM results are generated and updated to the page using jQuery.

However, with the development of business, the project is more and more complex, and the interaction is more and more strong, often users may operate several pieces of content at a certain moment, so the DOM operation is more and more frequent, the page performance is gradually reduced, users are not satisfied with the status quo of such slow.

• MVVM

With MVVM, two-way data binding synchronizes DOM updates as data is modified, and vice versa.

This setting greatly reduces the cost of manually maintaining DOM, while MVVM is one of the features of React. Although React is a one-way data flow, it requires manual implementation of two-way data binding.

• Virtual DOM

Binding alone is not enough to solve the problem of frequent DOM manipulation.

React implements a set of virtual DOM updates internally. It caches the real DOM in JS. Every time data is updated, Diff algorithm is used for internal comparison, and then a bunch of updates are collected before DOM updates, which greatly reduces DOM operations.

• The Diff operation

So, how does Diff work?

Diff gets the comparison of four cases of virtual DOM node changes: the node type is changed, the node type is the same, only the attribute or attribute value is changed, the text is changed, and child nodes are added, deleted or moved.

• setState

React differs from Vue in that it synchronizes user operations with JavaScript data in the form of a V-model. It uses setState to update component content.

• Redux

However, if we wanted to render a component from its sibling, React didn’t do that well at first, so we needed to introduce a state manager to help us manage state, hence Redux.

In Redux, when state changes, components that depend on that state are rerendered, which solves the problem of passing data between components.

• Mobx

The problem with Redux is that when modifying a state, you need to go through a series of files such as action.js, types.js and reducers.js, which makes the data flow of Redux very normal, but complicated to write.

So the community came up with another solution, Mobx.

Mobx advocates code simplicity and mobility, where you define an observable, use it in any component, and re-render it if its data changes. This allows Mobx to do a lot of things easily and quickly when developing a project.

But Mobx also has a downside: the data flow is so arbitrary that bugs are hard to locate.

• End

So the community recommends MobX for small projects and Redux for large projects.

References to this text are recorded in the bibliography

• Componentization: React’s componentization is the most thorough, even to functional level atomic components. A high degree of componentization makes our project easy to maintain and combine and expand.
• Natural layering: The code of the JQuery era was mostly spaghetti code with heavy coupling. Modern frameworks, whether MVC, MVP, or MVVM patterns, can help us layering. Code decoupling is easier to read and write.
• Ecology: Mainstream front-end frameworks now have their own ecology, from data flow management architectures to UI libraries with mature solutions.
• Development efficiency: Modern front-end frameworks automatically update the DOM by default, rather than manually, freeing developers’ manual DOM costs, improving development efficiency, and fundamentally solving the UI and state synchronization problem.

1. Virtual DOM. Map real DOM to better track rendered pages by comparing old and new DOM diff.
2. Componentization. Break your application down into functional modules that can be connected to each other in appropriate ways.
3. Build tools. Have their own build tools, throughWebpack + BabelGo put up the scaffolding.
4. Chrome development tools. Both have nice Chrome extensions to help find bugs.
5. Supporting framework. Vue hasVue-router 和 Vuex, and ReactReact-router 和 React-Redux.

1. Template VS JSX. Vue recommends writing approximate generalHTMLReact recommends the JSX writing style.
2. Listen for different changes in data. Vue uses mutable data, while React puts more emphasis on immutable data. Pass in Vuev-modelThe value of the bound data will also change after the user changes the input value. React needs to passsetStateChange the Settings.
3. Different Diff. Vue uses a bidirectional linked list to compare and update the DOM while React doesDiffThe queue holds the DOM that needs to be updated, and getspatchTree, and then uniform batch update DOM.
4. Development team. Vue started with Evan You as its core, and later recruited others to form a team; React was created by the Facebook team in the first place. So people compare the source code, Vue is easier to understand than React.

To be honest is to look at the similarities and differences of what others say. I am afraid that some “friends” will have their own opinions, and then I will be sprayed here. Jsliang dare not hold any opinions of his own, but I always answer the interviewer like this/funny

The React core process can be divided into two parts:

• reconciliationScheduling algorithm, also known asrender) :
  • updatestate 与 props
  • Call the lifecycle hook
  • Generating the virtual DOM
  • Through old and new VDOMdiffAlgorithm, get VDOMchange
  • Determines if you need to rerender
• commit
  • DOM node updates if needed;

Why Fiber?

As the application grew larger, the whole process of updating the render became more demanding, and the large number of component renderings could cause the main process to be tied up for long periods of time, resulting in stuttering and frame dropping for some animations or high-frequency operations.

The key is synchronous blocking.

In previous scheduling algorithms, React needed to instantiate each class component, generate a tree of components, and traverse rendering in a synchronous recursive manner. The biggest problem with this process was that it could not be paused and resumed.

So, to solve this problem (synchronous blocking), there are usually two approaches: asynchrony and task splitting.

React Fiber was created for task splitting.

React Fiber

• The React 16 version reconstructs the scheduling algorithm to replace the originalstack reconcilerReconstitute the new versionfiber reconcilerTo have linked lists and PointersSingle linked list tree traversal algorithm. With pointer mapping, each cell records the last and next steps traversed at the moment, making traversal pause and restart possible.
• It can be understood as a task segmentation scheduling algorithm, which mainly divides the original synchronous update and rendering tasks into independent small task units, disperses the small tasks to the idle time of the browser according to different priorities, and makes full use of the event cycle mechanism of the main process.

React Fiber core:

• Can be represented as a data structure
• Linked list tree traversal algorithm
• Division of tasks
• Distributed execution
• Priority policy

React obsolete lifecycle methods:

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

• constructorThe: constructor, executed first, is usually initialized in the constructorstateObject or bind to custom methodsthis
• getDerivedStateFromProps:static getDerivedStateFromProps(nextProps, prevState)This is a static method when we receive a new property and want to modify usstate, you can usegetDerivedStateFromProps.
• render:renderThe React function is a pure function that returns only what needs to be rendered. It should not contain other business logic. It can return the native DOM, React components,Fragment,Portals, strings, and numbers.
• componentDidMountCalled after the component is loaded, at which point we can get the DOM node and manipulate it, such as onCanvas,SVGSuch operations. Server requests, subscriptions can be written in this, but remember incomponentWillUnmountTo unsubscribe.

React interface requests are placed in componentDidMount. In the old version, some people put them in componentWillMount, which results in multiple requests. Now componentWillMount is not recommended. So componentDidMount is pretty scientific.

The following problems exist:

• whygetDerivedStateFromPropsIs it static?

When it is set to static, this indicates that the function cannot access the class properties through this, and direct access to the properties is not recommended.

• Which life cycles cansetState?

Can be used for componentDidMount and componentDidUpdate, when the DOM has been stabilized for data manipulation.

• getDerivedStateFromProps: This method is also called during the update phase.
• shouldComponentUpdate:shouldComponentUpdate(nextProps, nextState), takes two parameters, representing the new property and the changedstate, returns a Boolean value. If it istrueMeans that rerendering is triggered,falseIndicates that rerendering is not triggered and is returned by defaulttrue. You can use this life cycle to optimize React application performance.
• render: Same as the mount phaserender.
• getSnapshotBeforeUpdate:getSnapshotBeforeUpdate(prevProps, prevState), this method will be inrenderAfter that,componentDidUpdateCalled before, with two parameters, representing the previous property and the previousstate. This function has a return value that is passed as the third argumentcomponentDidUpdateIf you do not need a return value, you can return itnull, this method must be combined withcomponentDidUpdateUse together.
• componentDidUpdate:componentDidUpdate(prevProps, prevState, snapshot)In thegetSnapshotBeforeUpdate

Call later, with three parameters, representing props before, state before, and snapshot before. The snapshot parameter is returned by getSnapshotBeforeUpdate. If the DOM element state is needed to trigger some callback function, the comparison or calculation process is migrated to getSnapshotBeforeUpdate. The callback or status update is then triggered uniformly in componentDidUpdate.

• componentWillUnmount: Is called when a component is uninstalled or destroyed, to clear the timer, or to cancel a network request for garbage collection such as cleaning up invalid DOM elements.

SetState is the React method used to change the state and update the view.

After calling setState in the code, React merges the passed parameter object with the current state of the component, triggering a process called Reconciliation.

After the reconciliation process, React builds the React element tree based on the new state in a relatively efficient way and starts rerendering the entire UI.

After React gets the element tree, React automatically calculates the node differences between the new tree and the old tree and minimizes and re-renders the interface based on the differences.

In Diff, React is able to know with relative precision what has changed and how it should change, ensuring on-demand updates rather than total re-rendering.

In a nutshell:

1. Merge parameter objects, triggering the harmonization process
2. Calculate the difference between new and old trees (Diff)
3. Minimize and re-render according to the differences

Answer: Sometimes synchronous, sometimes asynchronous.

1. setStateAsync in synthesized events and hook functions, async in native events andsetTimeoutIt’s synchronous.
2. setStateThe asynchrony does not mean that it is internally implemented by asynchronous code. The process itself is synchronous with the code, but the call order of the synthesized event and hook function is before the update, so that the updated value cannot be immediately obtained in the synthesized event and hook function, thus the so-called asynchrony is formed.
3. setStateYou can take the second argumentsetState(partialState, callback)Get the updated result in the callback method.

React there are several ways to correct the orientation of this. Here are four methods:

import React, { Component } from 'react'

class App extends Component {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick () {
    console.log('jsliang 2020');
  }
  handleClick2 = () = > {
    console.log('jsliang 2021');
  }
  render () {
    // There are four binding methods
    return (
      <div className='App'>{/* Bind from constructor */}<button onClick={this.handleClick}>btn 1</button>{/* bind this */}<button onClick={this.handleClick.bind(this)}>btn 2</button>{/* Method 3: return event via arrow function */}<button onClick={()= > this.handleClick()}>btn 3</button>{/* method 4: turn method into arrow function */}<button onClick={this.handleClick2}>btn 4</button>} {this.handleclick ()} {this.handleclick ()}</div>)}}export default App;
Copy the code

So, what’s the difference between using bind and the arrow function?

The arrow function, apart from the lack of code, differs from normal functions in that this is defined when the function is declared, and is usually implicitly defined as the scope this when the function is declared.

Foo. Prototype. a = function() {};

Using the arrow function, this is equivalent to:

class Foo {
  constructor() {
    this.a = () = >{}; }}Copy the code

In Ant Design, performing operations on the Input field will do nothing if you change the defaultValue.

This is because the React form component defaultValue is passed and subsequent changes to the defaultValue are ignored.

Specifically, this is a React uncontrolled component whose state is controlled inside the React input and not by the caller.

So a controlled component is a component that can be controlled by the React state. Two-way data binding is a controlled component. You can add a value property to an input field in a form and then control a change to it. An uncontrolled component is a component that does not have a value attribute added, and you cannot manipulate its fixed value.

• The parent component communicates to the child component: Parent component to child componentpropsMethod to communicate to child components.
• The child component communicates with the parent component: The parent component is inpropsThe child component then calls the method, passing the information it needs to pass to the parent component’s scope.
• Complicated communicationReactContextOr,ReduxData communication.

Redux, React-Redux, redux-Saga, redux-Saga, redux-Saga, redux-Saga, redux-Saga, Redux-Saga, Redux-Saga, Redux-Saga, Redux-Saga

Working directory

JSX main entry of current page - Child.jsx sub-component - brother.jsx sibling component - action.js action - types.js type - saga.js call interface - Reducers.js processes the dataCopy the code

A normal working directory is shown above, how do we use it in our work?

First, connect React and Redux using react-redux in view.jsx

Then, assuming that now Child.jsx needs to invoke the interface (asynchronous processing), it will:

1. inaction.jsTo define what parameters the method passes.
2. Among themtypes.jsIs the auxiliaryaction.jsIn order to prevent the method body from repeating itself, we will use thetypes.jsDefined in uppercaseactionName.
3. That’s when you can startView.jsxThrough thedispatchTrigger method, for exampledispatch(getPage(page, perPage)).
4. At this time, atreducers.jsneutralizationsage.jsWe can listen to this method in thesage.jsTo call the interface and process the data.
5. After the processing, and thensage.jsPass toreducers.jsLet it process the data.

Then, if Brother. JSX simply wanted to process the data and use it in child.jsx, we would do the same as above, but directly in reducers.js instead of calling the interface in sage.

Finally, let’s take a look at the redux and React-Reduxt workflows:

Redux

React-Redux

Front-end development is very fast, pages and components become more and more complex, how to better realize the reuse of state logic has always been an important part of the application, which is directly related to the quality of the application and maintenance of the degree of difficulty.

Mixin, HOC and Hook are three state logic reuse technologies adopted by React. Mixin has been abandoned, while HOC is in its prime and Hook is just emerging. It is very important to master its iteration factors and rules.

Mixins are a way to extend collection capabilities by essentially copying the properties of one object onto another.

However, you can copy any method of any number of objects into a new object, which inheritance cannot do.

It appears mainly to solve the problem of code reuse.

However, it will do some harm:

• MixinInterdependence and coupling are not conducive to code maintenance
• differentMixinThe methods in the
• MixinA lot of times, components are aware of it and even have to do something about it, which can snowball in code complexity.

Based on the Mixin problem, React introduced an implementation of the decorator pattern: HOC.

A higher-order component takes a component as an argument and returns a new component.

HOC is an advanced technique in React that reuses component logic. But the higher-order components themselves are not the React API. It’s just a pattern, and that pattern is necessarily generated by the combinatorial nature of React itself.

function visible(WrappedComponent) {
  return class extends Component {
    render() {
      const{ visible, ... props } =this.props;
      if (visible === false) return null;
      return <WrappedComponent {. props} / >; }}}Copy the code

Higher-level components can be used for logging, available permission control, bidirectional binding, form validation, and more.

Higher-order components solve the problem of mixins:

• Low coupling. A higher-order component is a pure function with no side effects; the higher-order components do not depend on each other for coupling
• Avoid conflict. Higher-order components can also cause conflicts, but we can avoid these behaviors by following conventions
• Side effects are minimal. Higher-order components don’t care how or why the data is used, and wrapped components don’t care where the data comes from. The addition of higher-order components does not burden the original components

However, there is always darkness where there is light, and higher-order components also have some drawbacks:

• HOCNeed to wrap or nest on top of the original component if used in large quantitiesHOC, will generate a lot of nesting, which makes debugging very difficult.
• HOCCan be hijackedpropsConflicts can also occur when agreements are not followed.

Hook is a new feature in React V16.7.0-alpha. It lets you use state and other React features outside of class.

Using hooks, you can abstract state-containing logic from components, which makes it easy to test.

At the same time, hooks can help you reuse this logic without having to rewrite the component structure.

Therefore, it can also be used as a scheme to realize state logic reuse.

Benefits of Hook use:

• Reduce the risk of state logic reuse:Hook 和 MixinThere are some similarities in usage, butMixinIntroduced logic and state can overwrite each other, but more than oneHookThey do not affect each other, so we do not have to focus part of our efforts on preventing conflicts that avoid logic reuse.
• Avoid hell of nesting: Heavy useHOCTo make our code very deeply nested, useHook, we can achieve flat state logic reuse, and avoid a lot of component nesting.
• Make components easier to understand: in the use ofclassAs components build our programs, they each have their own state, and the complexity of business logic makes these components bigger and bigger, calling more and more logic in each lifecycle and becoming harder to maintain. useHook, which allows you to extract more common logic and split a component into smaller functions rather than forcing a life-cycle approach to split.
• Use functions instead of classes: Write a function insteadclassMaybe more knowledge, more points to pay attention to, likethisPointing, binding events, and so on. In addition, computers understand a function better than oneclassFaster.HooksSo you can be inclassUse more React features.

1. Optimized first screen rendering.<div id="root"> SVG </div>Plug-ins can also be usedprerender-spa-pluginPlugin for first screen rendering.
2. Page switching optimization. usehtml-webpack-pluginAutomatic plug-in insertionloading“, so you don’t have to write one for each page when switchingloading.
3. Reduce business code volume. throughTree ShakingTo eliminate some code.
4. Extract common code. throughSplitChunkPluginAutomatically split the business base library to reduce the existence of large files.
5. Segmentation code. throughCode SplittingLazy loading code to improve the user loading experience. For example, byReact LoadableTo rewrite components to support dynamicsimportIn the form.
6. Lazy loading. React can passreact-lazyloadThis mature component comes with lazy loading support.
7. Page placeholder. Sometimes when loading text or images on a page, a “flash screen” may occur. For example, the corresponding position of the image or text is blank before the loading is complete, and then the page will suddenly open after the loading is complete, resulting in a flash screen. Use third-party components at this pointreact-placeholderCan solve this situation.

There are 67 references in this series.

2019:

• React interview questions for 2019[Reading Suggestions: 1H]

2018:

• React Interview questions【 Reading Suggestions: 5min】
• React Interview Questions【 Reading Suggestions: 20min】

2017:

• React interview questions and analysis【 Reading Suggestions: 5min】

• React Technology revealed[Reading Suggestions: None]
• (Part) Middle and senior front factory interview secrets, winter for your escort, direct factory[Recommended Reading: 30min]

2017:

• React family bucket framework from scratch[Reading Suggestions: None]

2020:

• React vs. Vue【 Reading Suggestions: 10min】
• 20 Things you didn’t know about React and Vue

2017:

• The differences and advantages of Vue and React frameworks【 Reading Suggestions: 10min】

The latest:

• React Life cycle Check【 Reading Suggestions: 10min】

2019:

• React lifecycle changes【 Reading Suggestions: 5min】
• React lifecycle【 Reading Suggestions: 5min】

2018:

• React V16.3: New lifecycle functions【 Reading Suggestions: 20min】

2017:

• Deep into the React lifecycle (Part 1) : The Birth Stage (Mount)[Reading Suggestions: None]
• Deep into the React lifecycle (2)[Reading Suggestions: None]

2019:

• React’s controlled and uncontrolled components

2016:

• React Controlled components and uncontrolled components

2019:

• Let the virtual DOM and dom-diff not stand in your way【 Reading Suggestions: 20min】

2018:

• In-depth framework origin series – Virtual Dom[Recommended Reading: 30min]
• Shallow in and shallow out diagram Dom Diff[Recommended Reading: 30min]
• Explore the past and present of Virtual DOM[Recommended Reading: 30min]
• You don’t know about the Virtual DOM series【 Reading Suggestions: 20min】

2017:

• React Diff – React Diff[Recommended Reading: 30min]
• Do you really understand React (1) how components are designed and the important lifecycle[Reading Suggestions: None]

2015:

• In-depth analysis: How to implement a Virtual DOM algorithm[Reading Suggestions: None]

2018:

• How to learn React? Implement React by yourself[Reading Suggestions: None]
• React Source Code Parsing series is over![Reading Suggestions: None]
• Implementing a React with 160 lines of JAVASCRIPT[Reading Suggestions: None]

2017:

• React source code[Reading Suggestions: None]
• React source code: unqueue transactions and update queues[Reading Suggestions: None]
• React-redux source code analysis[Reading Suggestions: None]
• React setState[Reading Suggestions: None]
• React setState[Reading Suggestions: None]
• The realization principle of Mobx idea, and comparison with Redux[Reading Suggestions: None]

2015:

• React Source Code Analysis series – The art of managing the lifecycle[Reading Suggestions: None]
• React Transition React Transition[Reading Suggestions: None]

2015:

• React Mixin’s past life[Reading Suggestions: None]

2019:

• High-order components in React and their application scenarios[Recommended Reading: 40min]

2017:

• React Advanced Components (HOC) Introduction guide【 Reading Suggestions: 10min】
• Learn more about React advanced components【 Reading Suggestions: 10min】

2019:

• React Goes from Mixin to HOC to Hook[Recommended Reading: 30min]
• UseEffect complete guide[Reading Suggestions: None]
• The React principle of Hooks[Recommended Reading: 30min]
• React Hooks 【 nearly 1W words 】+ project combat【 Reading Suggestions: 3H 】

2018:

• React Hooks learn React Hooks — the biggest new feature of the year[Recommended Reading: 30min]

2018:

• Fully understand React Fiber【 Reading Suggestions: 20min】
• The React Fiber architecture【 Reading Suggestions: 20min】
• React Fiber Architecture Overview【 Reading Suggestions: 20min】

• Understand server rendering from the ground up[Reading Suggestions: 2H]

2019:

• React Best Practices【 Reading Suggestions: 20min】

2018:

• React 16 Loading performance Optimization Guide【 Reading Suggestions: 20min】
• Optimization practices for React mid-sized projects【 Reading Suggestions: 10min】

2017:

• How can you improve the performance of your React application【 Reading Suggestions: 10min】
• Optimized the React application to 60fps【 Reading Suggestions: 5min】

2019:

• Styled – Components: New idea for front-end component separation【 Reading Suggestions: 5min】

2018:

• Component Library Design Practice – Complex component design[Reading Suggestions: None]
• Front-end data validation starts with modeling【 Reading Suggestions: 20min】
• React App Design tips – Curry the way【 Reading Suggestions: 20min】
• How do you evaluate React’s new features Time Slice and Suspense?【 Reading Suggestions: 20min】
• How to write better React code?【 Reading Suggestions: 20min】
• React Ref’s past life【 Reading Suggestions: 20min】
• Do you really understand setState?【 Reading Suggestions: 10min】
• Learn the React function component from the Recompose library【 Reading Suggestions: 10min】
• Still using Redux, why don’t you try GraphQL and Apollo【 Reading Suggestions: 5min】

2017:

• Do you really understand React (middle) communication between components and React optimization【 Reading Suggestions: 10min】

2015:

• React source code analysis series – Decrypt setState[Reading Suggestions: None]

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.