技术控

    今日:105| 主题:49390
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] react学习系列之深入jsx

[复制链接]
长高好吗 发表于 2016-10-2 15:17:51
56 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
JSX是一种    javascript语法扩展(也就是语法糖),类似于    XML,一般用    babel编译成    javascript  
  Why JSX?

          React里可以使用原生的      javascript,但是      React官方推荐使用      JSX,使用      JSX,组件的结构和组件之间的关系看上去更加清晰。   
    前端界面的最基本功能在于展现数据,为此大多数框架都使用了模板引擎
    模板可以直观的定义UI来展现Model中的数据,你不必手动的去拼出一个很长的HTML字符串,几乎每种框架都有自己的模板引擎。传统MVC框架强调界面展示逻辑和业务逻辑的分离,因此为了应对复杂的展示逻辑需求,这些模板引擎几乎都不可避免的需要发展成一门独立的语言,如上面代码所示,每个框架都有自己的模板语言语法。而这无疑增加了框架的门槛和复杂度。
          React直接放弃了模板而发明了      JSX。看上去很像模板语言,但其本质是通过代码来构建界面,这使得我们不再需要掌握一门新的语言就可以直观的去定义用户界面:掌握了      javascript就已经掌握了      JSX。   
          JSX完美利用了      javascript自带的语法和特性,我们只要记住HTML只是代码创建DOM的一种语法形式,就很容易理解      JSX。而这种使用代码构建界面的方式,完全消除了业务逻辑和界面元素之间的隔阂,让代码更加直观和易于维护。   
    Transform

  1. var Nav, Profile;
  2. // Input (JSX):
  3. var app = <Nav color="blue"><Profile>click</Profile></Nav>;
  4. // Output (JS):
  5. var app = React.createElement(
  6.   Nav,
  7.   {color:"blue"},
  8.   React.createElement(Profile, null, "click")
  9. );
复制代码
   也就是说,我们写一个XML标签,实质上就是在调用      React.createElement这个方法,并返回一个      ReactElement对象。   
    扩展:      React.createElement用法   
   
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )
复制代码
通过上面的代码可以看出    JSX的优势,XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读  
  HTML Tags vs. React Components

          React.render方法可以渲染HTML结构,也可以渲染React组件。   
    渲染HTML标签,声明变量采用      首字母小写   
   
  1. var myDivElement = <div className="foo" />;
  2. ReactDOM.render(myDivElement, document.getElementById('example'));
复制代码
渲染React组件,声明变量采用    首字母大写  
  1. var MyComponent = React.createClass({/*...*/});
  2. var myElement = <MyComponent someProperty={true} />;
  3. ReactDOM.render(myElement, document.getElementById('example'));
复制代码
语法

      JSX的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。    JSX允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员:  
  1. var arr = [
  2.   <h1>Hello world!</h1>,
  3.   <h2>React is awesome</h2>,
  4. ];
  5. React.render(
  6.   <div>{arr}</div>,
  7.   document.getElementById('example')
  8. );
复制代码
Attribute Expressions

  1. // Input (JSX):
  2. var person = <Person name={window.isLoggedIn ? window.name : ''} />;
  3. // Output (JS):
  4. var person = React.createElement(
  5.   Person,
  6.   {name: window.isLoggedIn ? window.name : ''}
  7. );
复制代码
Child Expressions

  1. // Input (JSX):
  2. var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
  3. // Output (JS):
  4. var content = React.createElement(
  5.   Container,
  6.   null,
  7.   window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
  8. );
复制代码
Boolean Attributes

  1. // These two are equivalent in JSX for disabling a button
  2. <input type="button" disabled />;
  3. <input type="button" disabled={true} />;
  4. // And these two are equivalent in JSX for not disabling a button
  5. <input type="button" />;
  6. <input type="button" disabled={false} />;
复制代码
注释

  JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。
  1. var content = (
  2.   <Nav>
  3.     {/* 一般注释, 用 {} 包围 */}
  4.     <Person
  5.       /* 多
  6.          行
  7.          注释 */
  8.       name={window.isLoggedIn ? window.name : ''} // 行尾注释
  9.     />
  10.   </Nav>
  11. );
