React 是一个由 Facebook 开发的用于构建用户界面的 JavaScript 库。它采用组件化的方式来构建 UI，使得开发者可以将 UI 拆分成独立的、可复用的组件，并通过组合这些组件来构建复杂的用户界面。--ChatGPT
class组件
- 构造函数中必须调用
super(props)，否则组件将无法正常工作。 - 在 Class 组件中，
this的值可能会随着上下文的变化而变化。因此，在事件处理函数中，建议使用箭头函数或将函数绑定到组件实例中，以确保this始终指向组件实例。 - 在 Class 组件中，生命周期函数的执行顺序是固定的。例如，在
componentDidMount函数中，可以进行 DOM 操作和网络请求等操作，而在componentWillUnmount函数中，可以进行一些清理工作，例如取消订阅事件、清除定时器等。 - 在 Class 组件中，状态的管理通常是通过
this.state和this.setState方法来实现。当状态发生变化时，组件会重新渲染。需要注意的是，setState方法是异步的，因此不能直接使用this.state来获取最新的状态值。
Hook： React 中常用的 Hook 包括：
useState：用于在函数组件中使用状态。它返回一个数组，第一个元素是当前状态的值，第二个元素是更新状态的函数。使用 useState 可以避免使用 Class 组件中繁琐的 this.setState 来管理状态。
useEffect：用于处理副作用。它可以在组件渲染后执行一些操作，例如订阅事件、请求数据等。使用 useEffect 可以避免使用 Class 组件中的生命周期函数来处理副作用。
useContext：用于在函数组件中使用上下文。它可以让子组件直接访问到父组件中的上下文数据，而无需通过 props 层层传递。
useRef：用于在函数组件中创建一个可变的引用。它可以用来访问组件中的 DOM 元素、保存上一次的状态等。
useMemo 和 useCallback：用于性能优化，可以避免不必要的计算或渲染。它们都可以缓存函数的返回值，从而避免重复计算。
useReducer：用于在函数组件中使用复杂的状态逻辑。它可以将状态的修改逻辑拆分成多个 reducer 函数，从而使得状态管理更加可控、可维护。
注意事项：
Hook 规则 & 原理
- 只能在 React 函数中调用 Hook
- 在 React 函数组件中 或自定义 Hook 中调用
- 自定义 Hook 必须以 use 开头
- Hook 中的 state 是完全隔离的
