React知识点梳理

React 原理

React 使用了一种名为虚拟 DOM 的技术来构建 UI。虚拟 DOM 是一个 JavaScript 对象，它了 UI 的当前状态。当状态发生变化时，React 会比较新的虚拟 DOM 和旧的虚拟 DOM，并只更新那些发生变化的元素。这使得 React 非常高效，因为它只更新必要的元素，而不是整个 UI。

React 包

在使用 React 时，你会用到以下几个重要的包：

• react ：这是 React 的核心库。它提供了构建 UI 所需的所有基本功能。
• react-dom ：这个包提供了与 DOM 交互所需的工具。它允许你将 React 组件渲染到 DOM 中。
• react-reconciler ：这个包负责比较虚拟 DOM 和旧的虚拟 DOM，并更新必要的元素。

React 组件

React 组件是 UI 的基本构建块。组件可以是函数组件或类组件。函数组件是更简单的一种组件，它只是一个返回 JSX 的函数。类组件更复杂一些，它继承自 React.Component 类，并且可以有状态和生命周期方法。

React 状态

React 组件可以有状态。状态是一个 JavaScript 对象，它存储了组件的数据。组件的状态可以被更新，当状态发生变化时，组件会重新渲染。

React 事件

React 组件可以处理事件。事件是用户与 UI 交互时发生的。当事件发生时，React 会调用组件的事件处理程序函数。

React 生命周期

React 组件有四个生命周期方法：

• componentDidMount ：这个方法在组件首次挂载到 DOM 时调用。
• componentDidUpdate ：这个方法在组件更新时调用。
• componentWillUnmount ：这个方法在组件从 DOM 中卸载时调用。
• shouldComponentUpdate ：这个方法在组件更新之前调用。它可以返回 true 或 false，以决定组件是否应该更新。

React 路由

React 路由允许你在应用程序中创建不同的页面。当用户导航到不同的页面时，React 会渲染相应的组件。

React 状态管理

React 状态管理是一个复杂的话题。有许多不同的库可以帮助你管理 React 组件的状态。一些流行的库包括 Redux、MobX 和 Zustand。

总结

React 是一个功能强大且易于使用的 JavaScript 库。它可以让你以一种高效且声明性的方式来构建交互式 UI。如果你想学习 React，可以参考本文中的知识点梳理，或者查阅 React 官方文档。