Alibaba Ant Group-Front-end Autumn Recruitment

On the phone, I suddenly called from time to time to ask if it is convenient for an interview now.
Main points of investigation: the concrete realization of the project, the difficulties encountered in the project, and the understanding of the underlying principles of the framework. I feel that it’s harder to ask than a general interview, and I pay attention to details and depth.

1. Ask whether there are any difficulties in the specific realization of a project on the resume

2. Which project is you independently responsible for? How are the responsible projects considered from construction, deployment, packaging, and framework selection?

3. Comparison of react and vue, how to determine which one to use in project development

1. Similarities

• Both are JavaScript libraries used to create UI;
• Both are fast and light (focus on creating front-end rich applications. Different from the early JavaScript framework "full-featured",)
• Both have a component-based architecture;
• All use virtual DOM;
• Can be put into a single HTML file, or become a module in a more complex webpack setup;
• There are independent but commonly used routers and state management libraries (Reat and Vue only have the framework of the framework, and other functions such as routing and state management are components of the framework.)

The biggest difference between them is that Vue usually uses HTML template files, while React is entirely JavaScript. Vue has two-way binding syntactic sugar.

2. difference:

1. The realization principle of monitoring data changes is different

   Vue can accurately know data changes through the hijacking of getter/setter and some functions.

   By default, React uses diff to compare references. If it is not optimized, it may cause a lot of unnecessary re-rendering of VDOM. Why doesn't React accurately monitor data changes? This is because of the difference in design concepts between Vue and React. Vue uses mutable data, while React emphasizes the immutability of data. There is no difference between the good and the bad. Vue is simpler, while React is more robust when building large-scale applications. Great.

2. Data flow is different

   Two two-way bindings can be achieved in Vue1.0: between parent and child components, props can be two-way bound; components and DOM can be two-way bound through v-model. The first one is removed in Vue2.x, that is, two-way binding between parent and child components is not possible (but a syntactic sugar is provided to automatically help you modify it through events), and Vue2.x has discouraged components from making their own props Make any changes.

   React has never supported two-way binding and advocates one-way data flow, which is called onChange/setState() mode.

3. Template rendering is different

   On the surface, the syntax of the template is different, and React renders the template through JSX. Vue uses an extended HTML syntax to render, but this is just a superficial phenomenon, after all, React does not have to rely on JSX.

   At a deeper level, the principles of templates are different, and this is their essential difference: React implements common syntax in templates through native JS in component JS code, such as interpolation, conditions, loops, etc., which are all implemented through JS syntax. , More pure and original. And Vue is implemented in a separate template separated from the component JS code through instructions. For example, conditional statements require v-if to achieve this. This approach is somewhat unique and will mess up HTML.

4. The framework is essentially different

   Vue is essentially the MVVM framework, developed from MVC;

   React is a front-end componentized framework, developed from back-end componentization.

3. The advantages of each

React

• Through the modular structure, it has flexible code, saving time and cost.
• Assist the high-performance realization of complex applications.
• Using React front-end development can make code maintenance easier.
• Supports native mobile apps for Android and iOS platforms.

Vue

• Its size is small and exquisite, easy to install and download.
• If we use it correctly, we can reuse Vue in multiple places.
• Vue.js allows us to update elements in a web page without rendering the entire DOM, because it is a virtual DOM.
• Need less optimization.
• Speeds up the development of web applications and allows big guys to separate the template to the virtual DOM from the compiler.
• Proven compatibility and flexibility.
• Regardless of the size of the application, the code base will not change.

4. Technical selection

It would be better to combine my experience in actual work here. I found a big guy's reference https://www.cnblogs.com/pengfei-nie/p/9087844.html

Four. Tell me about the React Diffing algorithm

traditional diff algorithm

The traditional diff algorithm uses cyclic recursion to compare nodes one by one. The complexity is O(n^3) and the efficiency is low.

In order to optimize the diff algorithm, React puts forward two assumptions:

1. Two different types of elements will produce different trees
2. Developers can use the key prop to hint which child elements can remain stable under different renderings

React diff algorithm strategy

• For tree structure (tree diff): Ignore the cross-level movement operation of the DOM node of the UI layer. (Because the number of such operations is small)
• For component structure (component diff): class generate a similar tree structure, classes will generate different attribute structures.
• For element structure (element-diff): For a group of nodes at the same level, they can be distinguished by the id of uniqueness

diff specific optimization

1. tree diff (tree structure)

• React hierarchically traverses the virtual DOM tree by using updateDepth
• Only two trees are compared to the same hierarchical node, as long as the node does not exist, then the node and all its child nodes are completely removed , not for further comparison.
• Only need to traverse once to complete the comparison of the entire DOM tree.

If cross-level operations occur, React cannot reuse existing nodes, which may cause React to perform a large number of re-creation operations, which will affect performance. Therefore, React officially recommends avoiding cross-level operations as much as possible.

2.component diff

• For components of the same type, first use the shouldComponentUpdate() method to determine whether comparison is required. If it returns true , continue to compare the virtual DOM tree of the component according to the React diff strategy, otherwise no comparison is required
• Different types of components, the component is judged as a dirty component, replace the entire component and all sub-nodes under it

3.element diff

For nodes at the same level, React diff provides three node operations

• Insert: The new component is not in the original collection, it is a brand new node, and the collection is inserted.
• Delete: The component is already in the collection, but the collection has been updated, and the node needs to be deleted at this time.
• Move: The component has not been updated, but the position has changed, for example: (A,B,C,D) → (A,D,B,C), the traditional diff will detect that the second place in the old set is B, When the second place of the new set is D, delete B and insert D. All subsequent nodes must be reloaded. React diff unique key to the nodes of the same layer, and moves.

Supplementary: the role of key

