Ketcher源码学习-储备知识-React(1)-Hook

一、【函数组件】与【class组件】

1. 函数组件：接收一个props对象，返回一个React元素。

2. class组件：继承React.Component类，在constructor方法中传递props、初始化state，在render方法中返回React元素。

3. 函数组件是纯函数，无状态、无生命周期钩子，需借助Hook实现相应功能。

二、Ketcher中用到的Hook

1. useState

2. useEffect

(1) 用来在函数组件中执行【副作用操作】(与【纯运算返回值】无关的操作)。

(2) 常见【副作用操作】：修改外部变量、抛出异常、终端打印、读写文件、设置订阅、手动更新DOM、发送网络请求。

(3) 参数一：一个函数 (称其为effect)。默认在【第一次渲染完DOM后】和【每次更新完DOM后】执行effect，在【组件卸载时】执行effect返回的函数。

(4) 参数二：一个数组。指定effect的依赖项，修改默认行为，仅在【第一次渲染完DOM后】和【依赖项发生变化后】执行effect。

(5) 如果仅需在【第一次渲染完DOM后】执行effect，可将参数二设为空数组。

(6) 可在一个组件中多次调用，实现关注点分离。

3. useContext

(1) 参数：一个context对象。

(2) 返回值：该context的当前值。由距离最近的<Provider>的value prop决定。

4. useCallback与useMemo

(1) useCallback参数：函数、依赖项数组。返回值：该函数的缓存。

(2) useMemo参数：函数、依赖项数组。返回值：该函数计算结果的缓存。

(3) 依赖项为空数组时，返回值在组件的生命周期内永久缓存。

(4) useCallback使用场景：避免在父组件更新时，通过props传递给子组件的函数随之重新创建。

(5) useMemo使用场景：类似Vue中的computed，节省计算开销。

5. useRef

三、自定义Hook

1. 提取重复逻辑的一个函数，名称以use开头。

2. 自定义Hook内部可调用其它Hook，util不可以。