JSX简介和语法

JSX语法

JSX简介

在使用React开发想的时候建议使用JSX语法

由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展（超集），它里面的标签申明要符合XML规范要求。

因为浏览器不能识别JSX，可以使用babel进行转换，能让浏览器识别
babel网站：https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=DwVwNgfAUABDxgJYQIwCYDMwD0To_AiA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.23.5&externalPlugins=&assumptions=%7B%7D

Recat不一定使用JSX语法，但是它有一下优点

• JSX 执行更快，因为它在编译为JavaScript代码后进行了优化
• 它是类型安全的，在编译过程中就能发现错误
• 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
• jsx语法中一定要有一个顶级元素包裹，否则编译报错，程序不能运行

JSX语法

JSX表达式

在jsx语法中，要把JS代码写到{ }中，所有标签必须要闭合。

let num = 100
let bool = false;

// JSX 语法
var myh1 = (
  <div>
    {
    
    /* 我是注释 */}
    {
    
    num}
    <hr />
	{
    
    /* 三目运算 */}
	{
    
    true ? "条件为真" : "条件为假"}
  </div>
)

注意：vue中是双括号，但是在JSX中是单括号

属性绑定动态值

const title = '你好世界';
// 一定要会使用它，这样用法在工作中天天用
<button title={
    
    title}>按钮</button>

<style>
	/* class 是es6定义类的关键词，在jsx中不能使用，只能通过 className来调用定义好的样式类 */
	.btn{
    
    color:red;}
</style>
// classclassName一定要牢记，因为在工作，写样式就要用到
// for  htmlFor
<button className="btn">按钮</button>
// jsx中绑定样式 style 只绑定对象
<div style={
    
     {
    
    color: 'red'} }></div>

// 动态显示html元素  dangerouslySetInnerHTML 可以进行对html标签进行反转义
// 在react17中jsx可以直接解析html，但是对于转义后的html还不会自动转义，需要使用它
const html = 你好 &copy;世界

// 不转义html元素输出 {两个下划线html:html}
<div dangerouslySetInnerHTML={
    
     {
    
    __html:html} }></div>

JSX渲染数组列表

<script type="text/babel">
  let arr = ["张三","李四","王五","赵六"];
  let app = document.getElementById('app');
  ReactDOM.render(
<div>
  {
    
    /* jsx中如果是一维数组，直接写上就可以遍历渲染了 */}
      {
    
     arr }  
    </div>,
    app
  );
</script>

jsx渲染数组列表并处理

<script type="text/babel">
  let nameList = ['张三', '李四', '王五'];
  ReactDOM.render(
    <div>
      {
    
     
	nameList.map((item,index) => <h3>{
    
    item}</h3>);  
    </div>,
    document.getElementById('app')
  );
</script>

React比较灵活，js还是很重要的，要熟练掌控js