Some common interview questions about React (share)

[Related topic recommendations: react interview questions (2020)]

1. redux middleware

Answer: Middle The software provides a third-party plug-in mode to customize the process of intercepting action-> reducer. Become action -> middlewares -> reducer . This mechanism allows us to change the data flow and implement functions such as asynchronous action, action filtering, log output, exception reporting, etc.

Common middleware: redux-logger: provides log output; redux-thunk: handles asynchronous operations; redux-promise: handles asynchronous operations; the return value of actionCreator is promise

2, redux What are the disadvantages

Answer: 1. The data required by a component must be passed from the parent component, and cannot be obtained directly from the store like flux.

2. When the relevant data of a component is updated, even if the parent component does not need to use this component, the parent component will still be re-rendered, which may affect efficiency, or require writing complex shouldComponentUpdate for judgment.

3. How are react components divided into business components and technical components?

Answer: Components are usually divided into UI components and container components according to their responsibilities. UI components are responsible for UI presentation, and container components are responsible for managing data and logic. The two are connected through the connect method provided by React-Redux.

4. React life cycle function

Answer: 1. Initialization phase:

getDefaultProps: Get the default properties of the instance

getInitialState: Get each instance Initialization state

componentWillMount: The component is about to be loaded and rendered on the page

render: The component generates a virtual DOM node here

componentDidMount: The component is actually loaded after it is loaded

2. Running state:

componentWillReceiveProps: Called when the component is about to receive properties

shouldComponentUpdate: When the component receives new properties or new status (can return false , does not update after receiving data, prevents render from being called, and subsequent functions will not continue to be executed)

componentWillUpdate: The component is about to be updated and cannot modify properties and status

render: Component re-rendering

componentDidUpdate: The component has been updated

3. Destruction phase:

componentWillUnmount: The component is about to be destroyed

5. Which periodic function is react performance optimization?

Answer: shouldComponentUpdate This method is used to determine whether the render method needs to be called to redraw the dom. Because the rendering of DOM consumes a lot of performance, if we can write a more optimized DOM diff algorithm in the shouldComponentUpdate method, the performance can be greatly improved.

6. Why does virtual dom improve performance?

Answer: Virtual dom is equivalent to adding a cache between js and real dom, using the dom diff algorithm to avoid unnecessary dom operations. thereby improving performance.

The specific implementation steps are as follows:

1. Use JavaScript object structure to represent the structure of the DOM tree; then use this tree to build a real DOM tree and insert it into the document;

2. When the state changes, reconstruct a new object tree. Then compare the new tree with the old tree, and record the differences between the two trees;

Apply the differences recorded in step 2 to the real DOM tree built in step 1, and the view will be updated.

7. Diff algorithm?

Answer: 1. Decompose the tree structure according to levels and only compare elements at the same level.

2. Add a unique key attribute to each unit of the list structure to facilitate comparison.

3. React will only match components of the same class (the class here refers to the name of the component)

4. In the merge operation, when calling the setState method of the component, React will Marked as dirty. At the end of each event loop, React checks all components marked as dirty and redraws them.

6． Selective subtree rendering. Developers can override shouldComponentUpdate to improve diff performance.

8. React performance optimization solution

Answer: 1) Rewrite shouldComponentUpdate to avoid unnecessary DOM operations.

2) Use the production version of react.js.

3) Use key to help React identify the smallest changes of all subcomponents in the list

9. Briefly describe the idea of ​​flux

Answer: The biggest feature of Flux is the "one-way" of data flow".

1. The user accesses the View

2. The View issues the user's Action

3.The Dispatcher receives the Action and requires the Store to update accordingly

4 After the .Store is updated, a "change" event is issued

5. After the View receives the "change" event, the page is updated

10. What scaffolding was used in the React project? Mern? Yeoman?

Answer: Mern: MERN is a scaffolding tool that can easily generate isomorphic JS applications using Mongo, Express, React and NodeJS. It minimizes installation time and gets you using proven technology to speed development.

11. Do you know React?

Answer: Yes, React is a lightweight component library developed by Facebook. It is used to solve some problems of the front-end view layer, which is the problem of the V layer in MVC. Its internal Instagram website uses React. Built.

