返回

React 知识点汇总：纵观全局，精准掌握！

前端

React 是一个用于构建用户界面的 JavaScript 库。它使用声明式编程范式，让开发者能够轻松地创建交互式用户界面。React 的主要优点包括：

  • 声明式编程： React 使用声明式编程范式，让开发者能够轻松地创建交互式用户界面。这意味着开发者只需用户界面的最终状态，React 会自动计算出如何实现这种状态。
  • 组件化： React 采用组件化设计，使开发者能够将用户界面分解成更小的、可重用的组件。这使得代码更易于维护和扩展。
  • 虚拟 DOM： React 使用虚拟 DOM 来优化性能。虚拟 DOM 是一个内存中的表示用户界面的数据结构。当状态发生变化时，React 只需要更新虚拟 DOM 中受影响的部分，然后将更新后的虚拟 DOM 渲染到真实 DOM 中。这大大提高了性能。

React 是一个非常强大的工具，可以用来构建各种各样的用户界面。它已经成为当今最流行的前端开发框架之一。

React 基础知识

  • 组件： 组件是 React 中的基本构建块。组件可以是函数组件或类组件。函数组件更简单，更易于编写，但类组件更强大，可以访问更多的功能。
  • 状态： 状态是组件中存储的数据。状态可以是任何类型的数据，例如字符串、数字、对象或数组。
  • 属性： 属性是组件从父组件接收的数据。属性是只读的，不能在组件内部修改。
  • 生命周期： 生命周期是指组件从创建到销毁的过程。React 提供了几个生命周期钩子，可以让开发者在组件的不同阶段执行特定的代码。

React 高级知识

  • Hooks： Hooks 是 React 16.8 中引入的一个新特性。Hooks 允许开发者在函数组件中使用 state 和生命周期等特性。这使得函数组件更加强大，也让 React 更易于学习和使用。
  • 上下文： 上下文是一种在组件之间共享数据的机制。上下文可以用来共享全局数据，例如当前的登录用户或语言设置。
  • 高阶组件： 高阶组件是一种创建新组件的函数。高阶组件可以用来向现有组件添加新的功能，例如数据获取、缓存或错误处理。
  • 路由： 路由是一种在应用程序的不同页面之间导航的机制。React 有许多流行的路由库，例如 React Router 和 Reach Router。
  • Redux： Redux 是一个状态管理库。Redux 可以用来管理应用程序中的全局状态。Redux 非常强大，但它也比较复杂。如果你的应用程序不需要管理大量全局状态，那么你可能不需要使用 Redux。

React 性能优化

  • 使用虚拟 DOM： React 使用虚拟 DOM 来优化性能。虚拟 DOM 是一个内存中的表示用户界面的数据结构。当状态发生变化时，React 只需要更新虚拟 DOM 中受影响的部分，然后将更新后的虚拟 DOM 渲染到真实 DOM 中。这大大提高了性能。
  • 使用函数组件： 函数组件比类组件更简单，更易于编写，并且性能更好。如果你不需要使用类组件的特殊功能，那么你应该使用函数组件。
  • 避免不必要的重新渲染： React 会在状态或属性发生变化时重新渲染组件。如果你想避免不必要的重新渲染，你可以使用 shouldComponentUpdate() 方法。
  • 使用 memo()： memo() 是一个 React Hook，可以用来缓存组件的输出。这可以提高性能，特别是当组件的输出很少发生变化时。
  • 使用并行处理： React 18 中引入了并行处理功能。并行处理可以提高应用程序的性能，特别是当应用程序需要处理大量数据时。

React 学习资源