Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain what are the React interview questions that must be met. Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the React interview questions that must be met"?

Basic knowledge 1. Distinguish Real DOM from Virtual DOMReal DOMVirtual DOM1. Updates are slow. 1. Update faster. two。 You can update HTML directly. two。 HTML cannot be updated directly. 3. If the element is updated, a new DOM is created. 3. If the element is updated, update the JSX. 4. The operation of DOM is very expensive. 4. The DOM operation is very simple. 5. Consumes a lot of memory. 5. Low memory consumption. two。 What is React?

React is a front-end JavaScript library developed by Facebook in 2011.

It follows a component-based approach and helps to build reusable UI components.

It is used to develop complex and interactive Web and mobile UI.

Although it is open source only in 2015, it has a large support community.

3. What are the characteristics of React?

The main functions of React are as follows:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

It uses virtual DOM instead of real DOM.

It can be rendered on the server side.

It follows an one-way data flow or data binding.

4. List some of the main benefits of React.

Some of the main advantages of React are:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

It improves the performance of applications.

It can be easily used on the client and server side.

Because of JSX, the code is very readable

React is easy to integrate with other frameworks such as Meteor,Angular

Using React, writing UI test cases becomes very easy

5. What are the restrictions on React?

The restrictions on React are as follows:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

React is just a library, not a complete framework.

Its library is so large that it takes time to understand.

It may be difficult for novice programmers to understand

Coding becomes complex because it uses inline templates and JSX

6. What is JSX?

JSX is the abbreviation of JavaScript XML. Is a file used by React that takes advantage of the expressiveness of JavaScript and template syntax similar to HTML. This makes the HTML file very easy to understand. This file makes the application very reliable and can improve its performance. Here is an example of JSX:

Render () {return (Hello World from Edureka!);} 7. Do you know anything about Virtual DOM? Explain how it works.

Virtual DOM is a lightweight JavaScript object that was originally just a copy of real DOM. It is a node tree that takes elements, their attributes, and content as objects and their attributes. The render function of React creates a node tree from the React component. It then updates the tree in response to changes in the data model caused by various actions completed by the user or the system.

There are three simple steps in the working process of Virtual DOM.

1. Whenever the underlying data changes, the entire UI is re-rendered in the Virtual DOM description.

two。 Then calculate the difference between the previous DOM representation and the new representation.

3. When the calculation is complete, the real DOM will be updated with only the actual changes.

8. Why can't browsers read JSX?

Browsers can only work with JavaScript objects and cannot read JSX in regular JavaScript objects. So in order for the browser to read JSX, you first 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. How is React's ES6 syntax different from ES5?

The following syntax is the difference between ES5 and ES6:

1.require and 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 and function

/ / ES5 var MyComponent = React.createClass ({render: function () {return Hello Edureka;}}); / / ES6 class MyComponent extends React.Component {render () {return Hello Edureka;}}

4.props