复制代码
由于JSX只是一种语法,因此JavaScript的关键字class, for等也不能出现在XML中,而要使用className, htmlFor代替,这和原生DOM在JavaScript中的创建也是一致的。
  Spread Attributes

  如果你事先知道组件需要的全部 Props(属性),JSX 很容易地这样写:
  1. var component = <Component foo={x} bar={y} />;
复制代码
如果你不知道要设置哪些 Props,那么现在最好不要设置它:
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )0
复制代码
这样是反模式,因为 React 不能帮你检查属性类型(propTypes)。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
    Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。
    可以用展开属性来写
   
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )1
复制代码
传入对象的属性会被复制到组件内。
  它能被多次使用,也可以和其它属性一起用。注意顺序很重要,后面的会覆盖掉前面的。
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )2
复制代码
JSX 陷阱

  JSX 与 HTML 非常相似,但是有些关键区别要注意。
  内联样式

  在React中写行内样式时,要这样写,不能采用引号的书写方式
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )3
复制代码
HTML 实体

    React默认会进行HTML的转义,避免XSS攻击   
    有多种绕过的方法。最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。
   
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )4
复制代码
安全的做法是先找到 实体的 Unicode 编号 ,然后在 JavaScript 字符串里使用。
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )5
复制代码
还可以直接使用原生的HTML,但可以看出不推荐这种做法
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )6
复制代码
自定义 HTML 属性

  如果往原生 HTML 元素里传入 HTML 规范里不存在的属性,React 不会显示它们。如果需要使用自定义属性,要加 data- 前缀。
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )7
复制代码
以 aria- 开头的 [网络无障碍] 属性可以正常使用。
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )8
复制代码
TIPS

  三元运算符代替IF...ELSE

  在JSX中是不可以直接在{}中加入if-else的,可以使用下面这种三元表达式:
  1. ReactElement createElement(
  2.   string/ReactClass type,
  3.   [object props],
  4.   [children ...]
  5. )9
复制代码
在三元运算符满足不了的时候,React建议的方式是在JS代码中使用if表达式
  1. var myDivElement = <div className="foo" />;
  2. ReactDOM.render(myDivElement, document.getElementById('example'));0
复制代码
Switch-Case

  1. var myDivElement = <div className="foo" />;
  2. ReactDOM.render(myDivElement, document.getElementById('example'));1
复制代码
False in JSX

  1. var myDivElement = <div className="foo" />;
  2. ReactDOM.render(myDivElement, document.getElementById('example'));2
复制代码
渲染出 id="false"
  1. var myDivElement = <div className="foo" />;
  2. ReactDOM.render(myDivElement, document.getElementById('example'));3
复制代码
渲染出字符串"false"作为input的value
  1. var myDivElement = <div className="foo" />;
  2. ReactDOM.render(myDivElement, document.getElementById('example'));4
复制代码
渲染出无子元素
  命名空间式组件

    用法如下
    命名空间式组件允许你使用一个父组件,而其他的子组件是他的属性
   
  1. var myDivElement = <div className="foo" />;
  2. ReactDOM.render(myDivElement, document.getElementById('example'));5
复制代码
   注意点如下:      React.js的命名空间的组件   
    只在0.11及以上版本可用
友荐云推荐




上一篇:图表君聊Docker-images
下一篇:PyCon China 深圳站精彩回顾(附PPT及视频)
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

yh7jt 发表于 2016-10-3 02:39:48
长高好吗是我最崇拜的人!
回复 支持 反对

使用道具 举报

werf 发表于 2016-10-9 02:48:53
nO Zuo nO Die
回复 支持 反对

使用道具 举报

让记忆冬眠 发表于 2016-10-9 06:32:53
钻石恒久远,一颗就破产.
回复 支持 反对

使用道具 举报

迟锋豹 发表于 2016-10-9 21:15:16
楼主你想太多了!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表