React-JSX

react-JSX

这种在js里面写标签的语法叫JSX。所谓的JSX其实就是JS的对象。JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。

JSX原理

总结:要记住几个点:

  1. JSX是JS语言的一种语法扩展,长得像HTML,但并不是HTML.
  2. React.js可以用JSX来描述你的组件长什么样的。
  3. JSX在编译的时候会变成相应的JS对象描述。
  4. react-dom负责把这个用来描述UI信息的JS对象变成DOM元素并渲染到页面上。

注意:只要你要写React.js组件,就必须在react包中引入React 、React.js组件父类Component

1、从JSX到页面到底经历了什么?

2、为什么不直接从 JSX 直接渲染构造 DOM 结构,而是要经过中间这么一层呢?

原因有:
1、当我们拿到一个表示UI的结构和信息的对象后,不一定会把元素渲染到浏览器的普通页面上,有可能吧这个结构渲染到canvas上,或者手机APP上。
2、有这样一个对象,当数据变化,需要更新组件的时候,就可以用比较快的算法操作这个JS对象,而不用直接操作页面上的DOM,这样他可以尽量少的减少浏览器重排,极大地优化性能。

3、组件的render方法

React.js中一切皆组件,用React.js写就是写组件。我们在编写React.js组件的时候,一般都需要继承React.js的Component。一个组件类必须要实现一个render方法,这个render方法必须返回一个JSX元素。但是要注意的是,必须要用一个外层的JSX元素把所用内容包裹起来。返回并列多个JSX元素是不合法的。

由于forclass是JS中的关键字,所以React.js中定义了一种的新的方式:classNamehtmlFor来代替class、for

noscript 元素用来定义在脚本未被执行时的替代内容(文本)。此标签可被用于可识别<script>标签但无法支持其中的脚本的浏览器

提示和注释

注释:如果浏览器支持脚本,那么它不会显示出noscript元素中的文本。
!!!无法识别<script>标签的浏览器会把标签的内容显示到页面上,为了避免浏览器这么做,应当在注释标签中隐藏脚本,老式的(无法识别<script>标签的)浏览器会忽略注释,这样就不会把标签的内容写到页面上,新式的浏览器则懂得执行这些脚本,即使他们被包围在注释标签中!
(通俗的理解就是如果不支持脚本的浏览器太老了,页面不会有任何关于noscript的提示消息,比如IE9以下,只有浏览器比较新,不支持了,就会在页面展示不支持的文本提醒)

猜你喜欢

转载自blog.csdn.net/Ultraman_and_monster/article/details/81023241