React的基础知识点

一、React概述

1. 定义：React是一个用于构建用户界面的JavaScript库。它起源于Facebook的内部项目，现在已经成为前端开发领域的热门技术。
2. 特点：
   • 声明式：React采用声明范式，可以轻松描述应用。
   • 高效：React通过对DOM的模拟（虚拟DOM），最大限度地减少与真实DOM的交互，从而提高性能。
   • 灵活：React可以与已知的库或框架很好地配合。
   • 组件化：React通过构建组件来组织代码，使得代码更加容易复用和维护。

二、React组件

1. 组件定义：React组件是构建用户界面的基本单元，它们可以是函数或类。
2. 组件类型：
   • 函数组件：使用JavaScript函数定义的组件，适用于简单的UI逻辑。
   • 类组件：使用ES6类定义的组件，适用于复杂的UI逻辑和状态管理。
3. 组件属性（Props）：Props是父组件传递给子组件的数据，它们是只读的，不可在子组件内部修改。
4. 组件状态（State）：State是组件内部的状态，用于存储和跟踪数据的变化。可以通过this.setState或useState钩子函数来更新状态。

三、JSX

1. 定义：JSX是JavaScript语法的扩展，用于描述React组件的结构。
2. 特点：
   • 类似于HTML的语法，但具有JavaScript的完全功能。
   • 可以在JSX中嵌入表达式，并使用大括号{}包围。

四、React事件处理

1. 事件绑定：在React中，事件处理函数通常作为组件的属性（Props）进行传递。
2. 事件处理函数：可以在类组件或函数组件中定义事件处理函数，用于处理用户交互事件（如点击、输入等）。

五、React状态管理

1. 本地状态管理：每个React组件都有自己的状态（State），用于存储和跟踪数据的变化。可以使用useState钩子函数来定义和管理本地状态。
2. 全局状态管理：对于跨组件共享的状态，可以使用全局状态管理库（如Redux）来管理。Redux通过提供一个可预测且可扩展的状态管理方案，帮助开发者更好地管理应用程序的状态。

六、React路由导航

1. 定义：路由导航是指在Web应用程序中，由用户操作或程序自动触发，切换和加载不同的路由或页面的过程。
2. 实现方式：React可以使用专门的路由库（如react-router）来实现路由导航功能。通过定义路由规则和组件映射关系，实现页面之间的跳转和渲染。

七、React性能优化

1. 减少不必要的渲染：通过优化shouldComponentUpdate或React.memo等API，避免不必要的组件重新渲染。
2. 列表渲染性能优化：在列表中使用唯一的key属性来标识每个子元素，帮助React识别每个元素的身份，减少重复渲染和操作的开销。
3. 使用合适的库和插件：选择合适且经过优化的第三方库和插件，避免过多冗余的库，以减少性能开销。