- Objective: - Breadcrumb: # 概念阐释 1. 设计样式 2. 将样式 UI 分解为组件继承的关系 1. 如果你是程序员：决定是否应该创建一个新的函数或对象。其中一种技术是单一职责原则，也就是说，一个组件理想情况下应该只做一件事情。如果它变得越来越复杂，就应该将其分解成更小的子组件。 2. CSS：考虑你会为哪些内容创建类选择器。（然而，组件的粒度要略低一些。） 3. 设计：考虑如何组织设计的层次。 3. 使用 React创建静态版本 1. 创建交互版本之前先确定静态版本，静态版本有很多 typing，交互版本需要很多思考 2. 创建静态版本时，你会希望创建可重用的「[[React 组件 函数组件]]」，并使用[[React props]]传递数据。 4. 找到 UI 的最小但完整的状态 1. 思考哪些组件是永远不变的，哪些组件是会随着时间的迁移而发生变化的，那些发生变化的就是 [[state]] 5. 区分状态 state 应该放在哪里 1. React 使用单向数据流，将数据沿着组件的层次结构从父级传递到子级 2. 解决步骤 1. 找出所有根据该状态渲染内容的组件。 2. 找到它们最近的共同父组件——在层级结构中位于它们所有之上的组件。 3. 决定状态应该存放在哪里： 1. 通常，你可以直接将状态放入它们的共同父组件中。 2. 你也可以将状态放入某个位于它们共同父组件之上的组件中。 3. 如果你找不到一个合适的组件来拥有这个状态，就创建一个新的仅用于持有状态的组件，并将其添加到共同父组件上方的层级结构中。 6. 添加反向数据流 1. 如果你想让用户输入的数据有效就需要添加反向数据流，React 本身是单向数据流，所以要比双向数据流多一些代码 2. 使用[[js Events 事件 触发事件的类型]]来让用户的输入有效 # 实例 # 相关内容 ## Props vs State  There are two types of “model” data in React: props and state. The two are very different: - [**Props** are like arguments you pass](https://react.dev/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`. - [**State** is like a component’s memory.](https://react.dev/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state. Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and _pass it down_ to child components as their props. It’s okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick! # 参考资料 - [Thinking in React](https://react.dev/learn/thinking-in-react#props-vs-state) - [[JavaScript 事件]]