React入门简介

React简介

        react是Facebook用来创建用户界面的js库。React不是一个MVC框架，而是一个用于构建组件ui库，是一个前端界面开发工具，所以很多人认为React是MVC中的V（视图）。React的存在能够很好的解决‘构建随着时间数据不断变化的大规模应用程序’，react能够引导我们重新思考如何构建应用程序。react的核心就是封装可复用性高的组件，各个组件维护自己的状态和ui，当状态更新，自动重新渲染整个组件。

        前端主流框架有vue、react、angular。vue和react是受欢迎程度最高的框架，是MMVM框架(视图模型)，angular忧郁革命性太高，每次一个新版本发布之后总是覆盖之前的版本，因此维护成本很高。

React核心思想 

React的哲学以及核心思想是封装组件，各个组件维护自己的状态和ui，当状态更改，自动更新渲染整个组件。
基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个dom元素，然后操作dom更改UI

 React包含的概念

1.组件

//函数式组件
function Hello(){retrun <h1>Hello,fxt</h1>
}
ReactDOM.render(<Hello>,
docoment.getElementById('root1')
)

        react应用都是构建在组件智商，上面的Hello就是一个React构建的组件，render方法会把这个组件显示在页面的上的某个原色mountNode里面，显示的内容就是<h1>Hello,fxt</h1>。

        在组件中有两个比较核心概念是props和state，这里没有进行展示，后面会学习到。props主要用来进行传值，state主要用来定义组件内部的状态。

 2.jsx

从上面的代码中可以看到HTML代码直接嵌入进js代码里面，这个就是react中的jsx语法，能够在HTML中写js，也能够在js中写HTML。对于vue重度爱好者来说使用react是非常痛苦的意见事。因为前端一直都以‘结构样式行为相分离’未开发思想，而React恰恰是让js中嵌入HTML。

3、virtual Dom 

        当组件状态state有更改的时候，react会自动调用组件的render方法重新渲染整个组件的UI。当然如果真的这样大面积的操作dom，性能会是一个很大的问题，所以React实现了一个virtual Dom ，组件dom结构就是映射到这个virtual Dom上。

        react在这个虚拟dom中实现了diff算法，当要重新渲染组件的时候，会通过diff寻找要变更的dom节点，再把这个修改更新到浏览器实际的dom节点上，所有实际上不是真的渲染整个dom树。这个虚拟dom是一个纯粹的js数据结构，所以性能上会比原生的dom快很多。以往的js或者jquery都是通过大量操作dom，或导致渲染时间很慢。react不会直接去操作dom,而是用modle来代替dom，用js生成虚拟的dom树，只有在最后一次才对dom进行操作。

4、Data Flow

‘单向数据绑定’是react推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般场景下我们可能会意识不到它的存在，但不影响使用react，我们只需要了解这个概念。