React 入门学习笔记整理(二)—— JSX简介与语法
程序员文章站
2024-01-24 10:31:10
先看下这段代码: 解析: 1、JSX全称JavaScript XML,在js中写XML标签,是javascript的一种扩展语法。JSX标签语法既不是字符串也不是 HTML,在编译之后,JSX 其实会被转化为普通的 JavaScript 对象,描述要显示的UI信息。 JSX的编译过程如图所示: 2、 ......
先看下这段代码:
import react from 'react'; //最终渲染需要调用reactdom库,将jsx渲染都页面中 import reactdom from 'react-dom'; import * as serviceworker from './serviceworker'; let h = <react.fragment> <h2>hello</h2> <ul></ul> </react.fragment> //把第一个参数的结构渲染到root标签中 reactdom.render(h, document.getelementbyid('root')); serviceworker.unregister();
解析:
1、jsx全称javascript xml,在js中写xml标签,是javascript的一种扩展语法。jsx标签语法既不是字符串也不是 html,在编译之后,jsx 其实会被转化为普通的 javascript 对象,描述要显示的ui信息。
jsx的编译过程如图所示:
2、jsx语法
1)jsx 可以当做值赋值给变量
let h =( <div> <h2>hello</h2> <span>react</span> </div> ); reactdom.render(h, document.getelementbyid('root'));
2)可以当做函数的返回值
function createh(){ return <react.fragment> <h2>hello</h2> <ul></ul> </react.fragment> } reactdom.render(createh(), document.getelementbyid('root'));
3)也可以存在数组中
let arr = [ <h2 key="111">hello</h2>, <ul key="222"></ul>, ] reactdom.render(arr, document.getelementbyid('root'));
数组中如果不写key,控制台将会输出如下警告信息:
4)jsx 当中使用 javascript 表达式,要包括在大括号里。在 jsx 代码的外面扩上一个小括号,这样可以防止 分号自动插入 的 bug。
function formatname(user) { return user.name + ' ' + user.date; } const user = { name:'kristy', date:'2018-12-18' }; let value = 'hello'; let h = ( <div> <h2>{value}</h2> <span>{formatname(user)}</span> </div> );
其他详细的介绍: