&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！React入门：关于JSX语法 - 推酷
React入门：关于JSX语法
JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。
React.render(
&div&content&/div&
document.getElementById('example')
//不使用JSX
React.render(
React.createElement('div', null,
React.createElement('div', null,
React.createElement('div', null, 'content')
document.getElementById('example')
那么也就是说，我们写一个XML标签，实质上就是在调用 React.createElement 这个方法，并返回一个 ReactElement 对象。
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。
React JSX将类似XML的语法转化到原生的JavaScript，元素的标签、属性和子元素都会被当作参数传给 React.createElement 方法：
var app = &Nav color=&blue& /&;
#native JS
var app = React.createElement(Nav, {color:&blue&});
要把带有JSX语法的代码转化为纯Javascript代码，有多种方式，对于内联与HTML中的代码或者是未经过转化的外部文件，在 script 标签中要加上 type=&text/jsx& ，并引入 JSXTransformer.js 文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用 npm 全局安装 react-tools ：
npm install -g react-tools
并使用命令行工具转化即可（具体用法可以参考 jsx -h ）：
jsx src/ build/
如果使用自动化工具，比如 gulp 的话，可以使用相应插件 gulp-react 。
HTML 标签 vs. React 组件
React.render方法可以渲染HTML结构，也可以渲染React组件。
渲染HTML标签，声明变量采用 首字母小写
var myDivElement = &div className=&foo& /&;
React.render(myDivElement, document.body);
渲染React组件，声明变量采用 首字母大写
var MyComponent = React.createClass({/*...*/});
var myElement = &MyComponent someProperty={true} /&;
React.render(myElement, document.body);
React 的 JSX 使用大写和小写字母来区分本地的组件类和 HTML 标签.
不过需要注意的是 class 和 for 这两个属性，JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样，用 className 和 htmlFor 。
React.render(
&label className=&xxx& htmlFor=&input&&content&/label&,
document.getElementById('example')
//不使用JSX
React.render(
React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
document.getElementById('example')
还有一点是，在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加 data- 前缀。
&div data-custom-attribute=&foo& /&
命名空间式组件
比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：
var Form = MyFormC
var App = (
&Form.Row&
&Form.Label /&
&Form.Input /&
&/Form.Row&
这样你只需将子组件的 ReactClass 作为其父组件的属性：
var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });
而创建子元素可以直接交给JSX转化器：
var App = (
React.createElement(Form, null,
React.createElement(Form.Row, null,
React.createElement(Form.Label, null),
React.createElement(Form.Input, null)
该功能需要0.11及以上版本
Javascript表达式
在JSX语法中写Javascript表达式只需要用 {} 即可，比如下面这个使用三目运算符的例子：
JSX是HTML和JavaScript混写的语法，当遇到 & ，JSX就当HTML解析，遇到 { 就当JavaScript解析。
// Input (JSX):
var content = &Container&{window.isLoggedIn ? &Nav /& : &Login /&}&/Container&;
// Output (JS):
var content = React.createElement(
Container,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
属性表达式
React.render(
&div className={2 & 1 ? 'class-a' : 'class-b'}&content&/div&,
document.body
var Nav = React.createClass({
render: function () {
return &div&nav&/div&
React.render(
{2 & 1 ? &Nav/& : &div&div&/div&}
document.body
不过要注意的是，JSX语法只是语法糖，它的背后是调用 ReactElement 的构造方法 React.createElement 的，所以类似这样的写法是不可以的：
// This JSX:
&div id={if (condition) { 'msg' }}&Hello World!&/div&
// Is transformed to this JS:
React.createElement(&div&, {id: if (condition) { 'msg' }}, &Hello World!&);
可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：
if (condition) &div id='msg'&Hello World!&/div&
else &div&Hello World!&/div&
传播属性（Spread Attributes）
如果提前就知道了组件的属性的话，写起来很容易。例如component组件有两个动态的属性foo和bar：
var component = &Component foo={x} bar={y} /&;
而实际上，有些属性可能是后续添加的，我们没办法一开始就确定，我们可能会写出下面不好的代码：
var component = &Component /&;
component.props.foo = // bad
component.props.bar = // also bad
这样写是错误的，因为我们手动直接添加的属性React后续没办法检查到属性类型错误，也就是说，当我们手动添加的属性发生类型错误时，在控制台是看不到错误信息的。
在React的设定中，初始化完props后，props是不可变的。改变props会引起无法想象的后果。
为了解决这个问题，React引入了属性延伸
var props = {};
props.foo =
props.bar =
var component = &Component {...props} /&;
var props = { foo: x, bar: y };
var component = &Component { ...props } /&;
这样就相当于：
var component = &Component foo={x} bar={y} /&
当需要拓展我们的属性的时候，定义个一个属性对象，并通过
的方式引入，在JSX中，可以使用 ... 运算符，表示将一个对象的键值对与 ReactElement 的 props 属性合并，这个 ... 运算符的实现类似于ES6 Array中的 ... 运算符的特性。，React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的，不是手动添赋值的属性。
它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
var props = { foo: 'default' };
var component = &Component {...props} foo={'override'} /&;
console.log(component.props.foo); // 'override'
在React中写行内样式时，要这样写，不能采用引号的书写方式
React.render(
&div style={{color:'red'}}&
document.body
比如我们有一些内容是用户输入的富文本，从后台取到数据后展示在页面上，希望展示相应的样式
var content='&strong&content&/strong&';
React.render(
&div&{content}&/div&,
document.body
结果页面直接输出内容了：
&strong&content&/strong&
React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以这么写：
var content='&strong&content&/strong&';
React.render(
&div dangerouslySetInnerHTML={{__html: content}}&&/div&,
document.body
参考资料（可能无法直接打开链接）
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致怎样用webstorm11 使用react 支持jsx语法_百度知道随笔 - 151, 文章 - 0, 评论 - 77, 引用 - 0
前置技能：Chrome浏览器
一.拿糖：React的使用
React v0.14 RC 发布，主要更新项目：
&两个包: React 和 React DOM
&DOM node refs
&无状态的功能组件
&弃用 react-tools
&编译器优化
吃糖：开门见山，上代码。
&!DOCTYPE html&
&title&zqz_JSX_demo&/title&
&script type="text/javascript" src="../lib/react-0.13.4.js"&&/script&
&!-- &script type="text/javascript" src="../lib/react-0.14.0.js"&&/script& --&
&script type="text/javascript" src="../lib/JSXTransformer.js"&&/script&
&div id="example"&&/div&
&script type="text/jsx"&
React.render(
&h1&Hello World!&/h1&,
document.getElementById("example"),
function(){
console.log("OK!")
react-0.13.4.js 使用：浏览器控制台显示没问题：
如果换成react-0.14.0.j的话，控制台显示：
页面上虽然可以显示，但是会有提示：React.render是被废弃的。建议使用react-dom.js中的ReactDOM.render来代替。
so,我们就用react-dom.js来弄。
&!DOCTYPE html&
&title&zqz_JSX_demo&/title&
&!-- &script type="text/javascript" src="../lib/react-0.13.4.js"&&/script& --&
&script type="text/javascript" src="../lib/react-0.14.0.js"&&/script&
&script type="text/javascript" src="../lib/react-dom-0.14.0.js"&&/script&
&script type="text/javascript" src="../lib/JSXTransformer.js"&&/script&
&div id="example"&&/div&
&script type="text/jsx"&
ReactDOM.render(
&h1&Hello World!&/h1&,
document.getElementById("example"),
function(){
console.log("OK!")
这下控制台清净了。
JSXTransformer.js：他的作用是将 JSX 语法转为 JavaScript 语法。以便浏览器可以执行。但是这部比较消耗时间，一般放在服务器端执行。（具体怎么耗时间，是个什么概念，我还不知道）
当然我们可以不用JSX,React本来就是JS。
那什么是JSX：在 JavaScript 代码里写着 XML 格式的代码称为 JSX。
所以上面的代码亦可以改成：
&script type="text/javascript"&
ReactDOM.render(React.createElement(
"Hello World!"
), document.getElementById("example"), function () {
console.log("OK!");
记得将text/jsx改成text/javascript。
所以很多人说JSX的实质是个语法糖。
三.拆糖：如何将JSX转换成JS代码。
&1.我们可以通过工具转换成JS代码。
&2.安装react-tools转换工具
& &&npm install -g react-tools
& & 运行：
生成build文件，如图：
如果不知道怎么使用这个工具：jsx -h
第一行就是使用格式：Usage:&jsx&[options]&&source&directory&&&output&directory&&[&module&ID&&[&module&ID&&...]]一看就懂的ReactJs入门教程（精华版）
招聘信息：
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJS的风采吧~~ 章有点长，耐心读完，你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。ReactJS官网地址：Github地址：二、对ReactJS的认识及ReactJS的优点首先，对于React，有一些认识误区，这里先总结一下：React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。1、ReactJS的背景和原理在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化，而只需要根据数据刷新整个页面。换句话说，任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。借用Facebook介绍React的视频中聊天应用的例子，当一条新的消息过来时，传统开发的思路如上图，你的开发过程需要知道哪条数据过来了，如何将新的DOM结点添加到当前DOM树上；而基于React的开发思路如下图，你永远只需要关心数据整体，两次数据之间的UI如何变化，则完全交给框架去做。可以看到，使用React大大降低了逻辑复杂性，意味着开发难度降低，可能产生Bug的机会也更少。2、组件化虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。例如，Facebook的整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件，大家有兴趣可以看下它背后的代码。如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。React认为一个组件应该具有如下特征：（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；三、下载ReactJS，编写Hello，worldReactJs下载非常简单，为了方便大家下载，这里再一次给出下载地址（）,下载完成后，我么看到的是一个压缩包。解压后，我们新建一个html文件，引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):这里大家可能会奇怪，为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/jsx" 。 其次，React 提供两个库： react.js 和 JSXTransformer.js ，它们必须首先加载。其中，JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。到这里我们就可以开始编写代码了，首先我们先来认识一下ReactJs里面的React.render方法：React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。下面我们在script标签里面编写代码，来输出Hello，world，代码如下：这里需要注意的是，react并不依赖jQuery，当然我们可以使用jQuery，但是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。然后，在浏览器打开这个页面，就可以看到浏览器显示一个大大的Hello，world,因为我们用了标签。到这里，恭喜，你已经步入了ReactJS的大门~~下面，让我们来进一步学习ReactJs吧~~四、Jsx语法HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写，了解过AngularJs的看到下面的代码一定会感觉很熟悉的，我们来看代码：这里我们声明了一个names数组，然后遍历在前面加上Hello,输出到DOM中，输出结果如下：JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员，代码如下：显示结果如下：这里的星号只是做标识用的，大家不要被迷惑了~~你看到这里，说明你对React还是蛮感兴趣的，恭喜你，坚持下来了，那么下面，我们开始学习React里面的"真功夫"了~~ Are　you ready?五、ReactJS组件1、组件属性前面说了，ReactJS是基于组件化的开发，下面我们开始来学习ReactJS里面的组件，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：1）获取属性的值用的是this.props.属性名2）创建的组件名称首字母必须大写。3）为元素添加css的class时，要用className。4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。2、组件状态组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。效果如下：原理分析：当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。这里值得注意的几点如下：1）getInitialState函数必须有返回值，可以是NULL或者一个对象。2）访问state的方法是this.state.属性名。3）变量用{}包裹，不需要再加双引号。3、组件的生命周期组件的生命周期分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOMReact 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()此外，React 还提供两种特殊状态的处理函数。componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用下面来看一个例子：上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。4、组件的嵌套React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用，下面我们来看看React中到底是如何实现组件的复用的，这里我们还写一个例子来说吧，代码如下：这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属性searchType传入值，最终显示结果如图：六、ReactJS小结关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。3、为组件添加外部css样式时，类名应该写成className而不是添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。4、组件名称首字母必须大写。5、变量名用{}包裹，且不能加双引号。七、参考资料&
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量3990点击量3767点击量3083点击量2740点击量2676点击量2612点击量2596点击量2533点击量2349
&2016 Chukong Technologies,Inc.
京公网安备89