Article 1. The basis

1. What is the function of keys in React?

  • Keys are an auxiliary identifier used by React to track which elements in a list were changed, added, or removed.
render () {
  return (
    <ul>
      {this.state.todoItems.map(({item, key}) => {
        return <li key={key}>{item}</li>
      })}
    </ul>
  )
}

Copy the code
  • React uses a key to identify components. It is an identity identifier. React considers the same key to be the same component, so components with the same key will not be created
  • Once you have the key property, you establish a relationship with the component. React uses the key to decide whether to destroy and recreate the component or update it.
  • React updates only the component properties if the key is the same. No change, no update.
  • React destroys the component (stateful component constructor and componentWillUnmount) and re-creates the component (stateful component constructor and componentWillUnmount).

2. What happens after setState is called?

  • After calling the setState function in your code, React merges the passed parameter object with the current state of the component, and then triggers what’s 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 the interface rerendering based on the differences.
  • In the difference calculation algorithm, React is able to know with relative precision what has changed and how it should change, which ensures that updates are made on demand rather than completely rerender.

3. How many times will render execute if setstate is triggered multiple times?

  • Multiple setStates are merged into a single render, because setState does not immediately change the value of state, but instead puts it into a task queue and eventually merges multiple setStates to update the page at once.
  • So we can call setState multiple times in our code, each time focusing only on the currently modified field.

React: How to modify state data? Why is setState asynchronous?

  • Modify data through this.setState(parameter 1, parameter 2)
  • This. SetState is an asynchronous function
    • Parameter 1: Yes The data to be modified is an object
    • Parameter 2: is a callback function that verifies that the data has been modified successfully and that the updated DOM structure is equivalent to componentDidMount
  • The first argument in this.setState can be written as a function as well as an object! PrePprops this.setState((prevState,prop)=>({}))

Why is it recommended that the argument passed to setState be a callback rather than an object?

  • Because updates to this.props and this.state can be asynchronous, you cannot rely on their values to calculate the next state

Why is setState an asynchronous one? (See 3)

  • DOM rendering is faster when states are executed in batches, meaning that multiple setStates need to be merged during execution

4. What does react do after this.setState?

  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

5. Describe how the Virtual DOM works. (4 & 5 take one answer)

  • When data changes, such as setState, the component is re-rendered, and the entire UI is re-rendered as a virtual DOM
  • And then collect the diff the difference between the new virtual DOM and the old virtual DOM
  • Finally, the differences in the differences queue, such as adding, deleting, and moving nodes, are updated to the real DOM

5. Why does the virtual DOM improve performance?

  • The virtual DOM is equivalent to adding a cache between JS and the real DOM. Dom diff algorithm is used to avoid unnecessary DOM operations, thus improving performance.
  • The structure of the DOM tree is represented by JavaScript object structures
  • Then use this tree to build a real DOM tree and plug it into the document to reconstruct a new object tree when the state changes.
  • The new tree is then compared with the old tree to record the differences between the two trees. Apply the differences recorded in 2 to the actual DOM tree built in Step 1, and the view is updated.

6. The react principle of the diff

  • Break down the tree structure by hierarchy, comparing only peer elements.
  • Add a unique key attribute to each unit of the list structure for easy comparison.
  • React will only match components of the same class.
  • Merge operation. When calling component’s setState method, React marks it as dirty. At the end of each event loop, React checks that all components marked dirty are redrawn.
  • Select subtree rendering. Developers can rewrite shouldComponentUpdate to improve diff performance.

7. What does refs do in React? (Full version)

  • Refs is a handle to a DOM element or component instance that React provides us with secure access.
  • Is used by the parent component to get the dom element of the child component
  • We can add the ref attribute to the element and then accept the handle to the element in the DOM tree in the callback function, which is returned as the first argument to the callback function
class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}
Copy the code
  • The input field in the code above contains a ref attribute that declares a callback function that accepts the DOM element corresponding to the input, which we bind to the this pointer for use in other class functions.
  • It is also worth noting that refs are not exclusive to class components; functional components can also use closures to temporarily store their values
 function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}
Copy the code

[Easy to understand version (recommended)]

1. Ref is set to a normal string

<button ref="myBtn"></button>
Copy the code
  • Define the ref attribute for the element, and you can later retrieve the actual DOM object by calling this.refs.mybtn
  • Define the ref attribute for the component, which can then be retrieved via this.refs.mybTN

2. Ref is set to the arrow function

<button ref="{ (sl) => { this.myBtn = sl } }"></button>

Copy the code
  • Define the ref attribute for the element, and you can then retrieve the actual DOM object by calling this.myBtn
  • Define the ref attribute for the component, which can then be retrieved via this.myBtn

8. What are the ways to build components in React?

