精益 React 学习指南 (Lean React)- 1.1 React 介绍
1.1 React 介绍
1.1.1 React 是什么
狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架,广义来讲 React 不仅仅是 js 框架本身,更是一套完整的前端开发生态体系,这套体系包括:
任何技术都是一样,技术本身的核心不会太复杂,但是围绕这个主体会有很多依附的知识点形成了体系化的技术栈。 所以我们谈学习 React 并不仅仅是学习 React 本身,而是学习这套开发体系,整个技术栈, 本书也是围绕这个技术栈系统的讲解。
1.1.2 React 中的基本概念我们先来认识一下 React 中的基本概念 React.js ReactDOM.js JSX 组件 VIRTUAL DOM 单向数据流:one-way reactive data flow 1.1.3 Hello React World我也是性子急的人,按照技术界的惯例,在学习一个技术前,首先得说一句: “Hello World!”。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="http://facebook.github.io/react/js/react.js"></script> <script src="http://facebook.github.io/react/js/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render( <Hello name="World" />,document.getElementById('example') ); </script> </body> </html>
了解了基本概念以及看过 Hello World 后,读者可能会开始产生疑问了:
答:是的,看上去一样, 但jsx 和 HTML 本质的不同是 jsx 直接在函数中写 xml 标签。在 1.2 节中,会详细介绍 jsx 以及和 HTML 做更多的对比。
答:答案见 1.1.4 节
答:答案见 1.1.5 节 1.1.4 React 的独特之处相比其他前端框架,为什么 React 独树一帜,能够脱颖而出呢?
1.1.4.1 组件的组合模式
React 就是基于组合模式, 无论是应用等级还是一个表单亦或是一个按钮都视为一个组件, 然后基于组件的组合构建整个应用,这样的结构一直是前端界想要却迟迟不来的 web component。 React 中组件的组合:
基于组合模式的优点:
1.1.4.2 单向数据流的设计我们都知道 Javascript 是脚本语言,不能像静态语言一样通过编译定位为题,想要清晰的定位到应用中的 bug 需要深入了解业务代码,对于大型前端应用来说,因为业务代码量很大且复杂,很难定位到 bug。 然而 React 的单向数据流的设计让前端 bug 定位变得简单, 页面的 UI 和数据的对应是唯一的,我们可以通过定位数据变化就可以定位页面展现问题。 单向数据流设计:
1.1.4.3 高效的性能这里要提一个概念, 可能你已经了解或听说了,就是 virtual dom。 React 之所以能够这样设计要归功于 Virtual DOM 算法, 基于算法可以让只有需要改变的元素才去重渲染。在后面的内部实现章节中会详细讲解 virtual DOM 算法的实现 1.1.4.4 分离的框架设计React.js 现在的版本已经将源码分开为 ReactDOM 和 React.js . 这就意味着 React 不仅仅能够在 web 端工作, 甚至可以在服务端(nodejs),Native 端运行。 与此同时, 我们可以自定义自己的渲染器, 实现比如 Three.js, Pixi.js, D3.js 的 React 方式渲染。 1.1.5 React 应用范围React 可应用的范围:
1.1.5.1 Web 端应用Web 应用是 React 的出发点,我们可以通过 React 构建从简单的 TODOAPP 到大型的电商购物网站应用。 同时除了能够处理 HTML 以外, 在 Web 端, 我们同样可以通过 React 来实现数据可视化, 图表展现,甚至是游戏开发: 1.1.5.2 原生应用除了 Web 端以外,我们可以使用同样的 jsx 语法构建 IOS 或者 Android 应用, 这要归功于 facebook 开源的 React Native。 基于 React Native , 我们将可以使用 jsx 来实现具有原生应用性能的 UI 运行于 IOS 和 android 中,同时我们也可以通过 NW.js 或者 Electron 来实现基于 React 的桌面应用。 1.1.5.3 服务端渲染React 除了在 Web 和 Native 环境以外, 也可以通过 React 实现在服务器端渲染出 HTML。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |