The summary of React interview questions mainly includes basic knowledge, React components, React Redux, and React routing .
basic knowledge
1. Distinguish between Real DOM and Virtual DOM
| Real DOM | Virtual DOM |
|---|---|
| Updates are slow. | Update faster. |
| You can update HTML directly. | Cannot update HTML directly. |
| If the element is updated, a new DOM is created. | If the element is updated, update the JSX. |
| DOM manipulation is expensive. | DOM manipulation is very simple. |
| Consume more memory. | Very little memory consumption. |
2. What is React?
- React is a front-end JavaScript library developed by Facebook in 2011.
- It follows a component-based approach and helps build reusable UI components.
- It is used to develop complex and interactive Web and mobile UI.
- Although it was only open sourced in 2015, there is a large support community.
3. What are the characteristics of React?
The main functions of React are as follows:
1) It uses virtual DOM instead of real DOM.
2) It can be rendered on the server side .
3) It follows one-way data flow or data binding.
4. List some of the main advantages of React.
Some of the main advantages of React are:
1) It improves the performance of the application
2) It can be easily used on the client and server side
3) The code is very readable due to JSX
4) React is easy to integrate with other frameworks such as Meteor, Angular
5) Using React, It's very easy to write UI test cases
5. What are the limitations of React?
React’s limitations are as follows:
1) React is just a library, not a complete framework
2) Its library is very large and it takes time to understand
3) It may be difficult for novice programmers to understand
4) The coding becomes complicated because it uses inline templates and JSX
6. What is JSX?
JSX is short for JavaScript XML. It is a file used by React, which uses the expressive power of JavaScript and HTML-like template syntax. This makes HTML files very easy to understand. This file makes the application very reliable and can improve its performance. Here is an example of JSX:
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);
}
7. Do you know Virtual DOM? Explain how it works.
Virtual DOM is a lightweight JavaScript object that was originally a copy of real DOM. It is a node tree, which treats elements, their attributes and content as objects and their attributes. React's rendering function creates a node tree from React components. It then updates the tree in response to changes in the data model caused by various actions performed by the user or the system.
There are three simple steps in the Virtual DOM working process.
1) Whenever the underlying data changes, the entire UI will be re-rendered in the Virtual DOM description.
2) Then calculate the difference between the previous DOM representation and the new representation.
3) After the calculation is completed, the real DOM will only be updated with the actual changed content.
8. Why can't the browser read JSX?
The browser can only process JavaScript objects, but cannot read JSX in regular JavaScript objects. So in order for the browser to be able to read JSX, first, you need to use a JSX converter like Babel to convert the JSX file into a JavaScript object, and then pass it to the browser.
9. Compared with ES5, how is React's ES6 syntax different?
The following syntax is the difference between ES5 and ES6:
1）require 与 import
// ES5
var React = require('react');
// ES6
import React from 'react';
2) Export and exports
// ES5
module.exports = Component;
// ES6
export default Component;
3）component 和 function
// ES5
var MyComponent = React.createClass({
render: function() {
return
<h3>Hello Edureka!</h3>;
}
});
// ES6
class MyComponent extends React.Component {
render() {
return
<h3>Hello Edureka!</h3>;
}
}
4）props
// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
<h3>Hello, {this.props.name}!</h3>;
}
});
// ES6
class App extends React.Component {
render() {
return
<h3>Hello, {this.props.name}!</h3>;
}
}
5）state
// ES5
var App = React.createClass({
getInitialState: function() {
return { name: 'world' };
},
render: function() {
return
<h3>Hello, {this.state.name}!</h3>;
}
});
// ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: 'world' };
}
render() {
return
<h3>Hello, {this.state.name}!</h3>;
}
}
10. How is React different from Angular?
| theme | React | Angular |
|---|---|---|
| Architecture | Only View in MVC | Complete MVC |
| Rendering | Can be rendered on the server side | Client rendering |
| JUDGMENT | Use virtual DOM | Use real DOM |
| Data binding | One-way data binding | Two-way data binding |
| debugging | Debug at compile time | Runtime debugging |
| Author |
All the content of the React interview question summary has been organized into a PDF document. If you need it, you can click here to get it for free . It also includes the front-end CSS interview question document, JavaScript interview question document, Vue interview question document, and Dachang interview question document , all available for free!
React components
1. You understand the phrase "In React, everything is a component".
2. Explain the purpose of render() in React.
3. How to embed two or more components into one component?
4. What is Props?
5. What is the state in React? How is it used?
6. Distinguish between state and props
7. How to update the state of the component?
8. What are arrow functions in React? how to use?
9. Distinguish between stateful and stateless components.
10. What are the stages of the React component life cycle?
11. Explain in detail the life cycle methods of React components.
12. What are events in React?
13. How to create an event in React?
14. What are synthetic events in React?
15. What do you know about React's refs?
16. List some situations where Refs should be used.
17. How to modularize code in React?
18. How to create a form in React
19. How much do you know about controlled and uncontrolled components?
20. What is a high-order component (HOC)?
21. What can you do with HOC?
22. What is a pure component?
23. What is the importance of keys in React?
React Redux
1. What are the main problems of the MVC framework?
2. Explain Flux
3. What is Redux?
4. What are the three principles that Redux follows?
5. What is your understanding of "single source of truth"?
6. List the components of Redux.
7. How does data flow through Redux?
8. How to define Action in Redux?
9. Explain the role of Reducer.
10. What is the meaning of Store in Redux?
11. What is the difference between Redux and Flux?
12. What are the advantages of Redux?
React routing
1. What is React routing?
2. Why is the switch keyword used in React Router v4?
3. Why do you need routing in React?
4. List the advantages of React Router.
5. How is React Router different from regular routing?
If you need it, you can click here to get it for free . It also includes front-end CSS interview question documents, JavaScript interview question documents, Vue interview question documents, and Dachang interview question documents , all of which are available for free!
