React 系列四|React render VS 原生js渲染

Posted 2021-04-26 学习之露

这是React系列四，这节写一下react render和原生的渲染区别

React render

 
   
   
 

  
    
    
  
let count = 0;
  
    
    
  
function App() {
  
    
    
  
 return (
  
    
    
  
 <div className="App">
  
    
    
  
 <h1>React rendering</h1>
  
    
    
  
 <div>
  
    
    
  
 React
  
    
    
  
 rendering只会重新渲染变换的DOM，没有变换的DOM不会重绘，所以我没有重绘
  
    
    
  
 </div>
  
    
    
  
 <div>我重绘了{count}</div>
  
    
    
  
 </div>
  
    
    
  
 );
  
    
    
  
}
  
    
    
  


  
    
    
  
const rootElement = document.getElementById("root");
  
    
    
  
setInterval(() => {
  
    
    
  
 ReactDOM.render(<App />, rootElement);
  
    
    
  
 count++;
  
    
    
  
}, 1000);
 
   
   
 

在线demo：https://codesandbox.io/s/2z3n4l54yr 效果图如下：

原生JS渲染

 
   
   
 

  
    
    
  
let count = 0;
  
    
    
  
let template = document.getElementById("template").innerhtml;
  
    
    
  
setInterval(() => {
  
    
    
  
 Mustache.parse(template);
  
    
    
  
 let rendered = Mustache.render(template, { count: count++ });
  
    
    
  
 document.getElementById("root").innerHTML = rendered;
  
    
    
  
}, 1000);
 
   
   
 

在线demo：https://codesandbox.io/s/kyplp589o

效果图如下：

总结，react只会重绘变化的节点，原生JS会全部重绘所有节点。所以react的这种方式会大大提高效率。