Why use frameworks instead of native?

Benefits of the framework:

1. Componentization: The componentization of React is the most thorough, even to atomic components at function level. A high degree of componentization can make our project easy to maintain and easy to combine and expand.

2. Natural Layering: Code in the era of jQuery is mostly noodle code with heavy coupling. Modern frameworks, whether it is MVC, MVP or MVVM, can help us layer code and decouple code to make it easier to read and write.

3. Ecology: Now the mainstream front-end framework has its own ecology, whether it is data flow management architecture or UI library has mature solutions.

4. Development efficiency: Modern front-end frameworks automatically update DOM by default instead of manual operation, which liberates the cost of manual DOM for developers, improves development efficiency and fundamentally solves the problem of UI and state synchronization.

What are the pros and cons of virtual DOM?

Advantages:

  • Guaranted lower limit of performance: virtual DOM can find out the minimum difference through diff, and then patch in batches. Although this operation is not as good as manual optimization, the performance is much better than rough DOM operation, so virtual DOM can guarantee the lower limit of performance
  • No manual operation of DOM: The diff and patch of virtual DOM are automatically carried out in one update. We do not need to manually operate DOM, which greatly improves the development efficiency
  • Cross-platform: The virtual DOM is essentially a JavaScript object, and the DOM is strongly platform-dependent. Virtual DOM allows for easier cross-platform operations, such as server rendering, mobile development, and so on

Disadvantages:

  • Extreme optimization cannot be carried out: in some applications with extremely high performance requirements, virtual DOM cannot be targeted for extreme optimization. For example, VScode adopts the way of direct manual operation of DOM to carry out extreme performance optimization

    Virtual DOM implementation principle?

  • A virtual DOM is essentially a JavaScript object that is an abstraction of the real DOM
  • When the state changes, record the difference between the new and old tree

  • Finally, update the differences to the real DOM

    In which lifecycle should React requests be placed?

    In which lifecycle should React asynchronous request be placed? Some people think that asynchronous request can be made in advance in ComponentWillMount to avoid the white screen. Actually, this view is problematic.

Because of the nature of asynchronous events in JavaScript, when you start an API call, the browser returns to do other work in the meantime. When React renders a component, it doesn’t wait for ComponentWillmount it to finish anything – React moves on and continues to render, and there is no way to “pause” rendering until data arrives.

And there are a number of potential problems with the ComponentWillMount request. First of all, while the server is rendering, if the data is fetched in ComponentWillMount, the fetch data will be executed twice, once on the server and once on the client. This creates redundant requests and, second, after React 16’s React Fiber rewrite, ComponentWillMount may be called multiple times in a single render.

Currently the official recommended asynchronous request is made in ComponentDidMount.

If a special requirement requires a request in advance, it can also be requested in a special case in constructor:

Is setState asynchronous or synchronous?

First answer: sometimes they are asynchronous, sometimes they are synchronous

1. SetState is “asynchronous” only for synthesized events and hook functions. It is synchronous for both native events and setTimeout.

2. The “asynchronous” of setState does not mean that the internal implementation is carried out by asynchronous code. In fact, the process and code executed by itself are synchronous. Of course, you can get the updated result through the callback in the second parameter setState(partialState, callback).

3. Batch update optimization of setState is also based on “asynchrony” (synthesized event, hook function). Batch update will not be performed in native event and setTimeout. Take the last execution, if multiple different values are setState at the same time, it will be merged batch update during the update.

How is the React component communication implemented?

