/
githubmirror
/
preact
Обзор
Документация
Войти
/
githubmirror
/
preact
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
demo/profiler.jsx
88 строк
2 KB
Jiawen Geng
feat: migrate demo to vite
08 май 2023, 12:49
08 май 2023, 12:49
e4f3522
Код
Авторство
О чём код?
import { createElement, Component, options } from 'preact'; function getPrimes(max) { let sieve = [], i, j, primes = []; for (i = 2; i <= max; ++i) { if (!sieve[i]) { // i has not been marked -- it is prime primes.push(i); for (j = i << 1; j <= max; j += i) { sieve[j] = true; } } } return primes.join(''); } function Foo(props) { return <div>{props.children}</div>; } function Bar() { getPrimes(10000); return ( <div> <span>...yet another component</span> </div> ); } function PrimeNumber(props) { // Slow down rendering of this component getPrimes(10); return ( <div> <span>I'm a slow component</span> <br /> {props.children} </div> ); } export default class ProfilerDemo extends Component { constructor() { super(); this.onClick = this.onClick.bind(this); this.state = { counter: 0 }; } componentDidMount() { options._diff = vnode => (vnode.startTime = performance.now()); options.diffed = vnode => (vnode.endTime = performance.now()); } componentWillUnmount() { delete options._diff; delete options.diffed; } onClick() { this.setState(prev => ({ counter: ++prev.counter })); } render() { return ( <div class="foo"> <h1>⚛ Preact</h1> <p> <b>Devtools Profiler integration 🕒</b> </p> <Foo> <PrimeNumber> <Foo>I'm a fast component</Foo> <Bar /> </PrimeNumber> </Foo> <Foo>I'm the fastest component 🎉</Foo> <span>Counter: {this.state.counter}</span> <br /> <br /> <button onClick={this.onClick}>Force re-render</button> </div> ); } }