响应式系统和React | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第6天
React 历史与应用
React的设计思路
响应式与转换式
响应式系统
事件————>执行既定回调————>状态变更
- 响应式编程
- 状态更新，ui自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
- 组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
React的设计
-
状态更新，UI不会自动更新，需要手动的调用DOM，进行更新。
-
欠缺基本的代码层次的封装和隔离，代码层次没有组件化。
-
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
-
组件设计
- 组件声明了状态和UI的映射
- 组件有props/state两种状态
- 组件可由其他组件拼装而成
State Hook
useState就是一个Hook；在函数组件中，我们没有this，不能分配或读取this.state。所以我们直接在组件中调用useState Hook：一般来说，在函数退出后变量就会”消失”，而state中的变量会被React保留。
- useState唯一的参数就是初始state，下面这个例子即初始state值为0。
- useState不同于this.state，这里的state不一定要是一个对象(也可以是数字或字符串)，这个初始state参数只有在第一次渲染时被用到。
const [count, setCount] = useState(0);
可进行多状态声明
当我们用hook更新一个state变量时，会替换它的值，这和class中的this.setState不一样，后者会把更新后的字段合并入对象中
function handleWindowMouseMove(e) {
setState(state => ({ ...state, left: e.pageX, top: e.pageY })
}
我们推荐把state切分成多个state变量，每个变量包含的不同值会在同时发生变化。 比如可以把组件的state拆分为position和size两个对象；
function Box() {
const [position, setPosition] = useState({ left: 0, top: 0 });
const [size, setSize] = useState({ width: 100, height: 100 });
useEffect(() => {
function handleWindowMouseMove(e) {
setPosition({ left: e.pageX, top: e.pageY });
}
数组解构
下面这段代码：
const [fruit, setFruit] = useState('banana');
复制代码
相当于：
``
var fruitStateVariable = useState('banana'); // 返回一个有两个元素的数组
var fruit = fruitStateVariable[0]; // 数组里的第一个值
var setFruit = fruitStateVariable[1]; // 数组里的第二个值
它意味着我们同时创建了 fruit 和 setFruit 两个变量，fruit 的值为 useState 返回的第一个值，setFruit 是返回的第二个值。
