React面试题汇总

**React 面试题汇总**

作为一个前端开发者，掌握 React 是非常重要的。以下是 React 面试题的汇总，涵盖了常见的问题和一些更复杂的场景。

### 一、基本概念1. **什么是 React？**
* React 是一个用于构建用户界面的 JavaScript 库。
2. **React 的主要特点是什么？**
* 组件化、虚拟 DOM、JSX 等。
3. **什么是组件？**
*一个独立的 UI 部分，通常是一个函数或类。

### 二、组件1. **如何定义一个 React 组件？**
* 使用 `function` 或 `class` 定义一个组件。
2. **什么是 props？**
* 组件之间传递数据的方式。
3. **如何使用 props？**
* 在父组件中传递 props 给子组件，子组件通过 `props` 接收。

jsx// ParentComponent.jsimport React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
 return (
 <div>
 <h1>Parent Component</h1>
 <ChildComponent name="John" age={30} />
 </div>
 );
}

export default ParentComponent;

// ChildComponent.jsimport React from 'react';

function ChildComponent(props) {
 console.log(props); // {name: "John", age:30}
 return (
 <div>
 <h2>Child Component</h2>
 <p>Name: {props.name}</p>
 <p>Age: {props.age}</p>
 </div>
 );
}

export default ChildComponent;

4. **什么是 state？**
* 组件内部的数据。
5. **如何使用 state？**
* 使用 `this.state` 或 `useState` Hook。

jsx// Counter.jsimport React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => setCount(count +1)}>+</button>
 </div>
 );
}

export default Counter;

### 三、事件处理1. **如何监听组件的事件？**
* 使用 `onClick`、`onMouseOver` 等属性。
2. **如何阻止事件冒泡？**
* 使用 `event.stopPropagation()`。

jsx// Button.jsimport React from 'react';

function Button() {
 const handleClick = (event) => {
 console.log('Button clicked!');
 event.stopPropagation();
 };

 return (
 
 Click me!
 
 );
}

export default Button;

### 四、列表和键值对1. **如何渲染一个列表？**
* 使用 `map()` 或 `Array.prototype.forEach()`。
2. **如何渲染一个键值对列表？**
* 使用 `Object.keys()` 或 `Object.entries()`。

jsx// List.jsimport React from 'react';

function List() {
 const items = [
 { id:1, name: 'Item1' },
 { id:2, name: 'Item2' },
 { id:3, name: 'Item3' },
 ];

 return (
 

 {items.map((item) => (
 
{item.name}
 ))}
 
 );
}

export default List;

### 五、表单1. **如何创建一个表单？**
* 使用 `form` 元素和 `input` 元素。
2. **如何处理表单事件？**
* 使用 `onChange`、`onSubmit` 等属性。

jsx// Form.jsimport React, { useState } from 'react';

function Form() {
 const [name, setName] = useState('');
 const [email, setEmail] = useState('');

 const handleSubmit = (event) => {
 event.preventDefault();
 console.log('Form submitted!');
 console.log({ name, email });
 };

 return (
 <form onSubmit={handleSubmit}>
 <label>
 Name:
 <input type="text"
 value={name}
 onChange={(event) => setName(event.target.value)}
 />
 </label>
 

 <label>
 Email:
 <input type="email"
 value={email}
 onChange={(event) => setEmail(event.target.value)}
 />
 </label>
 <button type="submit">Submit</button>
 </form>
 );
}

export default Form;

### 六、其他1. **如何使用 React Hooks？**
* 使用 `useState`、`useEffect` 等 Hook。
2. **如何使用 Context API？**
* 使用 `React.createContext()` 和 `Provider` 组件。

jsx// Theme.jsimport React from 'react';

const theme = {
 colors: {
 primary: '#333',
 secondary: '#666',
 },
};

export default theme;

jsx// App.jsimport React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import Button from './Button';

function App() {
 const [theme, setTheme] = useState({
 colors: {
 primary: '#333',
 secondary: '#666',
 },
 });

 return (
 <ThemeContext.Provider value={theme}>
 <div>
 <h1>App</h1>
 <Button />
 </div>
 </ThemeContext.Provider>
 );
}

export default App;

以上就是 React 面试题的汇总。这些问题涵盖了基本概念、组件、事件处理、列表和键值对、表单等方面。通过掌握这些知识，你将能够更好地应对面试中的挑战。