面试题与答案

A virtual DOM is a simple JavaScript object that is the exact copy of the corresponding real DOM. It can be considered as a node tree that consists of elements, their attributes, and other properties. Using the render function in React, it creates a node tree and updates it based on the changes that occur in the data model. These changes are usually triggered by users or the actions caused by the system.

Next up among these React interview questions, you need to take a look at some of the important features that React offers.

JSX is the abbreviation of JavaScript XML. It is a file that is used in React to bring out the essence of JavaScript to React and use it for its advantages.

It even includes bringing out HTML and the easy syntax of JavaScript. This ensures that the resulting HTML file will have high readability, thereby relatively increasing the performance of the application.

Consider the following example of a JSX:

render(){  return(    <div>    <h1> Hello Intellipaat learners!</h1>    </div>  );}

No, browsers cannot read JSX files directly. It can only read the objects provided by JavaScript. Now, to make a browser read a JSX file, it has to be transformed to a JavaScript object using JSX transformers, and only then it can be fed into the browser for further use in the pipeline.

There are some limitations when using React as mentioned below:

• Writing code is complicated as it uses JSX and inline template formatting.
• Beginners might find it tough to cope with its syntaxes and methods.
• The library contains a huge repository of information, which might be overwhelming.
• React is a simple library and not a complete framework hence calls for dependencies.

Please check this: http://withoutbook.com/DifferenceBetweenSubjects.php?subId1=115&subId2=114&d=Difference%20between%20Angular%20and%20React

Higher-order components (HOCs) are a widely used technique in React for applying concepts that involve the component reusability logic. They are not a native part of the React API and allow users to easily reuse the code and bootstrap abstraction.

HOCs are also used to allow simple sharing of behaviors across all of the components in React, adding more advances to the efficiency and functioning of the application.

Making use of create-react-app is advantageous in the following way:

• Support for JSX, ES6, and flow statements
• Already built and ready auto-prefixed CSS
• Fast interactive testing components
• Live development servers that help in debugging
• Scripts to handle JSS, CSS, and other files

Redux is used to store the state of the application in a single entity. This simple entity is usually a JavaScript object. Changing states can be done by pushing out actions from the application and writing corresponding objects for them that are used to modify the states.

For example:

{  first_name: ‘John’,  last_name : ‘Kelly’,  age: 25}

Props:

• Changes in child components: Yes
• Parent component changing values: Yes
• Changes inside components: No

States:

• Changes in child components: No
• Parent component changing values: No
• Changes inside components: Yes

The following are the three phases of a component life cycle:

• Initial rendering: This is the phase that involves the beginning of the journey of the component to the DOM.
• Update: Here, the component can be updated and rendered again if required after it gets added to the DOM.
• Unmounting: The final phase involves the destruction of the component and its eventual removal from the DOM.

Whenever there are actions performed in React, such as hovering the mouse or pressing a key on the keyboard, these actions trigger events. Events then perform set activities as a response to these triggers. Handling an event in React is very similar to that in the DOM architecture.

Differences between the conventional routing and the routing in React can be shown using the following aspects:

• Pages: Each view is considered as a new file in conventional routing while it is considered as a single HTML entity in React.
• Navigation: In conventional routing, users have to move across web pages for viewing. In React, the views are not refreshed as objects are re-issued to create new views.