35 interview questions you must know and master React-JS Tutorial-php.cn

35 interview questions you must know and master React

[Related topic recommendations:react interview questions(2020)]

Question 1: What is Virtual DOM?

Theme: React
Difficulty: ⭐

Virtual DOM (VDOM)is an in-memory representation of the real DOM. The representation of the UI is kept in memory and synchronized with the actual DOM. This is a step that occurs between the rendering function being called and the element being displayed on the screen. The entire process is calledreconciliation.

Question 2: What is the difference between class components and function components?

Theme: React
Difficulty: ⭐⭐

##Class componentCan use other features such as statestateand lifecycle hooks.
propsand renders it to the page, it is a stateless component and is a functional component. It is also called a dumb component or a display component.

Of course there is a difference between function components and class components, and the performance of function components is higher than that of class components, because class components need to be instantiated when used, while function components directly execute function fetching Just return the result. To improve performance, try to use functional components.

Question 3: Why are refs used in React?

Theme: React
Difficulty: ⭐⭐

RefsProvides a way to access the DOM created in therendermethod Methods of nodes or React elements. In a typical data flow,propsis the only way for parent and child components to interact. If you want to modify a child component, you need to re-render it with a newpros. There are exceptions to everything. In some cases, we need to force modification of children outside of the typical data flow. In this case,Refscan be used.

We can add arefattribute to the component to use. The value of this attribute is a callback function that receives the underlying DOM element or the mounted instance of the component as its first parameter.

class UnControlledForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return (   this.input = input} />  
 ) } }

Copy after login

Please note that theinputelement has arefattribute whose value is a function. This function receives the actual DOM element of the input and then places it on the instance so that it can be accessed inside thehandleSubmitfunction.

It is often misunderstood thatrefscan only be used within class components, butrefscan also be used with function components by leveraging closures in JS.

function CustomForm ({handleSubmit}) { let inputElement return (  handleSubmit(inputElement.value)}>  inputElement = input} />  
 ) }

Copy after login

Question 4: How to handle events in React

Topic: React
Difficulty: ⭐⭐

In order to solve cross-browser issues Compatibility issue,SyntheticEventinstance will be passed to your event handler function,SyntheticEventis React's cross-browser browser native event wrapper, it also has browser native events The same interface, includingstopPropagation()andpreventDefault().

What’s interesting is that React doesn’t actually attach events to the child nodes themselves. React uses a single event listener to listen to all events at the top level. This is good for performance and means React doesn't need to track event listeners when updating the DOM.

Question 5: What is the difference between state and props?

Theme: React
Difficulty: ⭐⭐

propsandstateare ordinary JS objects. Although they both contain information that affects rendered output, their functionality in terms of components is different. That is,

stateis the component’s own data management, control of its own state, and is variable;
propsis the data passed in from the outside. Parameters, immutable;
Those withoutstateare called stateless components, and those withstateare called stateful components;
Useprops more, use lessstate, that is, write more stateless components.

Question 6: How to create refs

Theme: React
Difficulty: ⭐⭐

Refs are created usingReact .createRef()Created and attached to the React element via therefattribute. When constructing a component, you typically assignRefsto instance properties so that they can be referenced throughout the component.

class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ; } }

Copy after login

Or use it like this:

class UserForm extends Component { handleSubmit = () => { console.log("Input Value is: ", this.input.value) } render () { return (   this.input = input} /> // Access DOM input in handle submit  
 ) } }

Copy after login

Question 7: What are higher-order components?

Theme: React
Difficulty: ⭐⭐

Higher Order Component (HOC)is a function that accepts a component and returns a new component. Basically, this is a pattern derived from the composition feature of React, calledPure Componentsbecause they can accept any dynamically provided subcomponent, but do not modify or copy the input component any behavior in.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Copy after login

HOC can be used for many of the following use cases

Code reuse, logic and bootstrapping abstractions
Render hijacking
state abstractions and operations
props processing

Question 8: What is the role of calling`super`in the constructor and passing`props`as a parameter?

Topic: React
Difficulty: ⭐⭐

The subclass constructor cannot be used until thesuper()method is calledthisQuotes, the same goes for ES6 subclasses. The main reason for passingpropsparameters to thesuper()call is to be able to obtain the incomingprops throughthis.propsin the child constructor.

Passing props

class MyComponent extends React.Component { constructor(props) { super(props); console.log(this.props); // { name: 'sudheer',age: 30 } } }

Copy after login

Not passing props

class MyComponent extends React.Component { constructor(props) { super(); console.log(this.props); // undefined // 但是 Props 参数仍然可用 console.log(props); // Prints { name: 'sudheer',age: 30 } } render() { // 构造函数外部不受影响 console.log(this.props) // { name: 'sudheer',age: 30 } } }

Copy after login

The above example reveals something. The behavior ofpropsis different only inside the constructor, it is the same outside the constructor.