react 框架学习之深入研究【王道 react】
React 是什么?
React 是一个用于构建用户界面的 JavaScript 库。特点:
声明式设计:React 采用声明范式,可以轻松描述应用。高效:React 通过对 DOM 的模拟,最大限度地减少与 DOM 的交互。灵活:React 可以与已知的库或框架很好地配合。
react:react 是 React 库的入口点
react-dom:提供了针对 DOM 的方法,比如:把创建的虚拟 DOM,渲染到页面上
React 框架的开发中心思想
React 框架的开发中心思想就是封装组件,以组件为核心而不是 MVC,原因是 Facebook 任务,当时(2013 年以前)的前端框架都不是前端工程师真正想要的。因此 React 框架:
1.用来构建 UI 的 JavaScript 库
2.React 不是一个 MVC 框架,只工作在 View 层
还记得 jQuery 的时代大家,先通过 DOM 找到元素再去更改 UI。React 的基本工作方式与此类似,不对的是通过虚拟 Dom 改善了传统原生 Dom 操作的性能问题,同时通过数据绑定解决了【选择器】不厌其烦地来回查找某个 DOM 元素的尴尬。
React 框架 大体包含下面这些概念:
1.组件
2.JSX
3.Virtual DOM
4.Data Flow
Hello React
React 高性能的原理:在 Web 开发中我们总需要将变化的数据实时反应到 UI 上,这时就需要对 DOM 进行操作。组件系统 react 最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component 那么什么是组件呢? 组件指的就是同时包含了 html、css、js、image 元素的聚合体使用 react 开发的核心就是将页面拆分成若干个组件,并且 react 一个组件中同时耦合了 css、js、image,这种模式整个颠覆了过去的传统的方式
我感觉,react 最主要的贡献是解决了变量变化后 dom 需要自动刷新的问题
比如说原生 js 想实现计数器,点页面上一个按钮,然后一个数值不断增加。你需要绑定一个监听器,然后通过回调函数修改本地变量的值,最后操纵 dom 把这个值显示出来。
现在呢,还需要干前两部,第三部由于生成那个节点的时候,那个计数器变量就是被注入进入的,所以 react 帮你把它变了。所以用了 react,你就不用写一堆 getElementById 了
版权声明: 本文为 InfoQ 作者【黎燃】的原创文章。
原文链接:【http://xie.infoq.cn/article/759f755331230874a5bff518a】。文章转载请联系作者。
评论