What’s the difference?

  • A function component looks like a function that returns a DOM structure, but behind it is the idea of stateless components.
  • In a function component, you can’t use State, and you can’t use the lifecycle methods of the component, so function components are presentable components, receiving Props, rendering the DOM, and not paying attention to other logic
  • There is no this in the function component
  • Function components are easier to understand. When you see a function component, you know that its function is just to receive properties, render pages, it doesn’t do any uI-independent logic, it’s just a pure function. Regardless of the complexity of the DOM structure it returns.

9. The event handler’s this points to the problem

How do event handlers pass arguments?

  • You can pass parameters using bind
  • I pass the event handler to the arrow function, and then call the method that I wanted to call in the first place. I’m already a normal function.

[Attention!!]

  • If an event handler passes extra arguments, the event object is placed in the last one

2. 100,000 why

1. Why is it best not to use index as the key for list loop rendering?

  • For example

The array values are [1,2,3,4] and the corresponding subscripts for key are: 0,1,2,3

  • So diff finds 1 for key=0 in the array before the change, and 4 for key=0 in the array after the change
  • Re-delete and update the child elements because they are different
  • But if you add a unique key, it looks like this:

The array value before the change is [1,2,3,4], key is the corresponding subscript: id0, id1, id2, id3

After the change, the array value is [4,3,2,1], and the corresponding subscripts of key are id3, id2, id1, id0

  • The diff algorithm finds a key=id0 value of 1 in the array before the change, and a key=id0 value in the array after the change
  • Because the child elements are the same, you don’t delete and update them, you just move them, which improves performance

2. What is status promotion?

3. What are higher-order components?

4. What are controlled components and uncontrolled components?

What is a pure function?

6. What is Context?

7. What is Portal in React?

8. What are the Error Boundaries of React16?

React includes HTML, CSS, JavaScript, ES6, computer networking, browsers, engineering, modularity, Node.js, frameworks, data structures, performance optimizations, projects, and more.

Listed in the article is mainly the outline part, the details can be obtained at the end of the article!

HTML

  • HTML5 new features, semantic
  • Standard mode and weird mode for browsers
  • Differences between XHTML and HTML
  • Benefits of using data-
  • Meta tags
  • canvas
  • HTML obsolete tags
  • IE6 bugs, and some location writing methods
  • CSS JS position and reason
  • What is progressive rendering
  • HTML Template language
  • Principle of meta viewport