Communication between React components:

  • Parent communicates with child components: A parent component can communicate with child components by sending props to them
  • The child communicates with the parent: props+ callbacks. The parent communicates with props as functions that are scoped to the parent itself, and the child calls this function to pass any information that the child wants to pass as parameters to the parent’s scope
  • Sibling component communication: find the common parent node of the two sibling nodes, and communicate by forwarding information by the parent node in combination with the above two ways
  • Cross-Hierarchical Communication: Context is designed to share data that is “global” to a component tree, such as the currently authenticated user, topic, or preferred language, and is perfect for global data that spans multiple layers to communicate through a Context
  • Publish and subscribe: Publishers publish events, subscribers listen for events and react to them, and we can communicate by introducing an Event module

  • Global state management tool: Communicate with a global state management tool such as Redux or Mobx, which maintains a global state center Store and generates new states based on different events

    How does Redux work?

    First, let’s look at the core concepts:

  • Store: A place to Store data. You can think of it as a container. You can only have one Store for the entire application.
  • The State: Store object contains all the data. If you want the data at a certain point in time, you need to take a snapshot of the Store. The data set at this point in time is called the State.
  • A change in Action: State causes a change in View. However, the user does not touch the State, only the View. Therefore, the change in State must be caused by View. The Action is the notification from the View that the State should change.
  • Action Creator: There are as many actions as the View wants to send. If you write it all by hand, it will be annoying, so let’s define a function to generate an Action. This function is called Action Creator.
  • Reducer: After the Store receives the Action, it must present a new State so that the View changes. The calculation process of this State is called Reducer. The Reducer is a function that takes the Action and the current State as arguments and returns a new State.
  • Dispatch: is the only way the View can issue an Action.

1. First, the user emits an Action (via View) using the dispatch method.

2. Store then calls the Reducer automatically, passing in two arguments: the current State and the received Action, and the Reducer returns the new State

3. If the State changes, the Store will call the listener function to update the View.

At this point, a user interaction flow ends. As you can see, the data flows in one direction throughout the process, which keeps the process clean.

How does React – Redux work?

  • Provider: The Provider encapsulates the entire application from the outside and passes the Store to the Connect module
  • Connect: Connects React and Redux

Get state: Connect gets the Provider’s store through the context, and store. GetState () gets all the states in the entire store tree

Package the original components: Render render render render render render render render render render render render render render render render render MapStateToprops (functions) and MapDispatchToprops (functions) passed in Connect are combined with the existing props on the component and passed to the WrappedComponent by a property

Listens for Store Tree changes: Connect caches the state of the Store Tree and compares the current state with the state before the change to determine whether to call this.setState() to trigger a rerender of Connect and its child components

What’s the difference between Redux and Mobx?

Comparison between the two:

  • Redux stores data in a single store, while mobx stores data in scattered stores
  • Redux uses a plain object to store data, requiring manual handling of the changed operations; Mobx is applicable to Observable to save data, and automatically process response operations after data changes
  • Redux uses immutable state, which means that the state is read-only and cannot be modified directly. Instead, it should return a new state and use pure functions. The state in – – – – mobx is mutable and can be modified directly
  • Mobx is relatively simple. There is a lot of abstraction in it. Mobx uses more object-oriented programming thinking. Redux can be complicated because the functional programming ideas are not easy to master and require a range of middleware to handle asynchrony and side effects
  • There is more abstraction and encapsulation in mobx, which makes debugging more difficult and results less predictable; Redux, on the other hand, provides development tools for backtracking, while its pure functions and less abstraction make debugging much easier

Scene analysis: based on the above differences, we can simply analyze the different use of the two scenarios.

Mobx is better for applications with less complex data: Mobx is difficult to debug, and many states cannot be traced back, which often makes it difficult to cope with complex applications.

Redux is suitable for applications with backtracking requirements: such as an artboard application, a table application, many times need to undo, redo, etc. Due to the immutable nature of Redux, these operations are naturally supported.

MobX is suitable for short and smooth projects: MobX is easy to use and has less boilerplate code, which can greatly improve development efficiency. Of course, the relationship between mobx and redux doesn’t have to be either/or. You can also use redux for global state management and mobx for component local state manager in your project.

How do I perform asynchronous operations in Redux?

Of course, we can make requests directly in ‘ComponentDidMount’ without resorting to Redux.

