react是一个用于构建用户界面的JAVASCRIPT库；React负责UI层面的展现；React中的数据流是沿着组件树从上到下单向流动的；React拥有较高的性能，代码逻辑非常简单。
本教程操作环境：windows7系统、react17.0.1版本、Dell G3电脑。
相关推荐：《react教程》
怎么理解react?
随着Facebook开源了React Native for Android，React的前景似乎更加光明。它从最早的UI框架慢慢演变成了一套web应用的解决方案，并且它衍生出来的React Native更是承载着宏伟的目标：learn once, write anywhere。这对前端来说似乎是种不可抗拒的吸引力。
React有三个关键词：
- Just the ui
- virtual dom
- data flow
要理解React，我从它的这三个关键词入手。
2.1 Just the ui
React 负责UI层面的展现，尽管很多人用React作[MVC]架构中的View层,但这并不是React的本意。
一般的情况下，我们在开发过程中，通常会使用模板或者直接使用HTML来构建UI，而HTML是静态的，使用模板在大多数情况下是可以满足需求的，但是在复杂的逻辑情境中就显得有些吃力了，过多的if else或者逻辑控制在模板里，都会让代码变得难以维护，当然这还是说整个项目中使用统一的模板的情况下。
React换了一种思路解决问题，它把UI拆分成组件，而不是通过模板引擎和展示逻辑，使得它可以易于拓展和维护。因此它引入了JSX这种语法规则，可以让我们使用类似HTML的语法去写js的函数调用。
2.2 virtual dom
浏览器渲染页面的一般过程通常是这样的：
加载html->生成DOM树->解析css生成Render树->生成页面
那么React的virtual dom是怎么做的呢？
生成virtual dom->diff->必要的DOM更新
在这里面大部分的操作放在js中去完成，因为我们都知道dom操作是很昂贵的。所以在一般的情况下React的性能还是很不错的。
2.3 data flow
React中的数据流是沿着组件树从上到下单向流动的。
这里的data flow指的是一种应用架构的实现方式，比如说，数据存放在哪里，在哪里触发事件，如何响应用户操作。它不是React提供的什么新功能，应该是React构建应用的实践。我们理解了之后的Flux或许就更加容易理解data flow这个概念了。
2.4 Flux overview
Flux是facebook配套React强推的一种应用架构思想。它利用数据的单向流动为React的可复用的视图组件提供了补充。
与React的数据流动方式相同，在Flux架构中，数据也是单向流动的：
简单的说，所有的数据流动都会经过Dispatcher。Action可以通过action creator产生并被提供给dispatcher，但多数情况下action是通过用户与views的交互产生。
在View层捕获用户的交互，产生一个Action，通过触发注册在Dispatcher上面的事件回调，使得相关的Store响应Action，然后会触发到Store上面的onChange事件，进一步的更新View。
数据流动也始终是如上图所示的单向流动的。
以上是怎么理解react的详细内容。更多信息请关注PHP中文网其他相关文章！