/ / ES5 var App = React.createClass ({propTypes: {name: React.PropTypes.string}, render: function () {return Hello, {this.props.name}!;}); / / ES6 class App extends React.Component {render () {return Hello, {this.props.name}!;}}

5.state

/ / ES5 var App = React.createClass ({getInitialState: function () {return {name: 'world'};}, render: function () {return Hello, {this.state.name}!;}}); / / ES6 class App extends React.Component {constructor () {super (); this.state = {name:' world'} } render () {return Hello, {this.state.name}!;}} 10. What is the difference between React and Angular? Topic ReactAngular1. The architecture has only View in MVC and complete MVC2. Rendering can be server-side rendering client-side rendering 3. DOM uses virtual DOM to use real DOM4. Data binding one-way data binding two-way data binding 5. Debug compile-time debug runtime debug 6. Author FacebookGoogleReact component 11. How do you understand the phrase "in React, everything is a component?"

Components are the building blocks of React application UI. These components divide the entire UI into small, independent and reusable parts. Each component is independent of each other without affecting the rest of the UI.

twelve。 How to explain the purpose of render () in React.

Each React component enforces a render (). It returns a React element, which is a representation of the native DOM component. If you need to render multiple HTML elements, you must combine them in a closed tag, such as, and so on. This function must be kept clean, that is, the same result must be returned every time it is called.

13. How do I embed two or more components into one component?

You can embed a component into a component in the following ways:

Class MyComponent extends React.Component {render () {return (Hello);}} class Header extends React.Component {render () {return Header Component};} ReactDOM.render (, document.getElementById ('content')); 14. What is Props?

Props is an abbreviation for attributes in React. They are read-only components and must remain pure, that is, immutable. They are always passed from parent components to child components throughout the application. Child components can never send prop back to the parent component. This helps maintain an one-way data stream, which is often used to render dynamically generated data.

15. What is the status in React? How does it work?

State is the core of React components, the source of data, and must be as simple as possible. Basically, a state is an object that determines the presentation and behavior of a component. Unlike props, they are mutable and create dynamic and interactive components. You can access them through this.state ().

16. Distinguish between state and props condition StateProps1. Receives the initial value YesYes2 from the parent component. The parent component can change the value NoYes3. Set the default value in the component, YesYes4. Change the YesNo5 inside the component. Set the initial value of the subcomponent YesYes6. Change NoYes17. Exe inside the subcomponent. How do I update the status of a component?

You can update the status of the component with this.setState ().

Class MyComponent extends React.Component {constructor () {super () This.state = {name:' Maxx', id:' 101'}} render () {setTimeout () = > {this.setState ({name:'Jaeha', id:'222'})} 2000) return (Hello {this.state.name} Your Id is {this.state.id}) }} ReactDOM.render (, document.getElementById ('content')); 18. What is the arrow function in React? How do I use it?

The arrow function (= >) is a short syntax for writing function expressions. These functions allow the context of the component to be bound correctly because automatic binding cannot be used by default in ES6. The arrow function is very useful when using higher-order functions.

/ / General way render () {return ();} / / With Arrow Function render () {return (this.handleOnChange (e)} / >);} 19. Distinguish between stateful and stateless components. Stateless component 1. Store information about component state changes in memory 1. Calculate the internal state of the component 2. Have the right to change the state 2. No right to change status 3. Including possible state changes in the past, present and future 3. Does not include possible state changes in the past, present and future 4. Accept notification of stateless component state change requirements and send props to them. 4. Receives a props from a stateful component and treats it as a callback function. 20. What is the phase of the life cycle of React components?

There are three different phases in the life cycle of React components:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Initial rendering phase: this is the stage where the component is about to begin its life journey and enter the DOM.

Update phase: once a component is added to DOM, it can be updated and re-rendered only when the prop or state changes. This only happens at this stage.

Uninstall phase: this is the * * phase of the component life cycle, where the component is destroyed and removed from the DOM.

21. Explain the lifecycle approach of React components in detail.

Some of the most important lifecycle approaches are:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

ComponentWillMount ()-executes before rendering, on both the client and server sides.

ComponentDidMount ()-executed on the client only after * renderings.

ComponentWillReceiveProps ()-called when a props is received from the parent class and before another renderer is called.

ShouldComponentUpdate ()-returns true or false based on specific conditions. If you want to update the component, please return true otherwise return false. By default, it returns false.

ComponentWillUpdate ()-called before rendering in DOM.

ComponentDidUpdate ()-called immediately after rendering occurs.

ComponentWillUnmount ()-called after the component is unloaded from DOM. Used to clean up memory space.

twenty-two。 What are the events in React?

In React, events are triggered responses to specific actions such as mouse hovers, mouse clicks, keystrokes, and so on. Handling these events is similar to handling events in the DOM element. But there are some grammatical differences, such as

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Use hump naming to name events instead of using only lowercase letters.

Events are passed as functions rather than strings.

The event parameter recontains a set of event-specific properties. Each event type contains its own properties and behaviors that can only be accessed through its event handler.

23. How do I create an event in React? Class Display extends React.Component ({show (evt) {/ / code}, render () {/ / Render the div with an onClick prop (value is a function) return (Click Me!);}}); 24. What are the composite events in React?

Composite events are objects that act as cross-browser wrappers around browser native events. They combine the behavior of different browsers into a single API. This is done to ensure that events display consistent properties in different browsers.

