jsx

基础认识 官网 特点 声明式编程 组件化 支持客户端和服务端渲染 高效 虚拟DOM，不总是直接操作DOM，只是减少DOM的操作,操作虚拟DOM不会对页面进行重绘，当渲染的时候，才会进行渲染 DOM Diff 算法，最小化页面重绘，就是当页面变化时，通过计算那部分需要重绘，只重绘当前部分，减少页面的重绘区域 单向数据流 js文件 react.js：react的核心库 react-dom.js：提供操作DOM的react扩展 babel.js：解析jsx语法 <div id="app"></div> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script src="js/babel.min.js"></script> <script type="text/babel"> // 创建虚拟DOM元素对象 let vDom = <h1>react hello</h1> // 将虚拟DOM渲染到页面真实DOM容器中 ReactDOM.render(vDom,document.getElementById('app')) </script> JSX react提供了创建虚拟DOM的方法 虚拟DOM对象最终都会被react转换为真实的DOM

转载请注明： http://www.panaihua.com/react-base/ 简介 React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话，那么 React 的组件就相当于 MVC 里面的 View。说白点就是帮助我们将界面分成各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的，这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。 React.js 不是一个框架，它只是一个库。它只提供 UI （view）层面的解决方案。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。 JSX React的核心机制就是实现了一个虚拟DOM，利用虚拟DOM来减少对实际DOM的操作从而提升性能，组件DOM结构就是映射到这个虚拟的DOM上，React在这个虚拟DOM上实现了一个diff算法，当要更新组件的时候，会通过diff寻找要变更的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，所以实际上不是真的渲染整个DOM树，这个虚拟的DOM是一个纯粹的JS数据结构，所以性能比原生DOM会提高很多；

此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分，给大家介绍 React 与 React Native 结合学习的方法，此小节主要介绍 React 的底层原理与机制。 目前 React 可以说是前端世界最火热的框架，具有高性能以及容易上手的特性，而且在掌握了 React 框架后，再学习其他类似 React 的框架也将变得更易上手。 关于 React 框架的高性能原因以及底层的重要概念，我们在后续的章节会陆续展开探讨，这一章节我们先来通过一个实际的案例来探究 React 的重要概念与特性。 如果你对 React 框架已非常熟悉，可以选择性地跳过此章节，直接阅读后续章节即可。 1. React 框架的安装 学习 React 框架，我们可以通过如下几种方式搭建开发环境进行快速地学习。 1.1 使用在线代码编辑器编写学习 在线编辑器中可以灵活地切换 React 的版本以及选择 Babel 作为 JSX 代码到 JavaScript 的预处理转换。 如官方推荐的在线代码编辑器 React 环境： CodePen 。 1.2 本地开发环境的搭建 1.2.1 安装 Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node