12. What problems does React solve?

Answer: Three problems have been solved: 1. Component reuse problem, 2. Performance problem, 3. Compatibility problem:

13. React protocol?

Answer: The agreement that React follows is the "BSD License Patented Open Source Agreement". This agreement is quite strange. If your product does not compete with Facebook, you can use react freely, but if there is competition, Your react license will be revoked

14. Do you understand shouldComponentUpdate?

Answer: React virtual dom technology requires constant diff comparison between dom and virtual dom. If the dom tree is large, this comparison operation will be more time-consuming. Therefore, React provides a patch function such as shouldComponentUpdate. If For some changes, if we do not want a component to be refreshed, or if it is refreshed and remains the same as before, we can use this function to tell React directly, eliminating the need for diff operations and further improving efficiency.

15. How does React work?

Answer: React will create a virtual DOM (virtual DOM). When the state in a component changes, React will first mark the changes in the virtual DOM through the "diffing" algorithm. The second step is reconciliation, and the DOM will be updated with the results of the diff.

16. What are the advantages of using React?

Answer: 1. It is easy to know how a component is rendered by just looking at the render function

2. The introduction of JSX makes the component code more readable and easier Understand the layout of components, or how components refer to each other

3. Support server-side rendering, which can improve SEO and performance

4. Easy to test

5. React only focuses on the View layer, so it can be used with any other framework (such as Backbone.js, Angular.js)

17. There is a difference between the presentation component (Presentational component) and the container component (Container component) What's the difference?

Answer: 1. Display components care about what the components look like. Display specifically accepts data and callbacks through props, and almost never has its own state, but when the display component has its own state, it usually only cares about the UI state rather than the state of the data.

2. Container components are more concerned about how the components operate. Container components provide data and behavior to the presentation component or other container components. They call Flux actions and provide them as callbacks to the presentation component. Container components are often stateful because they are data sources (for other components)

18. What is the difference between a Class component and a Functional component?

Answer: 1. Class components not only allow you to use more additional functions, such as the component's own state and life cycle hooks, but also enable the component to directly access the store and maintain state

2. When a component only receives props and renders the component itself to the page, the component is a 'stateless component' and can be created using a pure function. Such components are also called dumb components or presentation components

19. What is the difference between state (state) and props (of a component)?

Answer: 1. State is a data structure used for the default value of the data required when the component is mounted. State may mutate over time, but most often as a result of user event behavior.

2. Props (abbreviation for properties) is the configuration of the component. Props are passed from parent components to child components, and as far as child components are concerned, props are immutable. A component cannot change its own props, but it can put the props of its subcomponents together (unified management). Props aren't just data either - callback functions can be passed via props too.

20. Where should the Ajax request be initiated in the React component?

Answer: In React components, network requests should be initiated in componentDidMount. This method will be executed when the component is first "mounted" (added to the DOM) and will only be executed once in the component's life cycle. More importantly, you are not guaranteed that the Ajax request has completed before the component is mounted, and if so, that means you will be trying to call setState on an unmounted component, which will not work. Making a network request in componentDidMount will ensure that there is a component ready to update.

21. What is a controlled component?

Answer; In HTML, form elements like , and <select> maintain their own state and update based on user input. When the user submits the form, the values ​​of the previously mentioned elements will be sent along with the form. But it's a little different in React. The component containing the form element will track the input value in the state, and every time the callback function is called, such as onChange, the state will be updated and the component will be re-rendered. An input form element whose value is controlled by React in this way is called a "controlled element". </select>

22. What is the role of refs in React?

Answer: Refs can be used to obtain a reference to a DOM node or React component. Good examples of when to use refs are to manage focus/text selection, trigger command animations, or integrate with third-party DOM libraries. You should avoid using String Refs and inline ref callbacks. Refs callbacks are recommended by React.

23. What is a higher order component?

Answer: A higher-order component is a function that takes a component as a parameter and returns a new component. HOC allows you to reuse code, logic, and bootstrapping abstractions. The most common one is probably Redux’s connect function. In addition to simply sharing tool libraries and simple composition, the best way for HOC is to share behaviors between React components. If you find that you have written a lot of code in different places to do the same thing, you should consider refactoring the code into a reusable HOC.

