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>