However, in a certain scale project, the above method is difficult to manage the asynchronous flow, and we usually use Redux’s asynchronous middleware for asynchronous processing.

There are many asynchronous streaming middleware in Redux, but there are only two mainstream asynchronous middleware, Redux Thunk and Redux Saga. Of course, Redux Observable may also be eligible to take a place. The rest of the asynchronous middleware is poor in terms of community activity and NPM downloads.

What are the pros and cons of Redux asynchronous middleware?

Story – thunk advantages:

  • Small size: Redux – Thunk is simple to implement, with less than 20 lines of code
  • Easy to use: Redux Thunk does not introduce additional patterns like Redux – Saga or Redux – Observable, making it easy to get started

Story – thunk defects:

  • Too much boilerplate code: Like Redux itself, a request usually requires a lot of code, and much of it is repetitive
  • Heavy coupling: Asynchronous operations are combined with Redux actions, making it difficult to manage
  • Functionally weak: Some of the most commonly used features in real world development need to be encapsulated

Story – saga advantages:

  • Asynchronous decoupling: Asynchronous operations are moved to separate saga.js instead of being mixed with action.js or component.js. Action gets rid of the thunk function: The Dispatch parameter is still a pure action (FSA), rather than full of the “dark magic” of the Thunk function
  • Exception handling: Benefiting from the saga implementation of the generator function, code exceptions/request failures can be caught and handled directly through the try/catch syntax
  • Powerful: Redux -saga provides a large number of saga helper functions and Effect creators for developers to use without packaging or simple packaging
  • Flexible: RedEx Saga can be serially/parallelistically combined to form a very useful asynchronous flow that can be easily tested. It provides test solutions for various cases, including mock tasks, branch overlay, and so on

Story – saga defects:

  • Additional learning costs: Redux – Saga is not just using an incomprehensible generator The most important thing is that your additional learning costs are only for this library, unlike Redux Observable, which has additional learning costs but is behind RxJS and a whole set of insights Want to
  • Bulky: a little larger, nearly 2000 lines of code, about 25KB for the min version
  • Excess functionality: Features like concurrency control are actually hard to use, but we still need to introduce this code
  • TS support is unfriendly: yield cannot return the TS type

Story – observables advantages:

  • Best: Thanks to RxJS’s powerful reactive programming library, you can do almost any asynchronous processing you can think of with RxJS operators
  • Back-to-RxJS: Thanks to RxJS, Redux – Observable is not expensive to learn if you already know RxJS, and will become even more powerful as you upgrade RxJS

Story – observables defects:

  • Expensive learning costs: If you don’t know RxJS, you’ll need to learn two more complex libraries

  • The community is modest: Redux Observable downloads are only 1/5 of Redux Saga’s, the community is not active enough, and Redux Saga is still leading the pack in terms of complex asynchronous flow middleware

    React interview questions collection

    How can the 11 questions be enough for an interview? React interview questions are a few but classic ones.

    Basic knowledge of

  • Distinguish between Real DOM and Virtual DOM
  • What is React?
  • What’s special about React?
  • List some of React’s main benefits.
  • What are the limitations of React?

  • What is JSX?

    The React components

  • You understand “In React, everything is a component.”
  • Explain the purpose of render() in React.
  • How do I embed two or more components into one component?
  • What is the Props?
  • What is the state in React? How is it used?

  • Distinguish between states and props

    React Redux

  • What are the main problems with the MVC framework?
  • Explain Flux
  • What is Redux?
  • What are the three principles that Redux follows?
  • What do you mean by “single source of fact”?

  • Lists the components of Redux.

    The React routing

  • What is React routing?
  • Why do you use the switch keyword in React Router V4?
  • Why do we need routes in React?
  • List the benefits of the React Router.
  • How is the React Router different from a regular route?



The full React interview questions collection PDFClick here to get it.It is not easy to sort out, but also please thumb up comments to support Xiaobian, to Xiaobian charging energy, thank you!