react总结

1. 组件（Components）

• 功能组件：函数形式的组件，返回 JSX。
• 类组件：通过类定义的组件，适用于较复杂的逻辑，但一般现在推荐使用功能组件。

2. JSX

• React 使用 JSX 语法，允许你在 JavaScript 中直接书写 HTML。
• 注意：JSX 需要用 className 代替 HTML 的 class。

3. 状态（State）与属性（Props）

• Props：父组件传递给子组件的数据，组件通过 props 接收。
• State：组件内部的状态，用于控制组件的渲染。

4. 生命周期方法

• 对于类组件，有一些内置的生命周期方法（如 componentDidMount、componentDidUpdate 等）。
• 在功能组件中，可以使用 useEffect Hook 来处理副作用。

5. Hooks

• useState：用于管理组件状态。
• useEffect：用于处理副作用，类似于生命周期方法。
• 自定义 Hook：可以封装逻辑，以便在多个组件中复用。

6. 事件处理

• 在 React 中，事件处理是通过 CamelCase 命名的，比如 onClick。
• 事件处理函数可以直接传递，但要注意 this 的绑定（在类组件中）。

7. 条件渲染与列表渲染

• 条件渲染可以通过 JavaScript 表达式实现，比如使用三元运算符。
• 列表渲染通常使用 map 方法，记得为每个元素提供唯一的 key。

8. 表单处理

• 在 React 中，表单元素的值通常由组件的 state 控制（受控组件）。
• 使用 onChange 事件处理输入变化。

9. 组件间通信

• 使用 props 进行父子组件通信。
• 对于兄弟组件，可以通过提升状态到共同的父组件。

10. 路由

• 使用 React Router 进行路由管理，常用组件有 BrowserRouter、Route 和 Link。

总结

你可以通过构建一个简单的 Todo 应用来实践这些概念。这样可以让你对 React 的结构和思维方式有更深入的理解。

面试时，除了掌握以上基础概念，还可以关注一些常见的面试问题，例如：

• React 的虚拟 DOM 是什么？
• 描述一下 React 的单向数据流。
• 在 React 中如何优化性能？