面临的问题
我们都见证过,一个组件从原本的清晰简洁,到后来的臃肿不堪,最终变得难以维护。
我们之前如何进行逻辑抽离
- Mixin:来源不清晰,命名冲突
- HOC:命名冲突,层层嵌套,额外的DOM渲染
- ScopedSlot:额外的DOM渲染,逻辑与视图混在一起
我们为什么要抛弃class
- 前端开发中,组合大于继承。我们大部分时间在写UI层的代码,很难维护一套稳定的接口或类
- this对框架初学者很不友好。同时,如果没有各种不稳定stage提案的支持下,代码会很臃肿
- class已经成为框架的开发者在编译技术上进一步优化的阻碍(原文)
介绍新API
都是为了逻辑的纵向拆分
React Hooks 基本原理
有篇文章很好的揭示了React Hooks的本质:
细节就不说了
Vue Function Based API 基本原理
通过 vue-function-api 这个插件,我们就知道,这个新API其实啥也没干,就是基于Vue2.6封装了一层,举个例子:
// vue-function-api/src/functions/state.ts
import { Wrapper, ValueWrapper } from '../wrappers';
import { observable } from '../reactivity';
export function state<T>(value: T): T {
return observable(value);
}
export function value<T>(value: T): Wrapper<T> {
return new ValueWrapper(state({ ?state: value }));
}
所以,Vue新API的原理等价于Vue数据视图双向绑定的原理。
React和Vue的新API的区别
思想一样,技术实现完全不一样。
-
React Hooks是开创性的新功能,不仅改变了React基于class的开发方式,它甚至能引领时代潮流,成为未来框架的开发规范。
Vue Function Based API学习了React Hooks的思想。
-
React Hooks的实现是基于函数式组件,并在每个组件内部隐秘的维持了两个数组(?),从而能基于useState的执行顺序获得维持状态的能力,并通过state对应的setter进行视图更新。
Vue Function Based API只是在状态的维持和视图的更新上做了层封装,其基本原理依旧是Vue数据视图双向绑定的原理。
进阶学习:了解React Hooks的视图更新原理
学习难度分析
-
Vue Function Based API在语义上跟原先完全一致,几乎没有学习成本,只要按照"纵向拆分"逻辑的原则进行开发即可。
-
React Hooks几乎是一个全新的框架,所有API都是陌生的。此外,如何优化替代了原来的三大生命周期的useEffect,避免没有必要的副作用执行,是最需要关注的。
一些实践
- 以useState, useEffect为基础进行开发
- 使用useMemo, useCallback进行更新优化,避免不必要重复计算以及副作用执行
- 使用useRef + useImperativeHandle + forwardRef构建和使用函数组件的ref
- 使用useRef维持一个"非渲染用的"变量
- 使用useReducer构建reducer,并使用dispatch更新,可以在一些情况下替代useState
- 使用useContext方便的使用ContextAPI
- 各大框架已经支持hooks,比如react-redux
不太好的用法
不要把"过多"的没有联系的状态放在一起:
const [A, setA] = useState()
const [B, setB] = useState()
const [C, setC] = useState()
const [D, setD] = useState()
这么做,其实并没有用上React Hooks的精髓。