This is the 11th day of my participation in Gwen Challenge

Hi, I’m @Luo Zhu

This article was first published on luo Zhu’s official website

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 reconciliation?

When a component’s props or state changes, React compares the newly returned element to the previously rendered element to determine whether an actual DOM update is necessary. React updates the DOM when they are not equal. This process is called reconciliation.

2. How to set state with a dynamic key name?

If you use ES6 or Babel transcoders to transform your JSX code, you can do so using computed attribute names.

handleInputChange(event) {
  this.setState({ [event.target.id]: event.target.value })
}
Copy the code

3. What is a common error that a function is called every time a component renders?

You need to make sure that the function is not called when you pass it as an argument.

render() {
  // error ❌ : handleClick is called instead of being passed in as a reference
  return <button onClick={this.handleClick()}>{'Click Me'}</button>
}
Copy the code

Instead, the transfer function itself, without parentheses, is used.

render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={this.handleClick}>{'Click Me'}</button>
}
Copy the code

4. Do lazy functions support named exports?

No, currently the react. lazy function only supports default exits. If you want to import the module named export, you can create an intermediate module as the default export. This also ensures that tree shaking works and does not pull unused components.

Let’s look at a component file that exports multiple named components.

// MoreComponents.js
export const SomeComponent = / *... * /;
export const UnusedComponent = / *... * /;
Copy the code

And re-export the MoreComponents. Js component in an intermediate file, intermediatecomponent.js

// IntermediateComponent.js
export { SomeComponent as default } from './MoreComponents.js';
Copy the code

Now you can import the module using the lazy function below.

import React, { lazy } from 'react';
const SomeComponent = lazy(() = > import('./IntermediateComponent.js'));
Copy the code

5. Why do you use ReactclassNameRather thanclassAttribute?

Class is a JavaScript keyword, and JSX is an extension of JavaScript. This is the main reason React uses a className instead of a class. Pass a string as className prop.

render() {
  return <span className={'menu navigation-menu'} >{'Menu'}</span>
}
Copy the code

6. What are fragments?

This is a common pattern in React for a component to return multiple elements. Fragments allow you to group a list of children without adding extra nodes to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>)}Copy the code

Here’s another phrasal method that many tools don’t support:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>)}Copy the code

7. Why are fragments better than div containers?

  1. Fragments are faster and use less memory because no additional DOM nodes are created. This is only really beneficial on very large and deep trees.
  2. Some CSS mechanisms such as Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it difficult to maintain the desired layout.
  3. The DOM inspector is less cluttered.

8. What is a Portal in React?

Pass gates are a recommended way to render child nodes into DOM nodes outside of the parent component’s DOM hierarchy.

ReactDOM.createPortal(child, container);
Copy the code

The first argument is any renderable React Children, such as an element, string, or fragment. The second argument is a DOM element.

9. What is stateless component?

A behavior can be a stateless component if it is independent of its state. You can use functions or classes to create stateless components. But unless you need to use lifecycle hooks in your components, you should choose function components. If you decide to use functional components here, there are many benefits; They are easy to write, understand, and test, slightly faster, and you can avoid using the this keyword entirely.

10. What is a state component?

A component can be said to be stateful if its behavior depends on its state. These stateful components are always class components and have a state initialized in the constructor.

class App extends Component {
  Class field syntax can also be used
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    // ...}}Copy the code

React 16.8 Update:

Hooks let you use state and other React functions without writing classes.

Equivalent function component

import React, {useState} from 'react';

const App = (props) = > {
  const [count, setCount] = useState(0);

  return (
    // JSX)}Copy the code