JSX本质
jsx本质就是下面这个函数React.createElement的语法糖,所有的jsx语法都会最终经过babel.js转化成为React.createElement这个函数的函数调用
React.createElement(component,props,…children)函数
参数1:type
type表示当前element的类型
如果是HTML标签,直接写字符串类型的标签名即可,如’div’,‘span’,'a’等
如果是组件元素,直接写组件名称即可,如App,Loading
参数2:config
config以对象键值对的形式表示当前element的属性,如css属性,元素内置属性等等
参数3:children
children表示存储在元素中的内容,以children数组的方式进行存储
一.基本概念
React 使用 JSX 来替代常规的JavaScript。
JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。
JSX 语法的本质:并不是直接把 JSX 渲染到页面上,而是内部先转换成了 createElement 形式,再渲染的。
二.JSX语法的优点
- JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化;
- 它是类型安全的,在编译过程中就能发现错误;
- 使用 JSX 编写模板更加简单快速。
三.JSX语法规范
-
定义虚拟DOM时不要用引号
let VDOM = <h1>hello world</h1>
-
标签混入JS表达式需要用{ }
let str = "hello world!"; let VDOM = ( <h1>{str}</h1> )
-
className样式的类名
javascript: <h1 class='script'></h1> jsx: let VDOM = ( <h1 className='react'>hello world</h1> )
-
内联样式用style={{}}
<span style={{height:'20px',width:'50px',color:'red'}}></span>
-
只有一个根标签
<div id='root'></div> // 定义虚拟dom const VDOM =( <div> <p className="sname">张三</p> </div> ) ReactDOM.render(VDOM, document.getElementById('root'));
-
标签必须闭合
javascript: <input type="text" name="" value=""/> jsx: <input type="text" name="" value=""></input>
-
标签首字母
1.若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。 html标签:<body></body>,<div></div> 报错:<res></res> 2.若大写字母开头,react就去渲染对应组件,若组件没有定义,则报错。 import Login from './component/login' 组件:<Login /> 报错:<Store /> //组件未定义