25. What do you know about React's refs?

Refs is an abbreviation for references in React. It is an attribute that helps store references to specific React elements or components and is returned by the component rendering configuration function. Used for references to specific elements or components returned by render (). They come in handy when you need to make DOM measurements or add methods to components.

Class ReferenceDemo extends React.Component {display () {const name = this.inputDemo.value; document.getElementById ('disp') [xss_clean] = name;} render () {return (Name: this.inputDemo = input} / > Click Hello!!);} 26. List some situations where Refs should be used.

Here are the situations where refs should be used:

When you need to manage focus, select text or media playback

Trigger animation

Integration with third-party DOM libraries

twenty-seven。 How to modularize the code in React?

You can use the export and import properties to modularize the code. They help you write components separately in different files.

/ / ChildComponent.jsx export default class ChildComponent extends React.Component {render () {return (This is a childcomponent);}} / / ParentComponent.jsx import ChildComponent from'. / childcomponent.js' Class ParentComponent extends React.Component {render () {return ();}} 28. How to create a form in React

React forms are similar to HTML forms. In React, however, the state is contained in the state property of the component and can only be updated through setState (). Therefore, elements cannot update their status directly, and their submissions are handled by the JavaScript function. This function provides full access to the data that the user enters into the form.

HandleSubmit (event) {alert ('A name was submitted:'+ this.state.value); event.preventDefault ();} render () {return (Name:);} 29. How much do you know about controlled and uncontrolled components? Controlled component uncontrolled component 1. Did not maintain their own state 1. Keep yourself in shape 2. The data is controlled by the parent component 2. The data is controlled by DOM. Get the current value through props, and then change it through callback notification. Refs is used to get its current value of 30. What are high-level components (HOC)?

High-level component is an advanced method of reusing component logic, and it is a component pattern derived from React. HOC is a custom component that contains another component within it. They can accept any dynamics provided by subcomponents, but do not modify or copy any behavior in their input components. You can think of HOC as a "Pure" component.

thirty-one。 What can you do with HOC?

HOC can be used for many tasks, such as:

Code reuse, logic, and guided abstraction

Render hijacking

State abstraction and control

Props control

thirty-two。 What is a pure component?

Pure components are the simplest and fastest components that can be written. They can replace any component that has only render (). These components enhance the simplicity of code and the performance of applications.

thirty-three。 What is the importance of key in React?

Key is used to identify unique Virtual DOM elements and the corresponding data that drives the UI. They help React optimize rendering by recycling all the elements currently in DOM. These key must be unique numbers or strings, and React is just reordering elements rather than re-rendering them. This improves the performance of the application.

React Redux34. What are the main problems with the MVC framework?

Here are some of the main problems with the MVC framework:

The cost of DOM operation is very high.

The program runs slowly and inefficiently

Serious waste of memory

Because of circular dependencies, the component model needs to be created around models and views

thirty-five。 Explain Flux.

Flux is an architectural pattern that enforces unidirectional data flow. It controls derived data and uses a central store with all data permissions to communicate between multiple components. Data updates throughout the application must only take place here. Flux provides stability for applications and reduces runtime errors.

thirty-six。 What is Redux?

Redux is one of the hottest front-end development libraries today. It is a predictable state container for JavaScript programs and is used for state management of the entire application. Applications developed with Redux are easy to test, can run in different environments, and show consistent behavior.

thirty-seven。 What are the three principles that Redux follows?

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Single source of fact: the state of the entire application is stored in an object / state tree in a single store. A single state tree makes it easier to track changes over time and debug or check applications.

State is read-only: the only way to change the state is to trigger an action. Actions are ordinary JS objects that describe changes. Just as state is the smallest representation of data, this operation is the smallest representation of changes to the data.

Use pure functions to make changes: in order to specify how the state tree is transformed by operation, you need pure functions. Pure functions are those whose return values depend only on their parameter values.

thirty-eight。 What is your understanding of "single source of fact"?

Redux uses "Store" to store the entire state of the program in the same place. So the state of all components is stored in the Store, and they receive updates from the Store itself. A single state tree makes it easier to track changes over time and debug or check programs.

thirty-nine。 Lists the components of Redux.

Redux consists of the following components:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Action-this is an object used to describe what happened.

Reducer-this is a place to determine how the state will change.

Store-the state / object tree of the entire program is saved in Store.

View-displays only the data provided by Store.

forty。 How does data flow through Redux?

forty-one。 How to define Action in Redux?

The Action in React must have the type property, which indicates the type of ACTION being executed. They must be defined as string constants, and more attributes can be added to them. In Redux, action is created by a function named Action Creators. The following are examples of Action and Action Creator:

Function addTodo (text) {return {type: ADD_TODO, text} 42. Explain the role of Reducer.

Reducers is a pure function that specifies how the state of the application changes in response to ACTION. Reducers works by accepting the previous state and action, and then it returns a new state. It determines which update needs to be performed based on the type of operation, and then returns the new value. If you do not need to complete the task, it will return to its original state.

forty-three。 What is the meaning of Store in Redux?

Store is a JavaScript object that saves the state of a program and provides methods to access it, schedule operations, and register listeners. The entire state / object tree of the application is stored in a single storage. Therefore, Redux is very simple and predictable. We can pass the middleware to store to process the data and record the various operations that change the storage state. All operations return a new state through reducer.

forty-four。 What is the difference between Redux and Flux? FluxRedux1. Store contains state and change logic 1. Store and change logic are separate 2. There are multiple Store2. There is only one Store3. All Store are independent of each other and are equal to 3. 5%. A single Store4 with hierarchical reducer. There is a single scheduler 4. There is no concept of a scheduler. 5. React components subscribe to store5. Container components are related 6. 5. The state is variable 6. The state is unchangeable 45. What are the advantages of Redux?

The advantages of Redux are as follows:

Predictability of results-since there is always a real source, the store, there is no question of how to synchronize the current state with the rest of the action and application.

Maintainability-the code becomes easier to maintain, with predictable results and a strict structure.

Server-side rendering-you just need to send the store created on the server to the client. This is useful for initial rendering and can optimize application performance to provide a better user experience.

Developer tools-developers can track everything that happens in the application in real time, from operations to state changes.

Communities and ecosystems-there is a huge community behind Redux, which makes it even more fascinating. A large community of talented people has contributed to the improvement of the library and developed various applications.

Easy to test-Redux's code is mainly small, pure, and independent functionality. This makes the code testable and independent.

Organization-Redux describes exactly how the code is organized, which makes the code more consistent and easier to use by the team.

React routing 46. What is React routing?

React routing is a powerful routing library built on top of React that helps add new screens and flows to applications. This keeps URL in sync with the data displayed on the web page. It is responsible for maintaining standardized structure and behavior and is used to develop single-page Web applications. React routes have a simple API.

forty-seven。 Why is the switch keyword used in React Router v4?

Although used to encapsulate multiple routes in Router, you can use the "switch" keyword when you want to display only a single route to be rendered in multiple defined routes. When used, the tag matches the defined URL with the defined route sequentially. When * matches are found, it renders the specified path. To bypass other routes.

forty-eight。 Why is routing in React needed?

Router is used to define multiple routes, and when a user defines a specific URL, if the URL matches the path of any "route" defined within the Router, the user will be redirected to that particular route. So basically we need to add a Router library to our application, which allows us to create multiple routes, each of which provides us with a unique view.

forty-nine。 List the advantages of React Router.

Several advantages are:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Just like React is based on components, in React Router v4, API is' All About Components'. You can visualize Router as a single root component (), where we wrap a specific child route ().

There is no need to manually set the history value: in React Router v4, all we have to do is wrap the route in the component.

Packages are separate: there are three packages for Web, Native, and Core. This makes our application more compact. It is easy to switch based on a similar coding style.

fifty。 How is React Router different from regular routing? Topic general routing React routing participating pages each view corresponds to a new file involving only a single HTML page URL change HTTP request is sent to the server and receives the corresponding HTML page only change history properties experience users actually switch between different pages of each view users think they are switching between different pages, I believe you have a better understanding of "what are the necessary React interview questions" You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.