preact的异步渲染

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>

preact的异步渲染

司徒正美

引用和评论

小程序通用转译框架娜娜奇1.0.4发布

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具