视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
React的使用:react框架的五大特点
2020-11-27 19:33:26 责编:小采
文档


组件化有两个显著的特点:

  1. 封装:一个组件所需的数据封装于组件内部;

  2. 组合:一个组件可以与其他组件通过组合的方式实现更加复杂的业务逻辑;

而 React 最棒的一点就在于在 React 中一切 UI 元素皆是组件,而组件又只是一个 JavaScript 函数。但是相较于传统函数接收一些参数并返回一个值的模式而言,React 函数将会接收一些参数,返回界面中的 UI 元素。

正如一个好的函数应该符合“DOT”(Do One Thing)原则,一个好的 React 组件也不能混杂其他组件的业务逻辑,我们应该尽量让 React 组件保持简单,从而让复杂的 React 组件的内部逻辑变得清晰。

下面这个公式可以很好的表达在 React 中“视图是对数据的渲染”的组件化思想:

UI = render(data)

这样一来,在 React 中,构成复杂视图的方式就变得很简单:组合组件;

04. 声明式代码

声明式代码指的是:让开发者按照“我要做什么”,而不是“我要让计算机做什么”去思考如何实现业务需求。

让我们简单比较一下“声明式代码”与“命令式代码”的不同:

  • 命令式代码:
    感受到天气太热,编写代码:

    1. 拿起空调遥控器;
    2. 打开空调;
    3. 设置温度为 27 摄氏度;
  • 声明式代码:
    感受到天气太热,编写代码:

    1. 调用“开空调(27)”函数;
  • 看起来,声明式代码不过是对封装了的命令式代码进行调用,但本质上,这是一种更棒的编程思维,它能够让我们不再仅仅着眼于如何通过代码实现功能,而是更多的思考为了实现业务逻辑,代码需要哪些功能(函数),对功能的设计,和功能之间的关系的思考,让我们的代码逻辑更加清晰,富有秩序。

    05. 单向数据流

    在 React 中,数据的组织形式是树状的,由上至下单向流动(对应DOM树),之所以这样设计,是因为:数据流更清晰,组件的状态就更可控;

    对于业务逻辑复杂的单页面应用而言,前端所承接的数据量很大,数据之间的关系也错综复杂,再加上 React 采用组件式开发,不同 UI 根据不同数据产生变化,如果没有一个清晰,合理的数据流管理方式,最后的代码只能是一团糟,一旦 UI 或数据出现错误将很难排查出错源到底在哪。

    有鉴于此,React 使用“单向数据流”的方式,只允许数据从父元素流至子元素。

    React 单向数据流的机制大致如下:数据被存储在父级组件上,并且向下流动至子组件。虽然数据存储在父级组件上,但是父级与子级的组件都可以使用这个数据。但是,如果数据需要更新,那么只有父级组件应该去更新,如果子组件需要修改数据,他也只能通过发送更新的数据给父级组件,那里才是数据被真正更新的地方。一旦数据被父级组件更新了,子级组件将会接收到新的数据。

    单向数据流虽然听起来增加了额外的工作量,但是却使开发者更容易搞清楚应用是如何工作的。

    06. 纯粹的JavaScript语法

    我们很容易就忽视 React 的这一特点,即在 React 中,没有任何特殊的专有的 React 语法需要理解和记忆,所有的组件,数据操作,业务逻辑都是通过使用 JavaScript 语法实现的。

    这意味着你想要使用 React 只需理解 React 的思想和几个关键的 API 就可以立即开始使用 React 进行复杂应用的开发。并且 React 还鼓励你使用函数式编程思想进行开发,你可以在 React 开发中,使用你的任何函数式编程技巧。

    07. 小结

    在本文中我们先谈到了 React 框架产生的时代背景,接着解释了 React 的五大特点:

    1. 虚拟 DOM;

    2. 组件化;

    3. 声明式代码;

    4. 单向数据流;

    5. 纯粹的 JavaScript 语法;

    下载本文
    显示全文
    专题