React入门教程(一)——JSX学习篇
来源:互联网 发布:美图特效软件 编辑:程序博客网 时间:2024/05/16 01:16
为什么要使用React?
——构建随着时间数据不断变化的大规模应用程序
开始学习
主要思想:
1.仅仅只要表达出你的应用程序在任一时间点应该长的样子,然后当底层的数据变了,Recat会自动处理所有用户界面的更新。类似于,用户点击刷新按钮,只更新变化的部分。
2.构建可用组件:通过 React 你唯一要做的事情就是构建组件。得益于其良好的封装性,组件使代码复用、测试和关注分离(separation of concerns)更加简单。
JSX基本语法
JSX 的基本语法规则:遇到 HTML 标签(以 <
开头),就用 HTML 规则解析;遇到代码块(以 {
开头);
使用JSX,组件的结构和组件之间的关系看上去更加清晰。
示例如下:
也就是说,我们写一个XML标签,实质上就是在调用React.createElement
这个方法,并返回一个ReactElement
对象。
createElement API说明:
这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。
JSX转化
JSX转化器
要把带有JSX语法的代码转化为纯Javascript代码,有多种方式,对于内联与HTML中的代码或者是未经过转化的外部文件,在script
标签中要加上type="text/jsx"
,并引入JSXTransformer.js
文件即可,不过这种方式并不建议在生产环境使用,建议的方法是在代码上线前就将代码转换好,可以使用npm
全局安装react-tools
:
HTML标签与React组件对比
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
(1)要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
例:varmyDivElement=<divclassName="foo"/>;
React.render(myDivElement,document.body);
(2)渲染组件
React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
varMyComponent=React.createClass({/*...*/});
varmyElement=<MyComponentsomeProperty={true}/>;
React.render(myElement,document.body);
注:
所有组件都必须有自己的render方法用于输出组件;组件名的第一个字母必须大写否则会报错。
不过需要注意的是class
和for
这两个属性,JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript DOM中一样,用className
和htmlFor
。
还有一点是,在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加data-
前缀。
(3)命名空间式组件
比如开发组件的时候,一个组件有多个子组件,你希望这些子组件可以作为其父组件的属性,那么可以像这样用:
这样你只需将子组件的ReactClass
作为其父组件的属性:
传播属性:
如果提前就知道了组件的属性的话,写起来很容易。例如component组件有两个动态的属性foo和bar:
延时属性:
相当于传播属性中的示例。
JSX陷阱
(1)style属性:
在React中写行内样式时,要这样写,不能采用引号的书写方式
(2)HTML转义
有一些内容是用户输入的富文本,从后台取到数据后展示在页面上,希望展示相应的样式
结果页面直接输出内容了:
React默认会进行HTML的转义,避免XSS攻击,如果要不转义,可以这么写:
参考资料:
http://www.css88.com/archives/5632
http://reactjs.cn/react/docs/getting-started.html
- React入门教程(一)——JSX学习篇
- React学习总结一 JSX
- React学习——JSX的使用
- React——JSX
- React学习之JSX语法讲解(一)
- 深刻理解 React (一) ——JSX和虚拟DOM
- React入门笔记(一) — 深入理解JSX
- React入门笔记(一) — 深入理解JSX
- react——JSX语法
- React学习 -- JSX
- react学习笔记 item2 --- JSX
- React Native 中的JSX学习
- React Native 学习 之JSX
- React学习之- (React-JSX-Style)
- 浅谈React的JSX语法(一)
- React高级指南(一)【JSX In Depth】
- <React: Up and Running>阅读笔记 — JSX
- React—JSX转换成标准的JavaScript
- wamp下php无法保存SESSION问题总汇
- 【整理】查看市场份额常用权威网站
- android:ListView的局部刷新
- 【bzoj 1606】 [Usaco2008 Dec]Hay For Sale 购买干草 01背包
- ISLR第五章重采样方法应用练习题
- React入门教程(一)——JSX学习篇
- 操作系统之PV操作
- 你可能不知道的ListView Recycler机制
- dubbo系列-Linux下zookeeper的安装
- 免费论文查重
- Java内存模型
- 关于网格部件选人实现勾选与自动同步选项功能构建
- SimpleDateFormat时间不正确的问题
- leetcode---Longest Substring Without Repeating Characters