react英文面试

1.组件如何进行通信的

1. Props: Components can communicate by passing data through props. Parent components can pass data down to child components as props, allowing child components to access and use that data. Props are read-only, meaning that child components cannot directly modify the data passed via props.
2. Callback Functions: Parent components can pass callback functions down to child components as props. Child components can then invoke these callback functions to communicate with the parent component. This allows child components to send information or trigger actions in the parent component.
3. Context API: The Context API allows components to share data without the need to pass it through multiple levels of props. A context is created using the createContext function, and then a provider component is used to wrap the components that need access to the shared data. Components can consume the context using the useContext hook or the Consumer component. This allows components at different levels of the component tree to communicate with each other without passing props explicitly.

2.react的生命周期

Lifecycle methods in class components allow you to hook into different stages of a component’s lifecycle, such as component initialization, component update and component destruction。

Common lifecycle methods include :

​ componentWillMount -> componentDidMount

​ componentWillUpdate -> componentDidUpdate

​ componentWillUnmount

3. context和redux的区别

They are both a state management warehouse, the difference is that Context only wraps the components that need to access it; while Redux wraps the entire application
React Context: Context is a feature provided by React itself and is built into the React library. It is designed to manage state within a single React component tree. Context is suitable for simpler state management needs or when the state needs to be shared between a few closely related components.
Redux: Redux is a separate library specifically focused on state management. It provides a centralized global state store that can be accessed by any component in the application. Redux is well-suited for larger and more complex applications with multiple interconnected components and extensive state management requirements.

4.节流防抖

防抖（Debounce）：Used to prevent repeated clicks from triggering events

​ 使用场景（scenes to be used）：Login, send text messages and other buttons to prevent users from clicking too fast, so that multiple requests are sent, and Debounce is required

节流(Throttle)：The task will only be executed once within the specified time interval

​ 使用场景（scenes to be used）：The input box searches in real time and sends a request to display the drop-down list, sending a request every second

Browser playback events, calculate progress information every second, etc.

5. 英文的提问和回答

Explain ur major work in ur current company.(should close to the postion)
The previous company mainly used a low-code platform to develop pages, and used Microsoft products. At that time, it was a To B project. I was mainly responsible for the development of the approval process.

what kind of things u look out for when u r review your colleagues’code?
First, I will look at what the function of this code is, and then I will check to see if there are any redundant problems.（首先会看这个代码实现的功能是什么，然后会顺带看看有没有一些冗余的问题）

what code standrad u look out for code review?
The code format must first conform to the specification, such as capitalization, variable naming, etc.（代码格式首先得符合规范，比如大小写，变量命名这些）

how u structrue your components in ur project? it’s easy to intergrate by other
First of all, I will ensure the reusability of the component, and pass some variable variables as parameters to the place where the component is called（首先我会保证组件的复用性，将一些可变的变量作为参数让调用该组件的地方传入过来）

6.react的useContext

The useContext hook is part of the React Context API and provides a way for components to consume data from a context without the need for prop drilling.

7. how to use useContext

1. Create a Context: First, you need to create a context using the createContext function. This creates a context object that consists of a Provider component and a Consumer component.
2. Provide the Context: Wrap the relevant components with the Provider component and pass the data value through the value prop.
3. Consume the Context: In the child component(s) that need access to the context data, import the context object and use the useContext hook to access the data.

8. What is JSX in React? How does it differ from regular JavaScript?

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript.
JSX is not interpreted by browsers directly, so it needs to be transpiled into regular JavaScript using tools like Babel.
JSX makes it easier to write and visualize the structure of UI components.

9.Explain the concept of Virtual DOM in React and how it improves performance.

Virtual DOM is a lightweight copy of the actual DOM maintained by React.
When state or props change, React compares the Virtual DOM with the previous version to find the minimal number of changes needed to update the actual DOM.
This process of comparing and updating the Virtual DOM instead of directly manipulating the actual DOM improves performance by minimizing costly operations on the real DOM.

10.What are React components? Explain the difference between functional components and class components.

Components are the building blocks of React applications, representing reusable UI elements.
Functional components are defined as JavaScript functions that return JSX. They are simpler and easier to read and write.
Class components are JavaScript classes that extend the React.Component class. They have more features like lifecycle methods and state management.

11.What is state in React? How is it different from props?

State represents the internal data of a component that can change over time.
Props are read-only and passed from a parent component to a child component, while state is managed within a component and can be updated using the setState function.

12.What is the role of react-refs?

Refs provide access to DOM elements: Refs allow you to reference and access DOM elements directly, such as input fields, buttons, or containers. This can be useful when you need to focus an input field, trigger imperative animations, or interact with third-party libraries that rely on direct DOM access.

Refs can reference React components: Refs are not limited to accessing DOM elements only. They can also reference React components, allowing you to call component methods or access component-specific data. This is helpful when you need to interact with a child component from a parent component or when you want to trigger specific actions within a component.

Refs can be created using the createRef() function: To create a ref, you can use the createRef() function from the React library. This creates an empty ref object that can be assigned to the ref attribute of a component or an HTML element.

Refs are assigned to elements using the ref attribute: Once a ref is created, it can be attached to a React component or an HTML element using the ref attribute. This allows the ref object to reference that particular element or component.

Refs can be accessed using the current property: The ref object has a current property that provides access to the referenced element or component. By accessing this property, you can interact with the referenced item directly.