React 16.8的新增特性,可以让你在不写class的情况下使用state等react特性。hooks是对函数式组件的极大增强。
描述UI
由数据产生了视图,视图不是ui的全部,ui是伴随着用户使用的,而视图是死的,是给用户看的。操作视图产生消息,消息触发了重算,最终重算了数据,而数据又反过来驱动视图。这个是react模型,也是现在是vue模型,vue现在也在用单向数据流,包括angular也是使用的单向数据流模型。消息和重算是视图背后的一种行为。
graph TD
数据 --> 视图 --> 消息 --> 重算
重算 --> 数据
消息和重算抽象成行为:
graph TD
数据 --> 视图 --> 行为
行为 --> 数据
这个行为还有异步的:
graph TD
数据 --> 视图 --> 行为
行为 --> 数据
行为 --> 异步 --> 数据
数据并不对应着行为,状态对应着行为,不变的是属性,变化的是状态。
graph TD
状态 --> 视图 --> 行为
属性 --> 视图
行为 --> 状态
行为 --> 异步 --> 状态
状态映射了行为,因此行为可以封装在状态内。让作用可以监听所有的一切。
hook
重新定义的ui界面,需要:
- state hook
- effect hook
- context hook 3个基础的hook:状态、作用、上下文
函数 V = f(props, state), UI = V usehook1() usehook2() ...
举个例子,一个点赞的视图,使用了点赞的hook,点赞的视图只是根据点赞数把视图画出来,而点赞的hook提供了点赞的能力,提供了点赞的状态。