这是我参与「第四届青训营 」笔记创作活动的第9天
react设计思路
从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来
UI编程痛点
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“callback hell"
响应式与转换式
转换式
- 给定输入 求解输出
- 编译器 数值计算
响应式编程
- 监听事件，消息驱动
- 监控系统 UI界面
- 事件->执行既定的回调->状态变更->UI更新
——>
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
组件化
- 组件是组件的总和/原子组件
- 组件内拥有状态，外部不可见 state
- 父组件可将状态传入组件内部 props
状态归属问题——状态属于谁
- 父组件可以控制子组件->状态归属于两个节点向上寻找到最近的祖宗节点（状态在两个节点共享）->状态不合理上升的问题->状态管理库
- 大多数情况下，状态具有局部性
组件设计
- react是单向数据流
- 组件声明了状态和UI的映射
- 组件有props/state两种状态
- 组件可由其他组件拼装而成
生命周期
挂载到dom->状态改变->卸载
hook
不要在循环，条件或嵌套函数中调用Hook
import React,{useState} from 'react';
//import React,{useState,useEffect} from 'react';
function Example(){
const [count,setCount]=useState(0);
//useEffect(()=>{
// document.title=`You clicked ${count} times`;
// });
return (
<div>
<p>You clicked {count} times</p>
<button onClick={()=>setCount(count+1)}>Click me</button>
</div>
);
}
react实现
- jsx不符合js标准
——>
return (
<div classname="root"><img src={url} /></div>
)
//->
return React.createElement("div",{
className:"root"
},React.createElement("img",{
src:url
}));
- 返回的jsx发生改变时，如何更新dom
——>虚拟DOM
赋予了React声明式的API，React确保DOM匹配该状态
- state/props 更新时，要重新触发render函数
——>diff算法
reac状态管理库
将状态抽离到UI 外部进行统一管理
