这是我参与「第四届青训营 」笔记创作活动的第7天
React 的设计思路
介绍 React 的设计思想，为什么 React 要设计成这样 UI编程缺点：
- 状态更新，UI不会自动更新，需要手动调用DOM
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- 数据和数据之间存在依赖关系，需要手动维护，如果以来链路长，会遇到“Callback Hell”
对React的期待：
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
graph TD
事件 --> 执行既定的回调 --> 状态变更 -->UI更新
组件化
- 组件：要么是一个原子要么是原子的组合
- 拥有状态，但外部不可见
- 父组件可以将状态传入子组件内部：即父组件可以控制子组件
状态归属问题
- 组件声明了状态和UI的映射：输入状态返回UI
- 组件有Props/ State两种状态。
- “组件”可由其他组件拼装而成。
多个子组件共享一项内容时,该内容将会被提交到父组件. 那么子组件该如何修改这一项内容呢?-->函数
可以通过在父组件中定义对该内容执行相关操作的函数,而函数可以作为属性传递给子组件。
组件设计
- 组件声明了状态和
UI的映射 - 组件有
Props/State两种状态，前者是父组件传入的数据，后者是组件内部维护的数据 - 组件可由其他组件拼装而成
function Component(props){
//props:父组件传入的状态
const { url } = props;
this.text = 'click';
//返回UI
return (<div>
<SubComponent props={{color = 'red'}}></SubComponent>
<img src={ url }></img>
<button>text</button>
</div>
)
}
React hooks 的写法
介绍基础的 React hooks 写法，以及常用的 hooks Virtual DOM:Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
虚拟DOM（Virtual DOM）是用于与真实DOM同步，在js内存中维护的一个对象，其具备与DOM类似的树状结构， 并且可以和DOM建立一一对应的关系。
- 接收用户状态改变的通知
- 使用DOM操作更新变化的部分
- 虚拟DOM树（在DOM的基础上建立一个抽象层）
- 将虚拟DOM中数据和状态的改动同步到真实DOM中
虚拟DOM：虚拟DOM赋予了react声明式的API（即告诉react希望UI是什么状态，react就可以确保DOM匹配该状态。）这使得从属性操作、事件处理和手动DOM更新等在构建应用程序必要的操作中可以解放出来。
