[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 ,
