Fatal编程技术网
  • javascript/
  • Javascript ReactDOM.render与React组件渲染差异

Javascript ReactDOM.render与React组件渲染差异

javascript html reactjs

Javascript ReactDOM.render与React组件渲染差异,javascript,html,reactjs,Javascript,Html,Reactjs,我已经开始学习了。render（）方法在两个位置使用： 使用ReactDOM.render（） ReactDOM.render（< 测试/>， document.getElementById（'react-application'） ); 另一个是扩展组件的类内部 类测试扩展了React.Component{ render（）{ 报税表（< div>你好 ) } } 这两种渲染方法之间的确切区别是什么？中有两种独立的render（）方法。一个是ReactDOM.render（），另一个是Co

我已经开始学习了。render（）方法在两个位置使用：

  • 使用ReactDOM.render（）
    • ReactDOM.render（<
测试/>，
document.getElementById（'react-application'）
);
  • 另一个是扩展组件的类内部
    • 类测试扩展了React.Component{
render（）{
报税表（<
div>你好
    ) } }
    这两种渲染方法之间的确切区别是什么？

    中有两种独立的
    render（）
    方法。一个是
    ReactDOM.render（）
    ，另一个是
    Component.render（）

    Component.render（）

    组件的
    render（）<当道具或组件的状态更改并且
    shouldComponentUpdate（）
    返回true时，将调用code>Component.render（）。基于新的props和state，从
    Component.render（）
    方法返回一个新元素React元素树
    
ReactDOM.render（）
    
render（element，container）
    方法是一个顶级API，它将元素树的React元素根和容器DOM元素作为参数。然后，它将传递的React元素转换为相应的DOM元素（树），然后将该元素作为子元素装载到容器DOM元素中

    不过，在将任何DOM元素装载到容器之前，React会在传递的元素树和当前装载的DOM之间执行差异，以确定当前装载的DOM中的哪些DOM节点必须更新，以便与新传递的元素树相匹配

    阅读有关ReactDOM.render（）的详细信息。

    TLDR:

    React在将虚拟DOM添加（装载）到实际的浏览器DOM中之前创建虚拟DOM，然后再显示。两个方法中的一个只执行第一个操作，另一个同时执行两个操作

    component.render
    仅创建虚拟DOM。它不会将其添加到实际的浏览器DOM中

    ReactDOM.render
    同时执行这两项操作。它创建（或更新）虚拟DOM，然后将其添加到实际的浏览器DOM中

    ReactDOM.render
    与组件的渲染方法无关<代码>ReactDOM.render将组件渲染到DOM，而组件的渲染返回组成组件的元素。