react技术分享（归纳总结）

2019独角兽企业重金招聘Python工程师标准>>>

       由于接下来的项目我们定下来的前端技术栈是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来说，耦合性比较低，较好维护。

转载于:https://my.oschina.net/u/2474041/blog/1839329