Summary of React2023 interview questions ~~~~Continuously updated! ! ! !

foreword

All the interview questions summarized here are interview questions from real scenarios of various major manufacturers found on Niuke.com, and they are summarized. After reading it, you can make a summary, and you can definitely deal with 88.8% of React-related interview questions.

1. Commonly used hooks

useState() : Allows state to be used in functional components. Use useState() to declare a state variable and use it to 存储组件的状态. The component will re-render every time the state is changed.

useEffect() : Used to handle side effects. Side effects refer to operations that take place outside of React components, such as fetching data from the server, manipulating DOM elements, etc. With the useEffect() hook, you can do this kind of thing without writing 生命周期a method in your class component. click to learn

useContext() : allows you in React 使用上下文. Context is a way to pass data up the component tree, yes 避免通过Props一层层传递数据. Using the useContext() hook, you can access context objects defined throughout your application. click to learn

useReducer() : is a replacement for useState() hook, used for 管理更复杂的状态. It uses Reducer functions to manage component state, Reducer functions 接收当前状态和要进行的操作, and then returns the new state. See this article for details on how to use it. click to learn

useCallback() : used for 避免在每次渲染时重新创建回调函数. This is useful when you need to pass a callback function to a child component, because it can 避免子组件不必要地重新渲染. click to learn

useMemo() : for 缓存计算结果, to 避免在每次渲染时重新计算. This is very useful, especially when computational cost is high. click to learn

useRef() : used for 创建对DOM元素的引用. It can also be used to store variables shared between components that don't change across component re-renders. click to learn

2. The difference between class components and functional components

1. Syntax : Class components use ES6 class syntax to create components, while functional components use function declarations to create components.
2. State management : Class components can use state to manage the internal state of the component, while functional components usually use userState Hook to manage the state.
3. Life cycle : Class components can use life cycle methods, such as componentDidMount, componentDidUpdate, etc. to manage the life cycle of components, while functional components use useEffect Hook to manage.
4. Call method : If it is a function component, the call is to execute the function. If it is a class component, you need to instantiate the component, and then call the render method of the instance object
5. Performance : Functional components are usually more lightweight than class components, because class components need to be instantiated, while functional components are just ordinary function calls.

Third, what is the role of the key in React?

1. Function : In React, the key is used to give each component an element (Element) 做一个唯一的标识. When React updates a component, it compares the old and new components key 是否一致, and if they match, it means it's the same component, 直接更新它的内容即可. If not, then a different component is required 先删除旧组件，再新建一个新的组件and inserted into the DOM tree.

Therefore, the role of the key is 帮助 React 快速判断出哪些元素发生了变化，从而提高性能，避免不必要的 DOM 操作. At the same time, the key can also be used to ensure the stability of each element when the array is rendered, avoiding the situation that the position of the array element changes but the content does not change.

Fourth, the way to introduce css in react

1. Importing .module.css files into components
   Using .module.css files to introduce styles for components is also called CSS模块化.
   The styles defined in the .module.css file 只能作用于当前组件内部will not affect other components or global styles, thus avoiding style conflicts.
2. CSS in JS
   CSS in JS is a front-end development technology that closely combines CSS style sheet definition and JS code to achieve more efficient and flexible style control. In CSS in JS, developers can use JS to write CSS styles, and can dynamically generate styles through variables or functions in the code. This method can avoid some problems in traditional CSS, such as global scope, selector nesting, naming conflicts, etc., and also provides higher reusability and maintainability.
   In React, there are a variety of third-party libraries that support CSS in JS, and the more commonly used ones are styled-components, Emotion, JSS, etc. These libraries provide convenient APIs to define and apply styles, and can automatically manage the introduction of CSS and the packaging of components. The use of CSS in JS can be better combined with the idea of ​​component development to improve the reusability and maintainability of the code.