react这两种写法有区别么

<div id="example"></div>
   
    <script type="text/babel">
        ReactDOM.render(
      <div className="ss" >Hello, world!</div>,example
    );
    </script>
    <div id="example"></div>
   
    <script type="text/babel">
        ReactDOM.render(
      <div className="ss" >Hello, world!</div>,document.getElementById('example')
    );
    </script>
阅读 3k
3 个回答

有些老式浏览器,可以只用用id访问dom元素(假如:<div id="example"></div>),现在流行的浏览器有些不能这样调用。

ID的方式,你用这个浏览器可以用,不代表其他浏览器可以用,不代表这个浏览器以后可以用。

为了兼容性,最好是乖乖的用 document.getElementById('example'),这个已经是标准的一部分了,无论过去、还是未来,只要还存在浏览器这种载体,估计永远都可以使用。

测试了一下,大部分情况下,结果都是一样的
如果特殊的页面,对,就是这个问题页面:https://segmentfault.com/q/1010000007533523,写了两个 ID=icon4weChat 的div。
在控制台输入:icon4weChat,很多浏览器结果就不一样了:

IE9/IE11/Safari/Chrome/(Oprea假如还算):

icon4weChat[0] == document.getElementById('icon4weChat')

FireFox:

icon4weChat == document.getElementById('icon4weChat')

第一个不能识别example节点吧

本质上,ReactDOM.render()的第二个参数必须是一个DOM,如何获取这个DOM可以通过浏览器提供的DOM API,也可以是直接用id的名字,但是不推荐第二种方式

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题