preact的异步渲染

最新推荐文章于 2023-08-24 08:59:33 发布

weixin_34013044

最新推荐文章于 2023-08-24 08:59:33 发布

阅读量197

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011655633

版权

preact的性能听说是很快，这在于一个作弊机制，它需要更多时间才走完官方React 或 anu的任务。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">   
    
    <script type='text/javascript' src="./test/preact.js"></script>
 
     <script type='text/javascript' src="./lib/babel.js"></script>
  
</head>
<body>
    
        <div>开发者工具</div>
        <pre>
            
        </pre>
        <div id='example'></div>
    
      
  <script type='text/babel'>
   /** @jsx preact.h */
     
      var container = document.getElementById("example")
      var div = container
      if(window.preact){
          window.React = window.preact
      }
     // var PropTypes = React.PropTypes
      if(!window.ReactDOM){
        window.ReactDOM = window.React
      }
      var PropTypes = React.PropTypes
      var expect = function(a) {
          return {
              toBe: function(b) {
                  console.log(a, b, a === b)
              }
          }
      }
      var s 
      class A extends React.Component{
        constructor(props){
            super(props)
            s = this
            this.state = {
                a: 111
            }
        }
        componentDidMount(){
              console.log("did mount");
        }
        componentDidUpdate(){
              console.log("did update");
        }
        render(){
            return <span>{this.state.a}</span>;
        }
      }
       ReactDOM.render(<A />, div)
       console.log(div.innerHTML)
      s.setState({a: 666})
      console.log(div.innerHTML)
      setTimeout(function(){
          console.log(div.innerHTML)
      },0)
    </script>
  
</body>
    
 </html>

注意，preact的对于组件虚拟DOM不会返回组件实例，需要hack一下。输出如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">       
    <script type='text/javascript' src="./dist/React.js"></script>
    <script type='text/javascript' src="./lib/babel.js"></script>
  
</head>
<body>
    
        <div>开发者工具</div>
        <pre>
            
        </pre>
        <div id='example'></div>
    
      
  <script type='text/babel'>
  
     
      var container = document.getElementById("example")
      var div = container
      if(window.preact){
          window.React = window.preact
      }
     // var PropTypes = React.PropTypes
      if(!window.ReactDOM){
        window.ReactDOM = window.React
      }
      var PropTypes = React.PropTypes
      var expect = function(a) {
          return {
              toBe: function(b) {
                  console.log(a, b, a === b)
              }
          }
      }
      class A extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                a: 111
            }
        }
        componentDidMount(){
              console.log("did mount", div.innerHTML);
        }
        componentDidUpdate(){
              console.log("did update", div.innerHTML);
        }
        render(){
            return <span>{this.state.a}</span>;
        }
      }
      var s = ReactDOM.render(<A />, div)
      console.log(div.innerHTML)
      s.setState({a: 666})
      console.log(div.innerHTML)
      setTimeout(function(){
          console.log(div.innerHTML)
      },0)
    </script>
  
</body>
    
 </html>

weixin_34013044

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
preact的异步渲染

preact的性能听说是很快，这在于一个作弊机制，它需要更多时间才走完官方React或 anu的任务。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" conten...
复制链接

扫一扫