react回顾

1、react文档回顾：快速入门 – React 中文文档  

核心概念：

（1）React 组件本质上是可以任意添加标签的 JavaScript 函数；React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。

（-）React组件的重新渲染是指：函数组件会重新执行，包括所有的 Hooks、变量定义和条件语句，但 useState 会保留上一次的状态值。

　　React 会等到事件处理函数中的 所有 代码都运行完毕再处理你的 state 更新。

　　React 不会跨 多个 需要刻意触发的事件（如点击）进行批处理——每次点击都是单独处理的。（底层原理是js是单线程的，执行函数是执行队列中的任务？）

（2）Hook（钩子）：以 use 开头的函数被称为 Hook。

　　Hook 比普通函数更为严格。你只能在你的组件（或其他 Hook）的 顶层 调用 Hook。如果你想在一个条件或循环中使用 Hook，请提取一个新的组件并在组件内部使用它。

（3）组件间共享数据

　　1）状态提升：将state与更新state的函数作为props或Context传递给子元素，子元素与父元素就可以共享这个state了。

　　2）vuex

（4）props中的children使用

--父组件标签嵌套子组件

<InspirationGenerator>
　　<Copyright year={2004} />
</InspirationGenerator>

--InspirationGenerator组件使用children

return (
　　<>
　　　　<p>Your inspirational quote is:</p>
　　　　{children}
　　</>
);

 （5）state：与let变量相比，在其表现出的特性上像是一张快照（state 如同一张快照 – React 中文文档）。设置它不会更改你已有的 state 变量，但会触发重新渲染。设置 state 只会为下一次渲染变更 state 的值。

  • 设置 state 请求一次新的渲染。
  • React 将 state 存储在组件之外，就像在架子上一样。
  • 当你调用 useState 时，React 会为你提供该次渲染 的一张 state 快照。
  • 变量和事件处理函数不会在重渲染中“存活”。每个渲染都有自己的事件处理函数。
  • 每个渲染（以及其中的函数）始终“看到”的是 React 提供给这个 渲染的 state 快照。
  • 过去创建的事件处理函数拥有的是创建它们的那次渲染中的 state 值。

--当state值是对象、数组等引用类型时，setState需要输入一个新的引用值，不然setState不生效，对象内嵌的对象有更新时，同样如此。

下面的例子，点击+3后，score变为1。但是如果setScore(score + 1)改为setScore((pre) => pre + 1)---状态更新函数，score将变为3。所有依赖前一个state值的状态更新或在下次渲染前多次更新同一个 state，都用状态更新函数。

image

　　状态更新函数作用机制：当你将它传递给一个 state 设置函数时：

1、React 会将此函数加入队列，以便在事件处理函数中的所有其他代码运行后进行处理。

2、在下一次渲染期间，React 会遍历队列并给你更新之后的最终 state。

3、setState(x) 实际上会像 setState(n => x) 一样运行，只是没有使用 n。

　　根据状态更新函数的作用机制，以下代码点击之后，number将变为6

const [number, setNumber] = useState(0);

<button onClick={() => {
setNumber(number + 5);
setNumber(n => n + 1);
}}>

 　　

对 state 进行保留和重置

  • 只要在相同位置渲染的是相同组件， React 就会保留状态。
  • state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。
  • 你可以通过为一个子树指定一个不同的 key 来重置它的 state。
  • 不要嵌套组件的定义，否则你会意外地导致 state 被重置。

     用 flushSync 同步更新 state ：flushSync用于强制 React 同步且立即地更新 DOM。它让你能突破 React 默认的异步批处理机制，在极少数需要精确控制更新时机的情况下使用。

（6）ref

  • ref 是一种脱围机制，用于保留不用于渲染的值。 你不会经常需要它们。
  • ref 是一个普通的 JavaScript 对象，具有一个名为 current 的属性，你可以对其进行读取或设置。
  • 你可以通过调用 useRef Hook 来让 React 给你一个 ref。
  • 与 state 一样，ref 允许你在组件的重新渲染之间保留信息。
  • 与 state 不同，设置 ref 的 current 值不会触发重新渲染。
  • 不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测。

     用 ref 回调管理 ref 列表

image

image

 

 

 

引申问题

(1) react组件什么时候重新渲染、重绘与回流，父组件更新会如何影响子组件，子组件如何影响父组件？

(2.1)组件里let定义的变量与useState变量的区别

　　let定义的变量不具有记忆，每次组件重新渲染时，它都会被重新计算；其改变不会造成组件重新渲染。

　　state 具有记忆，组件重新渲染时，会使用记忆的值。在其表现出的特性上像是一张快照。设置它不会更改你已有的 state 变量，但会触发重新渲染。

(2.2)useRef 和 useState 的主要区别

1. 触发渲染

    • useState: 状态更新会触发组件重新渲染

    • useRef: 修改 .current 属性不会触发组件重新渲染

2. 返回值

    • useState: 返回一个数组 [当前值, 更新函数]

    • useRef: 返回一个可变对象 { current: 初始值 }

3. 更新方式

    • useState: 必须使用 setState 函数更新

    • useRef: 可以直接修改 current 属性

5. 闭包问题

    • useState: 每次渲染都有独立的状态副本

    • useRef: 在整个组件生命周期中保持同一个引用

6. 性能考虑

    • useState: 更新会触发整个组件重新渲染

    • useRef: 修改不会触发渲染，性能更好

(3)①setTimeout中获取的state值为什么不是最新的，②怎么才能获取最新值？③setMessage('new')后，假如在5000ms内message和to都有了新值，下一次渲染to会是取当前快照值还是最新值

setTimeout(() => {
　　alert(`You said ${message} to ${to}`);

setMessage('new')

}, 5000);

答：①因为state 如同一张快照，过去创建的事件处理函数拥有的是创建它们的那次渲染中的 state 值。

       ②

　　③

2、学会自定义Hook，封装复用逻辑；掌握组件拆分和项目结构设计原则

3、学习 React Router 实现多页面导航；使用 Axios 或 Fetch 与后端交互；运用 Context API 管理简单的全局状态；理解 Redux Toolkit 或 Zustand 等状态管理库的使用场景

4、学习性能优化技巧：React.memo、useMemo、useCallback 避免不必要的渲染；代码拆分和懒加载提升首屏速度；了解 Next.js 框架（服务端渲染SSR和静态站点生成SSG）；探索 Tailwind CSS 等UI方案。

5、学习使用 Jest 和 React Testing Library 编写单元测试和组件测试；掌握将应用部署到 Vercel 或 Netlify 的流程；整合所学，打造一个终极作品。

posted @ 2026-02-27 10:30  银河1992  阅读(5)  评论(0)    收藏  举报