1.内部js: 在直接在页面的<script></script>标签内写js代码 优点:相对于使用行内js,内部js代码较为集中,与页面结构的实现代码耦合度较低,比较便于维护 缺点:js代码仅限于当前页面的使用,代码无法被多个页面重复使用,导致代码冗余度较高 2.外部js: 引入外部的js文件(推荐使用) 优点:1.页面代码跟js代码实现有效分离,降低耦合度 2.便于代码的维护和扩展 3.有利于代码的复用 3.行内js: 直接嵌套在html的语句 开发中不推荐这种方式, (1)因为…
什么是JSX         JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 React 元素进行抽象等等.         JSX不是XML或者HTML,不是一种限制,是基于ECMAScript的一种新特性,一种定义带属性树结构的语法.JSX是JS的一中语法糖,类似CoffeeScript.TypeScript最终都是被解释为JS.语法糖必须要有解析器解析,浏览器才可以识别.解…
React 是什么? 网络上的解释很多...我这里把他定义为 通过javascript 的形式组件化 html的框架... React 仅仅是 VIEW 层. React 提供了模板语法以及一些函数钩子用于基本的 HTML 渲染.这就是 React 全部的输出——HTML.你把 HTML / JavaScript 合到一起,被称为“组件”,允许把它们自己内部的状态存到内存中(比如在一个选项卡中哪个被选中),不过最后你只是吐出 HTML. React 的安装? 首先是下载 reactjs的文件包.…
React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.createElement 创建该类型的一个实例. var root = React.createElement('div'); 为了渲染一个新的树形结构到 DOM 中,你创建若干个 ReactElement,然后传给React.render 作为第一个参数,同时将第二个参数设为一个正规的 DOM 元素(HTM…
2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to fix this. Every solution talks about 'setting options'. I don't know what that means. Finally, I figured it out. You can just include a commented out…
jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let Dom = <a href="javascript:;">按钮</a> 在html的范围内 若想使用js 则用 "{}" 将js代码括起来即可 例如: let url = "https://www.baidu.com" let…
什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2.增强js语意. 3.结构清晰. 4.抽象程度高,易于跨平台. 5.代码模块化. 如何使用jsx? var style={color:"red"}; var HolleWorld = React.createClass({ render: function() { return <p…
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在提,原来的开发中也会抽一些公共的模块出来.但是react带来的思想冲击是革命性的,套用一句可能不太合适的话来,描述:万事万物皆组件,在这种思想的影响下,不管什么框架都可以抽一些公共的模块出来,应该秉持一种心态:任何代码都尽量不要重复写两遍,如果存在那么就可以考虑封装起来作为组件.当然不是一味的提倡盲…
Reconciliation   React 的关键设计目标是使 API 看起来就像每一次有数据更新的时候,整个应用重新渲染了一样.这就极大地简化了应用的编写,但是同时使 React 易于驾驭,也是一个很大的挑战.这篇文章解释了我们如何使用强大的试探法来将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题. 动机(Motivation) 生成最少的将一颗树形结构转换成另一颗树形结构的操作,是一个复杂的,并且值得研究的问题.最优算法的复杂度是 O(n3),n 是树中节点的总数. 这意味着要展…
属性的含义和用法: 1.属性的含义. props=properties 属性:一个事物的性质和关系. 属性往往与生俱来,不可以修改. 2. 属性的用法. <Helloworld name=??? /> 这个name 可以是 变量 ,对象,数组,函数表达式的值. var props={ a:1, b:2 } <Helloworld {...props} /> 这样react就会自动遍历props对象并添加到属性中去. 状态的含义和用法: 1.状态的含义. state 状态:事物所处的…