react技术分享（概括总结）

       因为接下来的项目咱们定下来的前端技术栈是react，考虑到你们都有必定的学习成本，为了方便你们能更快速的入门react,这里是我学习过程当中作的一些总结。内容较少涉及语法api,要系统的学习仍是要看官方文档。这里只是为了能让你们更快的入门而已。

1.react涉及的主要知识点

1.1jsx

       React 容许将 HTML 代码直接嵌入到 JS 代码中，对于长久以来一直被"表现与逻辑分离"的思想洗脑，要接受这种代码的书写方须要必定的过程，而一旦熟悉了这种在 JS 中支持 HTML 的写法，就会发现 JSX 的聪明之处。

       传统的 MVC 是将模板放在其余地方，好比 <script> 标签或者模板文件，再在 JS 中经过某种手段引用模板。React 则把 HTML 模板直接嵌入到 JS 代码里面，作到了模板和组件的直接关联。

组件属性：为了和原生的 HTML 标签进行区分，组件变量使用大写开头，并且为了和原生属性以及 js 关键字区分，组件属性中的 class 要写成 className。

JS 表达式：组件属性中使用表达式，要用 {} 替换 " " ，同时在 JSX 进行注释要用 {} 包起来。

1.2state& virtualdom

      state是组件的当前状态，能够把组件简单当作一个“状态机”，根据状态state呈现不一样的 UI 展现。

一旦状态（数据）更改，组件就会自动调用 render 从新渲染 UI，这个更改的动做会经过this.setState方法来触发。

      当组件状态state有更改的时候，React 会自动调用组件的render方法从新渲染整个组件的 UI。可是如此大规模地操做 DOM ，会对性能形成很大的影响，所以 React 实现了一个 Virtual DOM，在 这个Virtual DOM 实现了一个 diff 算法，当 state 变化时，便经过 diff 寻找须要更新的节点，再把这个修改更新到浏览器的 DOM 节点上，至关于实现了局部的更新，在性能上比原生的 DOM 要快许多。

1.3props

      父子组件交互由外部经过 JSX 属性传入设置，好比由父组件传递过来的 id，子组件经过props获取到父组件传过来的值。props一旦设置完成，通常是不可更改的。

1.4组件生命周期

componentWillMount 在渲染前调用。
componentDidMount 在第一次渲染后调用。
以后组件已经生成了对应的DOM结构，能够经过this.getDOMNode()来进行访问。
若是你想和其余JavaScript框架一块儿使用，能够在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操做(防止异部操做阻塞UI)。
componentWillReceiveProps 在初始化render时不会被调用，当组件接收到一个新的prop时被调用
shouldComponentUpdate 返回一个布尔值。当确认不须要更新组件时使用。在组件接收到新的state或新的props时被调用。在初始化时或使用forceUpdate时不被调用
componentWillUpdate 初始化不会调用。组件接收到新的state或者props但尚未render时被调用
componentDidUpdate 初始化不会调用。组件完成更新后当即调用。
componentWillUnmount 组件从DOM中移除的时候马上被调用。

1.5核心思想

单向数据流，组件封装

      React 十分强调组件的概念，对于全部功能独立的模块均可以抽离成组件，而后在须要的地方 import ，下降了代码之间的耦合性，而且方便维护。父子组件的交互使用props传递值，因为单向的数据绑定，保证了状态不会混乱。

 

2.react和咱们传统的jquery开发方式有什么不一样？

2.1编程思想的不一样

jquery开发：监听事件=》判断当前业务状态=》直接操做dom元素

react开发：监听事件=》判断当前业务状态=》修改state=》render修改dom元素（最小化修改）

如图所示：

二者之间最大的区别就是react有一层state做为中间过渡，不须要关系dom哪里发生了变化，只须要变动state便可，剩下的react帮咱们作。而jquery没有这层过分，直接操做dom。

2.2优缺点比较

jquery缺点：在逻辑复杂的状况下，咱们须要花很大的精力来理清各类业务逻辑之间的联系。而且直接操做dom,难以写出优雅的代码。且代码耦合度高，难以维护。 jquery优势: 门槛低易上手，只是简单页面能够快速开发完成。 react缺点：学习成本高难以上手，相似咱们公司的状况，前期没有组件积累，开发缓慢。 react优势:  页面因为是以组件的形式拆分，相对于jquery来讲，耦合性比较低，较好维护。