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

Hi, I’m @Luo Zhu, a blogger who keeps writing. Thank you for every like and comment you make.

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. How do you implement server-side rendering or SSR?

React already has the ability to handle rendering on Nod E servers. There is a special version of the DOM renderer that has the same mode as the client.

import ReactDOMServer from 'react-dom/server';
import App from './App';

ReactDOMServer.renderToString(<App />).Copy the code

This method outputs regular HTML as a string that can then be placed in the body of the page as part of the server response. On the client side, React detects pre-rendered content and connects it seamlessly.

2. How to enable production mode in React?

You should use Webpack’s DefinePlugin method to set NODE_ENV to production to strip out things like propType validation and extra warnings. In addition, if you minimize your code, such as Uglify’s invalid code elimination, by stripping out development-only code and comments, you can greatly reduce the size of your package.

3. What is CRA and its benefits?

The create-react-app CLI tool allows you to quickly create and run React applications without requiring configuration steps.

Let’s create a Todo application using CRA.

#The installation
$ npm install -g create-react-app

#Creating a new project
$ create-react-app todo-app
$ cd todo-app

#Build, test, run
$ npm run build
$ npm run test
$ npm start
Copy the code

It includes everything we need to build a React application.

  1. Supports React, JSX, ES6, and Flow syntax.
  2. Language extras beyond ES6, such as object propagation operators.
  3. Automatically prefix CSS so you don’t need to-webkit-Or other prefixes.
  4. A fast interactive unit test runner with built-in support for coverage reporting.
  5. A real-time development server that warns of common errors.
  6. A build script that binds JS, CSS, and images, and provides hash and source diagrams.

4. What is the order of the lifecycle methods in the installation?

When an instance of a component is created and inserted into the DOM, the lifecycle methods are invoked in the following order.

  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

5. What lifecycle methods will be deprecated in React V16?

The following lifecycle approach would be an unsafe coding practice, with more problems in asynchronous rendering.

  1. componentWillMount()
  2. componentWillReceiveProps()
  3. componentWillUpdate()

Since React V16.3, these methods have been aliased with the UNSAFE_ prefix, and the unprefixed version will be removed in React V17.

6. getDerivedStateFromProps()What is the purpose of a lifecycle approach?

The new static getDerivedStateFromProps() lifecycle method is called after a component is instantiated and before it is rerendered. It can either return an object to update the status or null to indicate that the new props does not need any status updates.

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // ...}}Copy the code

The life cycle method and componentDidUpdate () covers componentWillReceiveProps together () in all cases.

7. getSnapshotBeforeUpdate()What is the purpose of a lifecycle approach?

The new getSnapshotBeforeUpdate() lifecycle method is called before DOM updates. The return value of this method is passed as the third argument to componentDidUpdate().

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...}}Copy the code

This lifecycle method, along with componentDidUpdate(), covers all use cases for componentWillUpdate().

8. Do Hooks replace rendering props and higher-order components?

Both the rendering props and the higher-order components render only one child, but in most cases, Hooks are a simpler way to do this by reducing nesting in the tree.

9. What is the recommended way to name components?

It is recommended to name components by reference rather than using displayName.

Use displayName to name the component.

export default React.createClass({
  displayName: 'TodoApp'.// ...
});
Copy the code

Recommended methods.

export default class TodoApp extends React.Component {
  // ...
}
Copy the code

10. What is the recommended ordering of methods in a component class?

Suggest sequencing of methods from the install to render phase.

  1. staticmethods
  2. constructor()
  3. getChildContext()
  4. componentWillMount()
  5. componentDidMount()
  6. componentWillReceiveProps()
  7. shouldComponentUpdate()
  8. componentWillUpdate()
  9. componentDidUpdate()
  10. componentWillUnmount()
  11. Click handler or event handler, as inonClickSubmit() 或 onChangeDescription()
  12. Getter methods for rendering, such asgetSelectReason() 或 getFooterContent()
  13. Optional rendering methods, such asrenderNavigation() 或 renderProfilePicture()
  14. render()