Yuan's Blog

React Summary

Key Benefits

  • React

    • DOM Updates are automatically managed by React
    • Handled declaratively in JSX (e.g., onClick, onChange)
    • Managed via useState and props
    • Component Reuse: Components are reusable and composable

  • Plain JavaScript

    • Manual DOM manipulation
    • Event listeners explicitly added using addEventListener
    • Must store data separately and update the DOM manually
    • Harder to reuse individual parts without duplication

  • ** 补充说明（Reflection）**

    • 这个部分还没有充分理解代码之间的区别，原因在于自己的基础知识太差，对于 JS 纯代码的书写认知不够，所以对于 React 的使用好处没有很好的感受，这个后续还要重新看一下，现在没有看懂，后续要换不同的问法再进行学习一下。

    • ** 学习的时候，第一步是知道学习的是什么【理论学习部分】。接下来，不仅仅需要知道怎么做【实操部分】，还要知道为什么要这样做，如果不这样做，还可以怎么做更好【经验部分】。只有转变成经验的才算是真的掌握了，知识才是被你使用的。**

    • ** 比如：知道 useState 的语法点以及是干什么的之后，知道用法，还要知道为什么要用到这个。最好的一个加深认知的方法就是问自己：如果不这样做，还会有什么做法？另外的做法会更好吗？**

State

  • Only data that affects the UI should be in state.

关于 Props

  • 不同的 component 之间传递信息依靠 props。

    • 如果是 ** 数据性的 data props**，就需要 id, text 等。
    • 如果是 ** 行为性的 props**，就需要一些功能函数，比如 onClick, onChange。
    • 如果是 ** 装饰性或配置性的 props**，需要一些 className, type, autoFocus 等。

  • Summary: Props generally include:

    1. Data the component needs to display
    2. Functions to handle events
    3. Configurations for appearance and behavior

常见问题解答 (Q&A)

  1. What if the project doesn’t use React? Show the contrast between React and plain JS.

    • React provides automatic state-driven rendering and modularity, while plain JS requires manual DOM updates and less component reuse.

  2. Determine the accuracy of the following content:

    • a. ✅ useState is used for updating the data. If anything in a component is changeable (dynamic), it should be in state.
    • b. ⚠️ It’s not always true that computed logic must be in App.js. The logic can also be colocated with related UI in a component if it makes the component self-contained.

  3. How do we know what kind of contribution data has if there is no initial data?

    • You design the data shape (e.g., id, text) based on the UI requirement. Start from what needs to be displayed or interacted with, then decide the data structure.

  4. What is usually included in component props?

    • Types include: type, placeholder, value, onChange, onClick, className, disabled, etc. This depends on the component’s role.

  5. Does input need onChange, and button need onClick?

    • ✅ Yes. input uses onChange to track typing; button uses onClick to handle clicks.

  6. When and where do we define the onSearch function? Is it name convention?

    • Define onSearch in the component that owns the state or handles the search logic. The name is a convention for readability; it’s not mandatory.

  7. Give an explanation with the whole picture about code.

    • See previous notes on separating concerns: logic in containers, UI in presentational components. Use props to pass behavior and data, state to manage change, and routing for navigation. All together, this forms a scalable component architecture.