React的JSX语法学习和常见的插值{}内容情况-1.React JSX概念

因为原生的javascript操作dom很是繁琐,几乎都需要先获取原始dom,在修改数据,在同步给innertext或是节点插入,删除等,如果节点少的话还好,但是如果需要多很多的话,那么节点就太多了不太方便
所以后面出来一个Jquery的JS第三方库,让我们不用为了获取一个标签写那么长的代码.
但是依然不满足现状,后来出现了Angular,react,vue等框架,把原生的js操作DOM更加简化了
JSX就是react的一种便于DOM操作的拓展语法
JSX===javascript+XML
说白了就是 在javascript的代码中插入了HTML标签

原生js修改div的内容

<div id="myDiv">原始内容</div>  
  
<script>  
// JavaScript代码,如上所示  
var myDiv = document.getElementById("myDiv");  
myDiv.innerText = "加油 不放弃";  
// 或者使用 myDiv.textContent = "加油 不放弃";  
</script>  

jsx方式

const msg="你好"//直接把  你好变为  "加油 不放弃"; 
//不用dom获取 这些都是框架做好的  能自动编译
const App = () => {
  return (
    <div>
      <h1>{msg}</h1>
    </div>
  );
}
上一篇:阿里新开源GPU版本的FunASR安装避坑


下一篇:2718. 查询后矩阵的和