李刚的学习专栏

🚧 示例：点击子组件中按钮，获取 input 数据进行提交（常见于表单）React 中：组件内的每个函数都是一个闭包，因为组件本身只是一个函数。组件就被重新渲染一次【prop onClick 发生了变化】！借助 ref 每次渲染间存储信息及修改不会触发渲染的特性；函数虽然在整个组件生命周期中保持不变，但它通过调用。，在 props 没有改变的情况下跳过重新渲染！动态更新引用的函数，避免了闭包问题。函数会被重新创建，从而捕获最新的。，避免传递给组件的 props。：这个参数在首次渲染后被忽略。

如果组件的属性和状态是不可变的数据结构，可以显著简化Diff算法的复杂性：引用比较：每次更新都会产生一个完全新的对象，而不是修改原有对象，React可以简单地通过比较对象的引用，来确定数据是否发生了变化。如果两个对象的引用不同，那么肯定不同，这比深度比较数据结构的每个部分要快得多；结构共享：Immutable数据结构在进行更新时，只创建变动部分的新实例，而保留未变部分的引用。这意味着在Diff算法中，React能够迅速识别出哪些部分是完全相同的，从而跳过这些部分的比较，直接关注那些确实发生了变化的部分。

并发模式（Concurrent Mode）的一个关键特性是渲染可中断。React 18 之前，更新内容渲染的方式是通过一个单一的且不可中断的同步事务进行处理。同步渲染意味着，一旦开始渲染就无法中断，直到用户可以在屏幕上看到渲染结果。在并发渲染中，React 可以开始渲染一个更新，然后中途挂起，稍后又继续；甚至可能完全放弃一个正在进行的渲染。整个过程 UI 会保持一致。为了实现这一点，它会在整个 DOM 树被计算完毕前一直等待，完毕后再执行 DOM 变更。

性能优化的主要点：①减少DOM的渲染频次；②减少DOM的渲染范围；③非必要的内容延后处理。避免不必要的组件重新渲染，是提高程序性能的重要方式之一。

对于拥有许多状态更新逻辑的组件来说，过于分散的事件处理程序可能会令人不知所措。对于这种情况，可以将组件的所有状态更新逻辑整合到一个外部 Reducer 函数中。

React Fiber 是 Virtual DOM 的底层实现，它提供了一种新的调度机制来处理 Virtual DOM 的更新。Fiber 引擎使得 React 能够更细粒度地控制渲染过程。1. Virtual DOM：主要是一种优化技术，用于减少实际 DOM 操作的次数及范围，提高性能；2. Fiber：是一种新的协调引擎，旨在改善 React 的渲染性能、实现更好的并发控制，并支持增量渲染，从而提高 React 的响应能力。

React 16.8 版本引入了 Hooks ，可以在不使用 Class 的情况下使用 React 特性。Hooks 允许从函数组件 “hook into” React 状态和生命周期特性。Hooks 让我们根据代码所做的，而不是生命周期方法名称来分割代码。React 组件一直更像是函数，而 Hooks 则拥抱了函数。

随着 Vue、React 的演进，其各自框架的基本形态和功能已经很完备，最根本差异点逐渐演变成了框架开发者各自的理念差异，不同的理念让框架有了各自的设计模式和最佳实践。然而，对于使用者来说，搞懂其设计模式、沉淀其最佳实践、了解其基本原理，是掌握一门框架的捷径，也是衡量对其熟悉程度的标尺。Vue 更贴近传统前端开发方式，更符合人的直觉，更易上手更简单；React 让函数变得更加复杂，使用者有更大的控制权，更加灵活，从而优雅。

Effect 允许指定由渲染本身，而不是特定事件引起的副作用。React 组件中的两种逻辑类型：① 渲染逻辑代码 位于组件的顶层，接收 props 和 state，进行转换，返回屏幕上看到的 JSX，只计算不做其他任何事情；② 事件处理程序 嵌套在组件内部的函数，由特定的用户操作（如按钮点击）引起的”副作用“（改变了程序的状态）。实际开发过程中，还会遇到当进入页面时触发一些动作（如播放视频、日志发送、连接到聊天服务器等）。其①不能在渲染过程中发生，②也没有一个特定的事件（比如点击。

ref 是一种脱围机制，用于保留不用于渲染的值。同时，ref 是一个普通的 JavaScript 对象，具有一个名为 `current` 的属性，可以对其进行读取或设置。与 state 不同，设置 ref 的 `current` 值不会触发重新渲染**。**不要在渲染过程中读取或写入 `ref.current`。这使组件难以预测。

状态与渲染树中的位置相关：相同位置的相同组件会使得 state 被保留下来 ；相同位置的不同组件会使 state 重置 。只要一个组件还被渲染在 UI 树的相同位置，React 就会保留它的 state。如果它被移除，或者一个不同的组件被渲染在相同的位置，那么 React 就会丢掉它的 state。

`props`：只读，父组件通过 `props` 传递给子组件其所需要的状态；子组件内部不能直接修改`props`，只能在父组件中修改。`state`：可变，是组件内部维护的一组用于反映组件UI变化的状态集合。React 会将更新函数依次加入队列，以便在事件处理函数中的所有其他代码运行后进行处理。在下一次渲染期间，React 会遍历队列并给你更新之后的最终 state。

React 组件使用props来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。当组件中的重要信息是由 `props` 而不是其自身状态驱动时，就可以认为该组件是“受控组件”；受控组件具有最大的灵活性，但它们需要父组件使用 `props` 对其进行配置。当组件中的重要信息是由其自身状态 `state`驱动时，就可以认为该组件是“非受控组件”；非受控组件通常很简单，因为它们不需要太多配置。

React中，有两种原因会导致组件的渲染: ① 组件的初次渲染。② 组件（或者其祖先之一）的状态发生了改变。State setter 函数更新变量（状态发生改变）并触发 React 再次渲染组件。