When a key attribute is added to a node of the same level, when its position in the current level has changed. After the react diff algorithm compares the new and old nodes, if a new and old node with the same key value is found, it will perform a move operation (and then still compare and update the difference in the node according to the original strategy), instead of deleting the old node by executing the original strategy. The operation of creating a new node. This undoubtedly greatly improves React performance and rendering efficiency

V. Tell me about the life cycle of react

Mount phase

The initialization phase of the component, inserting our component into the DOM, will only happen once

• constructor

• getDerivedStateFromProps

  Replace the previous component Will Mount, component Will ReceiveProps and component Will Update

• componentWillMount
• render
• componentDidMount

Update phase

When the props of the component change, or setState or forceUpdate is called inside the component, it will happen multiple times

• componentWillReceiveProps/UNSAFE_componentWillReceiveProps
• getDerivedStateFromProps

• shouldComponentUpdate

  Triggered when the component receives a new property or the state of the component changes. It is not triggered when the component is first rendered. Generally, we use this function to optimize performance: <u>When a React project needs to update a small component, it is likely to need the parent component to update its state. The re-update of a parent component will cause all of its child components to re-execute the render() method to form a new virtual DOM, and then use the diff algorithm to compare the structure and properties of the old and new virtual DOM to determine whether the component needs to be re-rendered< /u>

  Undoubtedly such an operation will cause a lot of performance waste, so we developers can add conditional judgments to shouldComponentUpdate() according to the business logic of the project to optimize performance (manually judge whether the component needs to be updated)

  For example, React provides a PureComponent class. When our component inherits from it, the new and old properties and state will be compared by default when the component is updated, so as to determine whether the component is updated. It is worth noting that PureComponent performs a shallow comparison, so when the component state or property changes, it needs to return a new object or array

• componentWillUpdate/UNSAFE_componentWillUpdate
• render

• getSnapshotBeforeUpdate

  This method is called after render and before componentDidUpdate. There are two parameters prevProps and prevState, which represent the previous property and the previous state. This function has a return value, which will be passed to componentDidUpdate as the third parameter

  instead of componentWillUpdate

• componentDidUpdate

  Triggered after the component is updated. New DOM elements are generated in the page, and DOM operations can be performed

Uninstall phase

• componentWillUnmount

componentWillUnmount

When our component is uninstalled or destroyed, it will be called. We can clear some timers in this function, cancel network requests, clean up invalid DOM elements and other garbage cleanup work.

Be careful not to call setState in this function, because the component will not be re-rendered

6. How does react specifically reduce repeated rendering through shouldComponentUpdate, and how to do it in function components

When the component state or props are updated, it can be judged whether to continue rendering through this life cycle.

It accepts two parameters nextProps and nextState and returns a Boolean value.

If the life cycle is not declared in the code, React's default processing is:

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

When writing code, you can optimize rendering through this life cycle

    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.name === nextProps.name) {
            return false;
        }
        return true;
    }

Use shouldComponentUpdate() to let React know whether the current state or property changes do not affect the output of the component. By default, it returns true. When it returns false, render will not be overwritten, and this method will not initialize rendering or when using forceUpdate() To be called, all we have to do is this:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.someData !== this.state.someData
}

However, there are so many data in the state, there are objects, and complex types of data React.PureComponent solves this problem

React.PureComponent

React.PureComponent is almost identical to React.Component, but React.PureComponent implements shouldComponentUpate() through a shallow comparison of props and state. If the object contains a complex data structure, it may produce false negative judgments due to the inconsistency of the deep data (shown as the deep data of the object has changed but the view is not updated)

The function component uses useMemo

7. Talk about the two-way binding of vue, the advantages of 3.0 proxy compared to 2.0

8. Event monitoring related

What should the event agent pay attention to

How to set the corresponding function to be executed in the event capture phase

Event binding addventlisner specific parameter content

Nine. Compare whether two objects are equal (not necessarily objects), disadvantages of JSON.stringify()

Two kinds are mentioned, one is similar to deep copy, recursive traversal to compare
The second method uses JSON.stringfy() to convert to JSON strings for comparison, and ask what are the disadvantages of this method

10. Tell me how to realize the vertical centering of a variable width div

1. flex
2. Position positioning, set your own position to absolute, parent element to relative, left: 50%, top: 50% transform: translateX(-50%) translateY(-50%);

11. The difference between get and post

• get is used to get data, post is used to submit data
• The get parameter has a length limit (limited by the length of the url, the specific value depends on the limit of the browser and the server, the maximum length is 2048 bytes), and the post has no limit.
• The data of the get request will be appended to the url, and the url and the transmission data will be separated by "?", multiple parameters are connected with "&", and the data can be seen in the URL. The post request will put the requested data in the http request body.
• Get is transmitted in plain text, and post is placed in the request body, but developers can see through the packet capture tool, which is equivalent to plain text.
• The get request will be saved in the browser history, and may also be saved in the log of the web server
• The URL address generated by GET can be Bookmarked, but not by POST.
• GET requests will be actively cached by the browser, while POST will not, unless manually set.
• In the get method, the server uses Request.QueryString to obtain the value of the variable. For the post method, the server uses Request.Form to obtain the submitted data.
• GET generates one TCP data packet; POST generates two TCP data packets. For GET requests, the browser will send the http header and data together, and the server will respond with 200 (return data); for POST, the browser will send the header first, the server will respond with 100 continue, the browser will send data, and the server will respond. 200 ok (return data).

refer to

Comparison of the differences and advantages between the two frameworks of Vue and React https://segmentfault.com/a/1190000038518135
The role of the key in the react diffing algorithm https://juejin.cn/post/6967626390380216334
The difference between get and post https://www.cnblogs.com/logsharing/p/8448446.html