Hi, I’m @Luo Zhu

This article was first published at Lo Chu Morning Teahouse

Translated from Sudheerj/reactJs-interlocution-Questions

This article synchronizes in the public account Luo Zhu early teahouse, reprint please contact the author.

1. What is React?

React is an open source front-end JavaScript library for building user interfaces, especially for single-page applications. It is used to handle the view layer of Web and mobile applications. React was created by Jordan Walker, a software engineer at Facebook. React was first announced on Facebook’s News Feed in 2011 and on Instagram in 2012.

2. What are the main features of React?

React’s main features are:

  • React uses the VirtualDOM instead of the RealDOM.
  • Support for server-side rendering
  • Follow one-way data flow or data binding
  • Use reusable/composable UI components for view development

3. What is JSX?

JSX is an XML-like syntactic extension of ECMAScript (JavaScript XML for short). In fact, it just provides syntactic sugar for the react.createElement () function, giving us the ability to use htML-like template syntax in JavaScript.

In the following example, the text inside the

tag is returned to the render function as the return value of the JavaScript function (react.createElement ()) :

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>{'Welcome to React world! '}</h1>
      </div>); }}Copy the code

4. What is the difference between an Element and a Component?

An element is a generic object that describes what you want to appear on the screen as a DOM node or other component. An element can contain other elements in its props. Creating a React element costs very little. Once an element is created, it is never modified.

React Element objects are represented as follows:

const element = React.createElement('div', { id: 'login-btn' }, 'Login');
Copy the code

The react.createElement () function above returns the following object:

{
  type: 'div'.props: {
    children: 'Login'.id: 'login-btn'}}Copy the code

Finally, it renders the element to the DOM using reactdom.render () :

<div id="login-btn">Login</div>
Copy the code

Components can be declared in several different ways. It can be a class with the Render () method. Or, you can simply define it as a function. In either case, it takes props as input and returns the JSX tree as output:

const Button = ({ onLogin }) = > (
  <div id={'login-btn'} onClick={onLogin}>
    Login
  </div>
);
Copy the code

Then compile JSX into the react.createElement () function:

const Button = ({ onLogin }) = >
  React.createElement('div', { id: 'login-btn'.onClick: onLogin }, 'Login');
Copy the code

5. How to create components in React?

There are two ways to create a component:

  1. Functional components: This is the easiest way to create components. They are pure JavaScript functions that accept the props object as the first argument and return the React element:
function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>;
}
Copy the code
  1. Class components: You can also define a component using ES6’s class syntax. The above function component can be rewritten as:
class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>; }}Copy the code

6. When to select class or function components

If a component requires state or lifecycle methods, use a class component, otherwise use a function component.

However, with the introduction of Hooks from React 16.8, you can use features in function components that were previously only available in class components, such as state and lifecycle methods.

7. What are Pure Components?

React.purecomponent is almost identical to react.componentexcept that it handles the shouldComponentUpdate() method for you. When the props and state change, the PureComponent makes a superficial comparison between the props and state. Component, on the other hand, does not initially compare the current props and state to nextPorps and nextState. Therefore, every time shouldComponentUpdate is called, the component will be rerendered by default.

8. What is state in React?

A component’s state is an object that contains information that may change during the life of the component. We should always try to keep state as simple as possible and minimize the number of stateful components.

Let’s create a user component with a message state:

class User extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Welcome to React world'}}render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>)}}Copy the code

State is similar to Props, but it is private and fully controlled by the component. That is, it cannot be accessed by any component other than the one that owns and sets it.

9. What is props in React

Props is the input to the component. They are single values or objects containing a set of values that are passed to the component when created using a naming convention similar to HTML tag attributes. They are data passed from parent to child components.

The main purpose of the React props is to provide the following component functions:

  1. Pass custom data to your component.
  2. Trigger a state change.
  3. By componentrender()In the methodthis.props.reactPropUse.

For example, let’s create an element with the reactProp property:

<Element reactProp={'1'} / >Copy the code

This reactProp (or whatever name you come up with) then becomes a property attached to the React native Props object, which originally existed on all components created using the React library.

props.reactProp
Copy the code

10. What is the difference between state and props?

Props and state are common JavaScript objects. Although they both have information that affects the render output, their component-level functionality is different. Passing props to a component is like passing parameters to a function, and state is managed within the component like variables declared in a function.