React设计与hooks | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第11天。

前置知识

1. html、css、js基础
2. 基础的数据结构、算法知识
3. DOM

React

React的设计思路

UI编程的痛点

1. 状态更新，UI不会自动更新，需要手动的调用DOM进行更新
2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 “Callback Hell”

针对痛点

1. 状态更新，UI自动更新
2. 前端代码组件化，可复用，可封装
3. 状态之间的相互依赖关系，只需声明即可。

响应式编程

事件——执行既定的回调——状态变更——UI更新

组件化

1. 组件是组件的组合 / 原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部

组件设计：

1. 组件声明了状态和UI的映射
2. 组件有props和state两种状态
3. 组件可由其他组件拼装而成

生命周期

Mounting

Updating

Unmounting

hooks的写法

State Hook

State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作

语法: const [xxx, setXxx] = React.useState(initValue)

useState()说明:

 参数: 第一次初始化指定的值在内部作缓存

 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数

setXxx()2种写法:

 setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值

 setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
 

Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子) 语法和说明:

useEffect(() => { 
// 在此可以执行任何带副作用操作
    return () => { // 在组件卸载前执行
    // 在此做一些收尾工作, 比如清除定时器/取消订阅等
    }
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行