24. What are the advantages of using arrow functions?

Answer: 1. Scope safety: Before the arrow function, each newly created function has its own this value (in the constructor, it is a new object; in strict mode, in function calls, this is undefined; if the function is called an "object method", then the underlying object, etc.), but arrow functions don't, it uses the this value of the enclosing execution context.

2. Simple: Arrow functions are easy to read and write

3. Clear: When everything is an arrow function, any regular function can be used immediately to define the scope. Developers can always look for next-higher function statements to see the value of this

25. Why is it recommended that the parameter passed to setState is a callback instead of an object?

Answer: Because the updates of this.props and this.state may be asynchronous, their values ​​cannot be relied on to calculate the next state.

26. In addition to binding this in the constructor, is there any other way?

Answer: You can use property initializers to bind callbacks correctly, and create-react-app also supports it by default. In callbacks you can use arrow functions, but the problem is that a new callback is created every time the component renders.

27. How to prevent the rendering of components?

Answer: Returning null in the render method of the component will not affect the life cycle method of the triggered component

28. When rendering a list, what is the key? What is the purpose of setting key?

Answer: Keys will help React identify which items have changed, been added or removed. Keys should be assigned to elements within the array to give the (DOM) element a stable identity. The best way to choose a key is to use a string that uniquely identifies a list item. Many times you will use IDs in the data as keys. When you do not have stable IDs for the items being rendered, you can use the item index as the key for the rendered items, but this method is not recommended if the items can be reordered. This will cause re-render to slow down

29. What is the purpose of calling super(props) (in the constructor)?

Answer: Subclasses cannot use this before super() is called. In ES2015, subclasses must call super() in the constructor. The reason for passing props to super() is to facilitate access to this.props in the constructor (in subclasses).

30. What is JSX?

Answer: JSX is a syntax extension of JavaScript syntax and has all the functions of JavaScript. JSX produces React "elements", and you can wrap any JavaScript expression in curly braces and embed it in JSX. After compilation, JSX expressions become regular JavaScript objects, which means you can use JSX inside if statements and for loops, assign it to variables, accept it as an argument, and return it from functions.

31What are Children?

Answer: In JSX expressions, the content between an opening tag (such as ) and a closing tag (such as ) will be treated as a special attribute props.children Automatically passed to the containing component.

This property has many methods available, including React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.

32. In React, what is state?

Answer: State is similar to props, but it is private and completely controlled by the component itself. State is essentially an object that holds data and determines how the component is rendered.

33. What reasons would prompt you to break away from the dependency of create-react-app?

Answer: When you want to configure webpack or babel presets.

34. What is redux?

Answer: The basic idea of ​​Redux is to keep the entire application state in a single store. The store is a simple JavaScript object, and the only way to change the application state is to trigger actions in the application, and then write reducers for these actions to modify the state. The entire state transformation is completed in reducers and should not have any side effects

35. In Redux, what is a store?

Answer: Store is a javascript object that saves the state of the entire application. At the same time, Store also assumes the following responsibilities:

1. Allow access to state through getState()
2. Run state through dispatch(action)
3. Through subscribe(listener) ) Register listeners
4. Handle listeners’ notes through the function returned by subscribe(listener)

36. What is action?

Answer: Actions are a pure javascript object, they must have a type attribute indicating the type of action being executed. Essentially, an action is the payload that sends data from the application to the store.

37. What is reducer?

Answer: A reducer is a pure function that takes the previous state and an action as parameters and returns the next state.

38. What is the function of Redux Thunk?

Answer: Redux thunk is a middleware that allows you to write actions creators that return a function instead of an action. If a certain condition is met, thunk can be used to delay the dispatch of action (dispatch), which can handle the dispatch of asynchronous action (dispatch).

39. What is a pure function?

Answer: A pure function is a function that does not depend on and does not change the state of variables outside its scope. This also means that a pure function always returns the same result for the same parameters.

For more programming related content, please pay attention to the Programming Introduction column on the php Chinese website!

The above is the detailed content of Some common interview questions about React (share). For more information, please follow other related articles on the PHP Chinese website!