react jsx 语法规则

首先创建react编译环境  安装yarn

npm install -g yarn

通过脚手架创建项目如下

yarn create react-app react-learn

运行项目

yarn start

什么是JSX

• Facebook起草的JS扩展语法
• 本质是一个JS对象，会被babel编译，最终会被转换为React.createElement
• 每个JSX表达式，有且仅有一个根节点   最终会被转换为React.createElement只会创建一个虚拟dom对象
  • React.Fragment  <> </>  一样的效果  默认父级标签
• 每个JSX元素必须结束（XML规范）
• 注意： react创建的元素对象不可以绑定事件  不是真真的dom

• <li>9</li>
  <img src="" />
  //必须要有结束  XML规范

在JSX中嵌入表达式

• 在JSX中使用注释   使用js注释 /* */
• 将表达式作为内容的一部分

  import React from 'react';
  import ReactDOM from 'react-dom';
  // import './index.css';
  
  const a = 123, b = 234;
  //这是一个react元素对象
  const span = <span>nihao</span>
  //这是一个普通对象
  const obj = {
      name:'taotao'
  };
  const arr = [2,3,4];
  
  // var li = (
  //     <div    >
  //         <li>9</li><li></li><li></li><li></li>
  //     </div>
  // );
  // var li = (
  //     <div    >
  //         {a} + {b}  = {a + b};
  //     </div>
  // );
  //arr 数组可以作为表达式写入  会遍历数组每一位
  //react元素对象也可以
  //普通对象不行 无法解析 
  var li = (
      <div>
         {arr} ---{span} ---{obj}
      </div>
  );
  //底层实现如下
  // var li = React.createElement('li', {},`${a} + ${b} = ${a + b}`);
  console.log(li)
  ReactDOM.render(li, document.getElementById('root'));
  
  
  

  • null、undefined、false不会显示  显示它们{ } 中要使用字符串
  • 普通对象，不可以作为子元素  
  • 可以放置React元素对象
• 将表达式作为元素属性
• 属性使用小驼峰命名法

• const number = new Array(30);
  number.fill(9);
  const list = number.map((ele,index) => {
      //对于属性的名字使用小驼峰式法则  规则如下
      return <li  style={{color:"white",
      width:"100px",
      height:"20px",
      background:'black'}} className="ooo" key={index}>{ele}-- {index}</li>
  })
  ReactDOM.render(list, document.getElementById('root'));

• 防止注入攻击

• const context = "<div>123</div>";
  //当创建的react变量中字符串含有html标签时 会将其解析为innerHtml文本 而不是标签
  // 如果真的要插入标签要用一下格式 添加属性要以对象格式   将会被强制解析为dom结构
  const list = (
      <div dangerouslySetInnerHTML={{
          __html:context
      }}>
  
      </div>
  )
  ReactDOM.render(list, document.getElementById('root'));

   
  • 自动编码
  • dangerouslySetInnerHTML  强制解析字符串为dom  要以对象形式   对象写入表达式{ {    __html:context   } }

元素的不可变性

• 虽然JSX元素是一个对象，但是该对象中的所有属性不可更改
• 如果确实需要更改元素的属性，需要重新创建JSX元素

• let list = 3;
  setInterval(() => {
   list++;
  const div = (
      <div>{list}</div>
  );
  
  // 会报错 该对象中的所有属性不可更改 相当于将对象冻结
  // 如果要改变只能重新渲染
  ReactDOM.render(div, document.getElementById('root'));
  // console.log(div.props.children);
  },0)

  重新渲染并不是想象中的消耗性能 因为react操作的是元素对象 并非dom 实际上相当效率高 重新渲染只是改变内容 dom不改变