小白学习React官方文档看不懂怎么办？3.元素渲染

直接上代码

const element = <h1>Hello, world</h1>;

ReactDOM.render(

    element, 

    document.getElementById('root’)

);

声明了一个变量element,将JSX语法的h1标签赋值给它，然后React.render()是渲染方法，它可以将element添加到#root中

 

注意：

    1.根节点只能有一个

    2.根节点只能有一个

    3.根节点只能有一个

const element1=<div>

    <h1>Hello,World!</h1>

    <h2>Hello,Siri!</h2>

</div>

 

 

const element2=<h1>

    <small></small>

    <strong></strong>

</h1>

element1的跟节点是div，element2的根节点是h1，根节点只能有一个！！！

function tick() {

  const element = (

    <div>

      <h1>Hello, world!</h1>

      <h2>It is {new Date().toLocaleTimeString()}.</h2>

    </div>

  );

  ReactDOM.render(element, document.getElementById('root'));

}

 

 

setInterval(tick, 1000);//定时器

    上述代码中，最下面是一个定时器，每1000毫秒，tick执行一次，tick函数做的事情是：声明一个element变量，

在element中获取当前时间new Date()是获取当前时间戳，然后通过toLocalTimeString获取到当前“上午11:11:11”，再然后通过渲染方法ReactDOM.render()将element放到#root中。每1000毫秒获取新的时间放到#root中去。

    留心的同学可能会发现element赋值后面有一个括号，这个括号是为了方便，如果你不想写这个括号的话，那么你必须把代码写成这个样子

function tick() {

  const element = <div>

      <h1>Hello, world!</h1>

      <h2>It is {new Date().toLocaleTimeString()}.</h2>

    </div>;

  

  ReactDOM.render(element, document.getElementById('root'));

}

setInterval(tick, 1000);//定时器

    注意div被提前了一行，放到了等号后面，如果放到下一行，将出错。

    这时候有同学可能有疑问了，不是说const声明的变量不可被修改吗，为什么element重复声明？

    稍微解释一下：每次都声明一个新的element变量，新的element变量跟之前的没有关系，并不是修改，而是重新声明，比如：

const a=1;

!function() {

  const a=2; //这个a跟外界的a没有任何关系

}()

注：看不懂的话，请看我另一篇文章let与var与const；

 

注意：我们的React在这个过程中，实际是引入了一个虚拟DOM的一个概念。虽然我们每1000毫秒都将

    <div>

      <h1>Hello, world!</h1>

      <h2>It is {new Date().toLocaleTimeString()}.</h2>

    </div>

添加进#root中，但其实真正在操作dom之前，我们亲爱的React又做了一步工作，那就是通过伟大的Diff算法来计算我们要新加入的标签与之前页面中已经存在的页面都有哪些差距，然后只在dom上更新那一点点不同的位置即可。具体Diff算法是怎么工作的，对于现在的我们，还不需要了解那么多。