深入了解react中JSX 的用法和常遇到的坑！

什么是JSX

• Facebook起草的JS扩展语法

• 本质是一个JS对象，会被babel编译，最终会被转换为React.createElement

• 每个JSX表达式，有且仅有一个根节点

  • React.Fragment

  • //如果不需要根节点可以用
    <React.Fragment>
    	//这里包含html
    </React.Fragment>
    
    //其实 React.Fragment  相当于,两者都不会在页面中生成标签
    <>
     //这里放html 
    </>
    

• 每个JSX元素必须结束（XML规范）也可以自结束

在JSX中嵌入表达式

• 嵌入表达式

  let a = 11, b = 39;
  const div = (
    <div>
      {a} * {b} = {a * b}
    </div>
  );
  ReactDOM.render(div,document.getElementById('root')
  );
  
  //上面的div 相当于
  const div = React.createElement('div',{},`${a} * ${b} = ${a * b}`);
  

• 在JSX中使用注释

  {/* 注释 */}
  

• 将表达式作为内容的一部分

  • null、undefined、false不会显示

    {null} 
    {undefined}
    {false}
    //这种在jsx 中是不会显示的
    

  • 普通对象，不可以作为子元素

    let obj = { a : "a"， b : "b"}
    
    在jsx 中{obj} 是会报错的 
    

  • 可以放置React元素对象

    let obj = (<span>这也是react 对象</span>);
    
    {obj} 能渲染
    

• 将表达式作为元素属性

  //给元素设置class  为className 
  const src = "地址";
  //使用 style 时 必须是一个对象 
  const styleList = {
      margin : 10px
  }
  const div = {
  	<p className ="pView"></p>
      <img src={src} className = "imgView" style = {{margin:10px}}>
  }
  

• 属性使用小驼峰命名法

• 防止注入攻击

  • 自动编码

    const view = "<p>ddd</p><h1>egwgeg</h1>";
    let div = (
      <div>
        {view}
      </div>
    )
    //如果想要这种直接插入到页面中 react 为了安全起见，是像innerText的做法一样，是文本输出的，
    //也是为了防止注入攻击
    
    //如果数据不会对页面造成危险，可以使用下面的方法
    

  • dangerouslySetInnerHTML

    const view = "<p>ddd</p><h1>egwgeg</h1>";
    let div = (
      <div dangerouslySetInnerHTML={{
        __html : view
      }}>
      </div>
    )
    

元素的不可变性

• 虽然JSX元素是一个对象，但是该对象中的所有属性不可更改

  //在jsx元素对象中的属性是不可修改的，只能读
  //在底层是通过
  Object.freeze(jsx对象);
  

• 如果确实需要更改元素的属性，需要重新创建JSX元素

let num = 0;
setInterval(() => {
    num ++;
    const div = (
    <div>{num}</div>
    );
    ReactDOM.render(div, document.getElementById('root')
    );
}, 1000);

由于不能操作元素对对象的属性，只能通过跟换数据就重新的渲染。react 这种定时的渲染并不会消耗性能，因为他并不是生成Dom 对象，而是生成的react 的虚拟Dom 的对象, 这种对新能的消耗是极低的，可以忽略不计。在react 内部做了优化。