CSS

  • Box model, box-sizing
  • CSS3 new features, pseudo class, pseudo element, anchor pseudo class
  • The CSS is used to hide pages
  • How to achieve horizontal centering and vertical centering.
  • So position, display
  • Please explain * {box – sizing: border – box; } and explain the benefits of using it
  • What are the problems and solutions caused by floating elements? Absolute and relative positioning, element float after the display value
  • Link and @import introduce the difference between CSS
  • Explain the CSS3 Flexbox, and how it works
  • Difference between inline and inline-block
  • What are the block-level elements and what are the row-level elements
  • The grid layout
  • The role of the table layout
  • What are the ways to achieve a two-column layout?
  • css dpi
  • You know the difference between an attribute and a property
  • CSS layout problems? How does CSS implement a three-column layout? What if it’s adaptive in the middle?
  • How is streaming layout implemented? How is responsive layout implemented
  • Mobile terminal layout scheme
  • Achieve a three column layout (Grail layout, Twin Wings layout, Flex layout)
  • Clear float principle
  • Overflow: What are the drawbacks of Hidden?
  • Is the padding percentage relative to the parent width or its own width
  • Css3 animation, the difference between Transition and animation, animation properties, acceleration, gravity simulation implementation
  • Transform: Rotate CSS 3
  • sass less
  • What do you know about mobile development? (Responsive design, Zepto; @media, ViewPort, JavaScript regular expression judgment platform.
  • What is a BFC and how do you create one? Solve what problem?
  • CSS unit of length (px, pt, rem, em, ex, vw, vh, vh, vmin, vmax)
  • What is the priority of CSS selectors?
  • Sprite figure
  • svg
  • What is the principle of media query?
  • Does CSS load asynchronously? In what place?
  • What are some common browser compatibility issues? Common hack techniques
  • Margin merge
  • Explain the difference between a double colon and a single colon in “::before” and “:after.

JS

  • What are the basic types of JS? What are the reference types? Null and undefined.
  • How do I determine if a variable is Array type? How do I determine if a variable is of type Number? (More than one)
  • Is Object a reference type? What is the difference between reference types and primitive types? Which one is in the heap and which one is on the stack?
  • JS common DOM manipulation API
  • Explain event bubbling and event capture
  • Event delegate (handwritten example), event bubbling and capturing, how to prevent bubbling? How are default events organized?
  • What about closures? When does a closure form? How to implement closures? What are the pros and cons of closures?
  • What are the usage scenarios for this? How is this different from this in C,Java? How do I change the value of this?
  • Call, apply, bind
  • Display prototype and implicit prototype, hand-drawn prototype chain, what is a prototype chain? Why have a prototype chain
  • Multiple ways to create objects
  • There are many ways to implement inheritance, as well as advantages and disadvantages
  • New what exactly does an object do
  • Handwritten Ajax, XMLHttpRequest
  • Variable ascension
  • Illustrate a typical use case for an anonymous function
  • Point out the difference between JS host objects and native objects, why extending JS built-in objects is not a good practice? What built-in objects and built-in functions are there?
  • Attribute and Property
  • Document Load and Document DOMContentLoaded
  • = = = and = = = = = [] [], undefined = = = undefined, [] = = [], undefined = = is undefined
  • What values typeof can get
  • What is “use strict”, the pros and cons
  • What is the scope of the function? How many scopes does JS have?
  • How does JS implement overloading and polymorphism
  • Common array API, string API
  • Native event binding (cross-browser), difference between DOM0 and Dom2?
  • Given an element gets its coordinates relative to the view window
  • How to realize lazy loading of picture scrolling
  • What are the methods for string types in JS? How to use regular expression functions?
  • Deep copy
  • Write a generic event listener function
  • Setting and obtaining cookies on the Web side
  • Execution order of setTimeout and promise
  • What is the JavaScript event flow model?
  • Navigator objects, Location, and History
  • Js garbage collection mechanism
  • Causes and scenarios of memory leaks
  • Several ways to bind DOM events
  • The difference between target and currentTarget in DOM events
  • Typeof is different from Instanceof, the Instanceof principle
  • Js animation and CSS3 animation comparison
  • JavaScript Countdown (setTimeout)
  • Js handling exceptions
  • The JS design pattern knows that
  • The realization of the rote map, as well as the rote map component development, rote 10000 picture process
  • The working principle and mechanism of WebSocket.
  • What happens when a finger clicks on a touchable screen?
  • What is a function Coriolization? What is the APPLICATION of THE JS API to the implementation of the function Coriolization? The bind function and array reduce method in JS are used in the function curryization.
  • JS code debugging

The framework

  • What frameworks have you used?
  • How is zepto related to jquery?
  • How to implement the selector in jquery source code, why the $object is designed as an array, what is the purpose of this design
  • How does jquery bind events, how many types and differences are there
  • What is MVVM, MVC, MVP
  • Two-way data binding between Vue and Angular
  • Vue, Communication between Angular components, and routing
  • React and Vue life cycles
  • React and Vue virtual DOM and diff algorithms
  • Vue observer, Watcher, compile
  • What businesses do React and Angular use? Performance versus MVC level
  • What is the difference between a jQuery object and a JS Element
  • How are jQuery objects implemented
  • Aside from the methods that jQuery encapsulates, what else is there to learn and use?
  • What does jQuery’s $(‘ XXX ‘) do
  • Describe how the Bootstrap grid system is implemented

Browser dependent

  • Cross-domain, why does JS restrict cross-domain
  • Front-end security: XSS, CSRF…
  • How does the browser load the page? What is the solution to script blocking? What is the difference between defer and Async?
  • Browser strong caching and negotiated caching
  • What are the browser’s global variables
  • How many resources a browser can download from a domain name at one time
  • Load on demand, judging criteria for elements of different pages
  • Use and distinction of Web storage, cookies, LocalStroge, etc
  • The browser kernel
  • How to implement the caching mechanism? (from 200 cache, to cache, to etag, to)
  • Explain the difference between 200 and 304
  • What is preloading, lazy loading
  • How many states can an XMLHttpRequest instance have?
  • DNS resolution principle, how to find the server after entering the URL
  • How does the server know about you?
  • Browser rendering process
  • Some compatibility problems with IE
  • session
  • Drag and drop to realize
  • Unpick the parts of the URL

## Complete interview questions at the end of the paper directly to receive free.

ES6

  • To talk about a promise
  • Do you know all the ES6 features? If you come across something and you don’t know if it’s ES6 or ES5, how do you tell it apart
  • What is the difference between ES6 inheritance and ES5 inheritance
  • Promise to encapsulate the ajax
  • Advantages of let const
  • What is ES6 generator and async/await implementation principle
  • ES6 and Node commonJS modular specification differences
  • Arrow function, and its this

Computer network

  • HTTP protocol header contains what important parts, HTTP status code
  • How do I do web URL input to output?
  • Why should performance tuning reduce THE number of HTTP calls?
  • The process and principle of Http request
  • HTTPS (yes HTTPS) how many handshakes and waves? How HTTPS works.
  • How many waves and handshakes does HTTP have? What is the Chinese name for TLS? Which network layer is TLS?
  • What are the features of TCP connections? How can TCP connections be secure and reliable?
  • Why does a TCP connection require three handshakes, not two? Why
  • Why does TCP have three handshakes and four waves?
  • TCP three-way handshake and four-way wave drawing (write ack and SEq values on the spot)?
  • Differences between TCP and UDP
  • What’s the difference between get and Post? When is it used?
  • What is the difference between HTTP2 and HTTP1?
  • websocket
  • What is a TCP stream and what is an HTTP stream
  • How does Babel compile ES6 code into ES5
  • Persistent connection and pipelining of HTTP2
  • TCP or UDP for domain name resolution
  • Domain name divergence and domain name convergence
  • When you Post a file, where does the file go?
  • What’s in the Header of the HTTP Response?

engineering

  • Do you know webpack,gulp, Grunt, etc? Contrast.
  • Webpack entry file how to configure, how to split multiple entry.
  • Webpack loader and Plugins are different
  • Specific use of GULP.
  • Understanding front-end engineering, how to implement a file package yourself, such as a JS file with ES5 and ES6 code, how to compile compatible with them

modular

  • Do you know anything about AMD,CMD,CommonJS?
  • Why modularity? How to write code when not in use and when using RequireJs?
  • Tell me what modularity libraries are out there. Do you know the history of modularity?
  • Respectively talk about synchronous and asynchronous modular application scenarios, say the principle of AMD asynchronous modular implementation?
  • How to replace all the require module syntax in the project with the ES6 syntax of import?
  • When using modular loading, what is the order in which modules are loaded, and if not, what do you think the order should be based on what you already know?

Nodejs

  • Do you know anything about NodeJS
  • What is the relationship between Express and KOA, and what is the difference?
  • What kind of business is NodeJS suited for?
  • How is NodeJS different from PHP and Java
  • What is the difference between Stream and Buffer in Nodejs?
  • How is node asynchrony resolved?
  • How does Node achieve high concurrency?
  • Describe the principle of Nodejs event loop

The data structure

  • Basic data structures :(arrays, queues, linked lists, heaps, binary trees, hash tables, etc.)
  • Eight sorting algorithms, principles, and applicable scenarios and complexity
  • Can you tell me as many ways as possible to implement the Fiboacci sequence?

Performance optimization

  • What is the use of CDN? When do you need it?
  • Page optimization for the browser?
  • How can I optimize the performance of DOM operations
  • What are the SEO solutions for single page apps?
  • Why is the first screen of a single page app slow? What are the solutions?

other

  • Regular expression
  • Advantages and disadvantages of front-end and back-end rendering
  • Four characteristics of database, what is atomicity, table relationships
  • What do you think the front-end architecture should look like?
  • A static resource to go online, there are all kinds of resource dependency, how do you smoothly online
  • If you were asked to implement a front-end template engine, what would you do
  • Do you know about streaming media queries?
  • SEO
  • What’s the difference between mysql and mongoDB?
  • Restful Method description
  • Knowledge of database and operating system
  • Click has 300ms latency on ios, why and how to solve it
  • Mobile adaptation, REM + media query /meta header Settings
  • Gestures and events on mobile;
  • Unicode, UTF8, GBK code understanding, garbled code solution

Open-ended questions frequently asked on three or four sides

  • What books have you read? What are you reading these days?
  • What framework have you used? Have you seen any framework code?
  • Have you studied design patterns?
  • Talk about the observer model! Can you write that down?
  • What is your greatest strength? What is your greatest weakness?
  • What’s the craziest thing you did in college?
  • What output do you have other than blogging?
  • Now your boss gives you a job that you need to complete in a week, but you look at the requirements and estimate that it will take 3 weeks to complete. What should you do?
  • Focus on front-end technology
  • How to plan your career
  • Did you meet any problems during the project? How did it work out?
  • What are you working on these days?
  • Please introduce a study plan in your favorite and best professional field.
  • Please introduce the most impressive project you participated in, why? Also introduce your role and role in the project.

HR side

  • Why did you learn the front end?
  • How do you normally learn the front end? What is the output?
  • What was your best project?
  • What can you learn from the people you admire? Why aren’t you like them?
  • What are some of your coworkers’ problems that you find annoying
  • What was the most stressful thing?
  • Best project you ever worked on with a classmate?
  • What do your friends usually say about you
  • What kind of work environment do you like
  • How to Deal with Overtime
  • Are you dating anyone
  • Intention to city
  • Other offers
  • Why should YOU be admitted?
  • The three things that take the most time in college
  • What do you do on weekends?
  • Future Career Planning

advice

  • Don’t come across as wanting to start a business. On the blackboard.

  • If you have never read the source code, it is recommended to start with jQuery, Zepto and so on. Later you can understand the source code ideas and implementation of Vue, React common functions.

  • When describing the project experience, don’t be too detailed and pick the key points.

Due to limited space, only part of the interview questions can be shared【 Click on me 】Read download oh ~ free to share with you