React hooks是个啥

114 阅读1分钟

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提供了点赞的能力,提供了点赞的状态。