本文目录
- 如何用reactjs构建一个完整的前端页面
- reactjs 什么情况下 会将对象变成不可扩展
- react和js语法上的区别讲解
- react.js和vue.js的异同
- react native 和react js的区别
- 为什么React.js这么火
- 这么多人吹捧ReactJS，但是真的好吗
- 如何学习用Typescript写Reactjs
- React.js 到底是迎合部分人口味还是真的是自然而然产生的
- React.js 究竟解决了什么问题
如何用reactjs构建一个完整的前端页面
用reactjs构建一个完整的前端页面的步骤：
准备：React 的安装包，建议去官网下载安装
1、使用 React 的网页源码，结构大致如下：
《!DOCTYPE html》《html》 《head》 《script src=“../build/react.js“》《/script》 《script src=“../build/react-dom.js“》《/script》 《script src=“../build/browser.min.js“》《/script》 《/head》 《body》 《div id=“example“》《/div》 《script type=“text/babel“》 // **用户代码 ** 《/script》 《/body》《/html》
上面代码有两个地方需要注意。
首先，最后一个 《script》 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=“text/babel“ 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
2、将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
$ babel src --out-dir build
3、渲染转换成html节点，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
这里以插入hello world为例来说明
ReactDOM.render( 《h1》Hello, world!《/h1》, document.getElementById(’example’));
4、运行结果如下：
reactjs 什么情况下 会将对象变成不可扩展
reactjs提供了阻止render的方法，但是如何快速判断是否需要render依然是个问题，因为判断一个复杂的数据对象是否跟之前的值是否相同并不容易。Redux将这个问题极简化了，整个应用共用一个state。但也带来了更复杂的问题，就是state的结构可能非常复杂，如果判断是否更新呢？Redux又一次极简了，那就是采用不可变数据。我们在判断数据是否相同时，并不需要深入判断数据对象的值是否相同，只需要浅比较即可，也就是判断是否为同一个数据对象地址，因为不可变数据对象在数据变化时均会重新创建一个新的数据对象，数据对象的地址不会相同。这也就是为什么在Reactjs，Redux中才有不可变数据对象。
react和js语法上的区别讲解
1、样式class的写法javascript： classreact：className2、style的写法 （react的驼峰命名）javascript： style=“background-color:white“react：style={{backgroundColor: “white“}}3、变量（react变量是大括号，js是引号）javascript： onClick=“clickSearch(e)“react：onClick={(e)=》this.clickSearch(e)}4、资源的引入javascript： css: 《link rel=“stylesheet“ href=“../css/iuapmobile.um.css“》js: 《script src=“../js/summer.js“ 》《/script》react：css: import SearchRoomStyle from ’./searchRoom.css’;js: import ForgetUser from ’../components/ForgetUser.js’
react.js和vue.js的异同
react.js和vue.js的异同：
vue---react.js 的相同点：
vue和react是两个不像相同的框架，但是他们之间也是用共同特点的，所有的前端框架都有一些相同的特点，vue和react之间最关键的相同之处在于，它们在被设计出来时所用的思想或者说理念是一样的，比如说都用到了component组件，props参数传递，组件之间的通信，state状态管理器，lifecircle声明周期等等，似乎现在的前端框架都已经成为了mvc或则mvvc的样子，虽然还有一部分前端开发还是传统模式，但是必然会被node+webpack+vue /react---之类的自动化逐渐替代...
vue----react.js 的不同之处：
vue和react.js最大的不同之处在于它们对DOM的渲染方式不同，vue可以直接在vue文件中使用html标签，数据绑定时类似angular，可以进行条件渲染，而react.js则采用了jsx语法，运用虚拟DOM 的概念进行DOM对页面元素进行渲染，获取页面元素需要用ref来获取，似乎更加安全。
react native 和react js的区别
首先要明白react native 和react js的定义
ReactNative: 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。
React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以《View》取代《div》，以《Image》替代《img》等
在幕后，React Native在主线程之外，在另一个背景线程里运行JavaScript引擎，两个线程之间通过一批量化的async消息协议来通信（有一个专门的React插件）。
(1)，React Js的目的是为了使前端的V层更具组件化，能更好的复用，它能够使用简单的html标签创建更多的自定义组件标签，内部绑定事件，同时可以让你从操作dom中解脱出来，只需要操作数据就会改变相应的dom。(2)，React Native的目的是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app，但是性能可能比原声app差一点。
2 . 原理略有不同:
ReactJs和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。只不过ReactJs是驱动html dom渲染； React Native是驱动android/ios原生组件渲染。其实在React Native推出之前，就已经存在这种使用js驱动app原生组件的技术了，比如Native Script。
3 . 编程思路会有所不同:
react 直接渲染dom，而rn生成id，用bridge（最新用c++实现了）变成一个表，等待 native 去调用，写react可以用前端知识直接上手，rn虽然也可以，但是深入下去没有native知识支持很难.
为什么React.js这么火
Angular和React不属于同一类的东西，Angular是一个框架，而React更多是负责UI视图部分，大家普遍认为React是MVC中的V。那么到底为什么React.js一下子就火起来了呢？个人觉得可能主要是因为以下几个因素所导致的：单向数据绑定就在满世界夸赞双向Data Binding好的时候，React说我默认只支持单向数据流，因为在冯诺依曼体系中，数据就是单向流动的。这么一来，小伙伴们都震惊了，纷纷去Google双向和单向数据绑定的区别。单向绑定确实相比之下要更加轻，但事实上呢，双向绑定的需求也确实是存在的，比如：用户填写表单的时候，填写的值就需要更新到Model中，所以，React其实也有通过addon React Link来提供这个功能。只是他默认是不支持双向数据绑定的。虚拟DOM关于虚拟DOM的好坏，业界众说纷纭，这里不做评价。但单从这个概念本身起码让大家觉得是个新东西。所谓虚拟DOM就是说，在React中如下这段代码：1React.render(2《div className=“commentBox“》3Hello, world! I am a CommentBox.4《/div》5);这里的div其实和DOM中的div完全是两码事儿了，只不过React提供了和DOM类似的Tag和API，事实上React会通过他自己的逻辑去转化为真正的DOM。所以，把这种重做虚拟DOM。那么这样做有什么好处呢？最明显的一点好处就是React所谓的dom diff，能够实现delta级别的dom更新。当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的dom diff算法计算出不同点，然后以最小粒度进行更新。这也是React号称性能好的原因。其次，还有一点非常好的地方就在于，有了虚拟DOM就可以让UI脱离设备，换句话说，只要有对应的转化关系，如：虚拟DOM -》 浏览器DOM，就能进行渲染。React Native就是一个很好的例子，它把虚拟DOM转化为Native UI组件，这样理论上就解决了DOM在移动端性能的问题。当然，缺点也是有的，比如：就无法和已有的原生DOM组件进行兼容。JSXJSX其实本质上是一种新的语言，只不过它设计成JavaScript一种扩展，所以，其语法绝大部分都和JavaScript一样。而同时它搭配一个JSX Transform的工具可以将JSX编译为原生的JavaScript。那么这样做好处是什么呢？当然了，首要任务就是让你写代码方便点，否则想想每次都要React.createElement也是醉了！其次呢，另一个好处就是它可以让你书写ES6之类的语法，就和CoffeeScript是一个道理，最终它会翻译到浏览器兼容的语法。
这么多人吹捧ReactJS，但是真的好吗
最近用react做了一个聊天类型的应用，说一下大概的看法吧：
言简意赅的说，react+redux+immutable+其它辅助lib的方案，在多状态、多交互的产品中，还是有很大的应用场景，一图胜千言：
以下是根据自己体验和社区经验，得出的一些想法：
mvvm 是架构层面的模式，函数式是编程上的范式，两者不是对立面，react+flux 是函数式，mvvm 里一样可以用函数式，恰恰在不少 mvvm 的实现框架中，FPR 是很重要的实现双绑的方案：比如 ReactiveCocoa 用到的 RAC。
是否有实际的案例去证明，应用规模大了后，mvvm 就不能用了？非要你的 flux？ flux 才出现多久，以前用 mvvm 实现的大规模应用都是假的？
react 支持者都是直接根据官方文档照读：双绑很混乱，flux 才能解决一切，事实是，你喜欢单向数据流，mvvm 一样支持啊，不要双绑就行了呀。
react 我没有实际用过，不发表负面评论，但让我觉得比较亮的是透明的virtual dom和同构方案。
性能这块，ng 未必会比 react 慢，但不好的地方在于，ng 需要知道 track by 这些黑魔法才能做到优化，而很多开发者并不知道这点，在这上面，react 是领先的。
virtual dom 的引入也让 react 脱离了视图的具体实现，可以很方便的切换底层平台，这是一个大优势，而 ng2的架构也会做到这点。
react是 view 层，你要愿意，mvvm 里的 v 同样可以用 react 来做，不要随便把 mvvm 和 react 等价，认为只有 react 能用 flux，认为 react 只能用于 flux。
用还是不用？客观：因地制宜主观：因人而异其实：你高兴就好
如何学习用Typescript写Reactjs
1.安装node，因为ts的编译器是js/ts写的； 安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；2.安装vs 2015或者vs code，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；3.vs自带了TypeScript（vs2012+，vs2015update1自带了ts1.7）,最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs（比如mac环境）, 可以用命令行装ts编译器 npm i -g typescript@next4. 安装了ts后, 就会有2个命令可用：tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；5. 命令行下载react的ts头文件,tsd install react-global --save注意上面之所以写 react-global 而不是react， 因为我们接下来使用比较原始的写法，直接把React当作全局对象使用， 而不作为es6模块（必须用import引入），不需要Babel编译也不需要webpack打包；上面执行的tsd命令下载了ReactJS类库的头文件, 下面用tsc命令创建一个ts项目配置文件tsc --init命令创建了tsconfig.json配置文件, 打开该文件增加“jsx“: “react“, 就是自动把tsx变成最终的js, 而不是jsx把“outDir“: “built“, 这行去掉,这样编译的文件就会在当前目录输出 “target“: “es5“, 这里es3改成es5, “watch“: true 是否监听文件修改 如果你用的是vs,这行不重要6.下载reactjs文件，如果没有安装bower命令，可以手动去官网下载react类库bower install --save react7.以上环境配置好了, 开始写代码:创建一个demo.tsx文件(注意这里是tsx, 不是ts也不是jsx)创建一个demo.html, 添加文件的引用《!doctype html》《html》《head》 《script src=“bower_components/react/react.min.js“》《/script》 《script src=“bower_components/react/react-dom.min.js“》《/script》 《script src=“demo.js“》《/script》《/head》《body》 《/body》《/html》8. demo.tsx 写代码class MyClass extends React.Component《any, any》 { render() { return 《h1》hello {this.props.name}《/h1》; }}document.addEventListener(’DOMContentLoaded’, function () { ReactDOM.render(《MyClass name=“Tom“ /》, document.body);});9. 如果保存了demo.tsx后, 没有在目录下发现自动编译了demo.js, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行tsctsc命令会自动根据tsconfig.json里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件10. 打开demo.html可以看到效果了;11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了《any,any》 这两个prop和states类型约束, 仅此而已;11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了《any,any》 这两个prop和states类型约束, 仅此而已;12. 下班, 有空再写;－－－－－－时间分割－－－－－－13、继续写，对1-12进行润色，转入传教模式；以上的代码，工厂方法在创建子类的同时，做了一些初始化的动作，这与单纯的原型继承不同，所以在使用class方式进行子类继承，这样的写法是无效的；class MyView extends React.Component { render() { return 《h1》hello {this.state.name}《/h1》; //会抛异常,因为state是null } //不起作用的 getInitialState:(){ return {name:’’,age:20}; }}需要改成如下方式，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）class MyView extends React.Component { constructor(props, context) { super(props, context); this.state = { name: ’’, }; } render() { return 《h1》hello {this.state.name}《/h1》; }}16、当组件化遇到强类型：从前写JS组件，一般复用性比较差，基本写完就仍，原因如下：1）暴露了太多的Dom结构以及别的实现细节；2）命名挫，缺乏可记忆性，本身编程中变量和方法的命名对于码农来说就是天坑；3）JS天生缺乏私有和公共成员的约束，不加注释根本不知道怎么使用该类库/组件；React解决了把dom标签暴露出去的问题，TS则解决了语言层面的问题，并提供了强大的重构能力，你根本不需要记住组件的API，因为工具会列出来；
React.js 到底是迎合部分人口味还是真的是自然而然产生的
Angular和React不属于同一类的东西，Angular是一个框架，而React是负责UI视图部分，大家普遍认为React是MVC中的V。那么到底为什么React.js一下子就火起来了呢？个人觉得可能主要是因为以下几个因素所导致的：单向数据绑定就在满世界夸赞双向DataBinding好的时候，React说我默认只支持单向数据流，因为在冯诺依曼体系中，数据就是单向流动的。这么一来，小伙伴们都震惊了，纷纷去Google双向和单向数据绑定的区别。单向绑定确实相比之下要更加轻，但事实上呢，双向绑定的需求也确实是存在的，比如：用户填写表单的时候，填写的值就需要更新到Model中，所以，React其实也有通过addonReactLink来提供这个功能。只是他默认是不支持双向数据绑定的。虚拟DOM关于虚拟DOM的好坏，业界众说纷纭，这里不做评价。但单从这个概念本身起码让大家觉得是个新东西。所谓虚拟DOM就是说，在React中如下这段代码：1React.render(23Hello,world!IamaCommentBox.45);这里的div其实和DOM中的div完全是两码事儿了，只不过React提供了和DOM类似的Tag和API，事实上React会通过他自己的逻辑去转化为真正的DOM。所以，把这种重做虚拟DOM。那么这样做有什么好处呢？最明显的一点好处就是React所谓的domdiff，能够实现delta级别的dom更新。当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的domdiff算法计算出不同点，然后以最小粒度进行更新。这也是React号称性能好的原因。其次，还有一点非常好的地方就在于，有了虚拟DOM就可以让UI脱离设备，换句话说，只要有对应的转化关系，如：虚拟DOM-》浏览器DOM，就能进行渲染。ReactNative就是一个很好的例子，它把虚拟DOM转化为NativeUI组件，这样理论上就解决了DOM在移动端性能的问题。当然，缺点也是有的，比如：就无法和已有的原生DOM组件进行兼容。JSXJSX其实本质上是一种新的语言，只不过它设计成JavaScript一种扩展，所以，其语法绝大部分都和JavaScript一样。而同时它搭配一个JSXTransform的工具可以将JSX编译为原生的JavaScript。那么这样做好处是什么呢？当然了，首要任务就是让你写代码方便点，否则想想每次都要React.createElement也是醉了！其次呢，另一个好处就是它可以让你书写ES6之类的语法，就和CoffeeScript是一个道理，最终它会翻译到浏览器兼容的语法。
React.js 究竟解决了什么问题
React通常和其他的JavaScript框架同时被提及，但是说“React对比Angular”却讲不通，因为它们之间是不可比较的。Angular是一个完整的框架（包括一个view层），React却并不是。这也是React很难于理解的原因，它虽然抽离自一个具备完整框架的生态系统中，但仅仅是一个view层。React提供了模板语法以及一些函数钩子用于基本的HTML渲染。这就是React全部的输出——HTML。你把HTML/JavaScript合到一起，被称为“组件”，允许把它们自己内部的状态存到内存中（比如在一个选项卡中哪个被选中），不过最后你只是吐出HTML。