React学习1(react 概念介绍)

React学习1

1.react简介

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。(虚拟dom与diff算法)

2. react特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

  声明式设计（Declarative），指的是这么一种软件设计理念和做法，我们向一个工具描述我们想要让一个事物达到的目标状态，由这个工具自己内部去处理如何令这个事物达到目标状态。
  命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。
  声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。这里react就是我们设计好我们想要的页面模板,由react来进行渲染出我们想要的页面
  和Declarative（声明式设计）相对的是命令式设计（Imperative）或者过程式设计（Procedural）
  命令式设计（Imperative）或者过程式设计（Procedural），描述的是一系列的动作，这一系列的动作如果被正确执行，最终结果将达到我们期望的目标状态。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

  JavaScript中js引擎和渲染引擎（浏览器内核）是独立实现的。使用js 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。每操作一次 DOM，都要跨界一次。跨界的次数一多，就会产生比较明显的性能问题。
  解析HTML代码，生产DOM tree,解析CSS样式，结合DOM tree生产Render tree（display: none;的结点不会存在Render tree上，最后不会被paint）
  计算Render tree各个节点的布局信息，比如box的位置、尺寸、颜色、外形等根据计算后的布局信息，调用浏览器的UI引擎进行渲染。
  而操作dom会产生几种动作，重绘和重排极大的影响渲染的效率。
  react最大的优势之一就在于虚拟dom,会避免进行频繁的dom操作,从而实现高效的性能

• 3.灵活 −React可以与已知的库或框架很好地配合。

  react 可以是整个的react项目开发,也可以是混合式开发,与其他框架混合，只在某个页面甚至某个组件下使用.相对比较灵活

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

  JSX=javascript xml就是Javascript和XML结合的一种格式 ,只要把HTML代码写在JS里，那就是JSX。JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
  它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

  React组件化能实现组件复用, 页面 UI 和数据实现分离, 使得页面逻辑条理清晰, 可读性更好
  React 的主要思想就是数据和 DOM 操作分离, 而且都利用 JS 去实现所有功能(UI 渲染, 数据处理), 分离之后我们只需要关注数据层面的增删改查, 而不需要关心怎样把数据渲染到 DOM 元素上, 关于 DOM 挂载这些事情 React 都帮我们做了

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

  单向数据流指只能从一个方向来修改状态,限制了状态修改的方式，让状态变得可预测，容易调试