React的使用：react框架的五大特点

来源：动视网责编：小采时间：2020-11-27 19:33:26

React的使用：react框架的五大特点

React的使用：react框架的五大特点:这篇文章给大家介绍的内容是关于React的使用：react框架的五大特点，有着一定的参考价值，有需要的朋友可以参考一下。01. React 出现的时代背景世界上的事情都有因才有果，一个框架的出现也必然离不开特定的时代背景。而对于 React 而言，不得不提的时代背景

推荐度：

点击下载本文 文档为doc格式

导读React的使用：react框架的五大特点:这篇文章给大家介绍的内容是关于React的使用：react框架的五大特点，有着一定的参考价值，有需要的朋友可以参考一下。01. React 出现的时代背景世界上的事情都有因才有果，一个框架的出现也必然离不开特定的时代背景。而对于 React 而言，不得不提的时代背景

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

封装：一个组件所需的数据封装于组件内部；
组合：一个组件可以与其他组件通过组合的方式实现更加复杂的业务逻辑；

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

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