react jsx grammar rules

First create react compiler environment installed yarn

npm install -g yarn

Created by scaffolding projects are as follows

yarn create react-app react-learn

Running the Project

yarn start

 

What is the JSX

• Facebook drafted JS extended syntax
• Is essentially a JS object will be compiled babel will eventually be converted to React.createElement
• Each JSX expression, there is one and only one root node will eventually be converted only to create a virtual dom object React.createElement
  • React.Fragment <> </> the same effects as the default parent tag
• Each element must JSX end (XML specification)
• Note: element object react not binding events are not created dom Barbara

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

   

JSX embedded in the expression

• In JSX comment in the comment using js / * * /
• The expression as part of the content

  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 display them not to be used in the string {}
  • Ordinary objects, not as a child  
  • React element objects may be placed
• The expression as an element property
• Properties Use small hump nomenclature

• 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'));

   

• Prevent injection attacks

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

   
  • Automatic coding
  • dom dangerouslySetInnerHTML forced to parse the string to an object in the form of objects written expression {{__html: context}}

Immutability elements

• Although JSX element is an object, but all the properties of the object can not be changed
• If you do need to change the properties of the elements, the elements need to be recreated JSX

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

  Re-render consumption performance is not quite react because the operation is not a dom element object is actually quite high efficiency re-render just change the content without changing dom