Yuan的博客
EN 中

React 总结

主要优势

  • React

    • DOM 更新由 React 自动管理
    • 在 JSX 中声明式处理（例如 onClick、onChange）
    • 通过 useState 和 props 管理
    • 组件复用：组件可复用且可组合

  • 原生 JavaScript

    • 手动 DOM 操作
    • 使用 addEventListener 显式添加事件监听器
    • 必须单独存储数据并手动更新 DOM
    • 难以在不重复的情况下复用各个部分

State

  • 只有影响 UI 的数据才应该放在 state 中。

Props

  • 总结：Props 通常包括：

    1. 组件需要显示的数据
    2. 处理事件的函数
    3. 外观和行为的配置

(问答)

  1. 如果项目不使用 React 怎么办？展示 React 与原生 JS 的对比。

    • React 提供自动的状态驱动渲染和模块化，而原生 JS 需要手动 DOM 更新和较少的组件复用。

  2. 判断以下内容的准确性：

    • a. ✅ useState 用于更新数据。如果组件中的任何内容是可变的（动态的），它应该在 state 中。
    • b. ⚠️ 计算逻辑必须在 App.js 中并不总是正确的。如果逻辑使组件自包含，也可以与相关 UI 放在组件中。

  3. 如果没有初始数据，我们如何知道数据的贡献类型？

    • 你根据 UI 需求设计数据形状（例如 id、text）。从需要显示或交互的内容开始，然后决定数据结构。

  4. 组件 props 通常包含什么？

    • 类型包括：type、placeholder、value、onChange、onClick、className、disabled 等。这取决于组件的角色。

  5. input 需要 onChange，button 需要 onClick 吗？

    • ✅ 是的。input 使用 onChange 跟踪输入；button 使用 onClick 处理点击。

  6. 我们何时何地定义 onSearch 函数？这是命名约定吗？

    • 在拥有 state 或处理搜索逻辑的组件中定义 onSearch。这个名称是为了可读性的约定；不是强制性的。

  7. 给出代码的整体解释。

    • 请参阅之前关于分离关注点的笔记：容器中的逻辑，展示组件中的 UI。使用 props 传递行为和数据，使用 state 管理变化，使用路由进行导航。所有这些共同构成了可扩展的组件架构。