1. Jsx语法

在html中属性的值通过双引号(字符串数据)或者大括号(表达式)

//双引号const a = ![](1.jpg)//大括号const x = "1.jpg"const a = <img src={x} />//有子元素的情况,都只能包含在同一个元素内,与vue语法保持一致const a = (    <div>        <h1>标题</h1>
        <span>gogogo</span>    </div>)

注意:react对于jsx中的变量都会进行转义,以免xss攻击

2. 渲染DOM

通过reactDOM.render方法来渲染dom节点,并且react元素一旦创建就是不可变的,唯一的办法就是重新创建个新的元素然后重新通过ReacDOM.render去渲染,就是这么cool!??????。但是每次更新,不是统一将整个元素都更新,都只会修改更新了的元素

function tick(){
  const ele = (    <div>
        <h1>现在的时间是:{new Date().toLocaleTimeString()}</h1>    </div>
  );
  ReactDOM.render(
    ele,
    document.getElementById('root')
  )}setInterval(tick,1000);

网友评论