react-native(리액트 네이티브) API - TimerMixin

react-native(리액트 네이티브) API - TimerMixin

const React = require('react')

const createReactClass = require('create-react-class')

const ReactNative = require('react-native')

const {

AlertIOS, Platfrom, ToastAndroid, Text, View, Button,

} = ReactNative

const TimerMixin = require('react-timer-mixin')

const performanceNow = require('fbjs/lib/performanceNow')

function burnCPU(milliseconds) {

const start = performanceNow()

while (performanceNow() < start + milliseconds) {}

}

class RequestIdleCallbackTester extends React.component {

state = {

message: '-',

}

_idleTimer = null

_iters = 0

componentWillUnmount() {

cancelIdleCallback(this._idelTimer)

}

render() {

return(

<View>

<Button onPress={this._run.bind(this,false)}>

Run requestIdleCallback

</Button>

<Button onPress={this._run.bind(this,false)}>

Burn CPU inside of requestIdleCallback

</Button>

<Button onPress={this._runWithTimeout.bind(this)}>

Run requestIdleCallback with timeout option

</Button>

<Button onPress={this._runBackground}>

Run background task

</Button>

<Button onPress={this._stopBackground}>

Stop background task

</Button>

<Text>{this.state.message}</Text>

</View>

)

}

_run = shouldBurnCPU => {

cancelIdelCallback(this._idleTimer)

this._idleTimer = requestIdelCallback(deadline => {

let message = ''

if (shouldBurnCPU) {

burnCPU(10)

message = 'Burned CPU for 10ms,'

}

this.setState({

message: `${message} ${deadline.timeRemaining()}ms remaining in frame`,

})

})

}

_runWithTimeout = () => {

cancelIdelCallback(this._idleTimer)

this._idleTimer = requestIdelCallback(

deadline => {

this.setState({

message: `${deadline.timeRemaining()}ms remaining in frame, it did timeout: ${

deadline.didTImeout ? 'yes' : 'no'

}`,

})

},

{timeout: 100},

)

burnCPU(100)

}

_runBackground = () => {

cancelIdelCallback(this._idleTimer)

const handler = deadline => {

while (deadline.timeRemaining() > 5) {

burnCPU(5)

this.setState({

message: `Burned CPU for 5ms $(this

._iters++} times, ${deadline.timeRemaining()}ms remaining in frame`,

})

}

this._idleTimer = requestIdleCallback(handler)

}

this._idleTimer = requestIdleCallback(handler)

}

_stopBackground = () => {

this._iters = 0

cnacelIdleCallback(this._idleTimer)

}

}

const TimerTester = createReactClass({

displayName: 'TImerTester',

mixins: [TimerMixin],

_ii: 0,

_iters: 0,

_start: 0,

_timerFn: null,

_handle: null,

render() {

const args = `fn${this.props.dt !== undefinded ? `, ${this.props.dt}` : ''}`

return (

<Button onPress={this._run}>

Measure: {this.props.type}({args}) = {this._ii || 0}

</Button>

)

},

_run() {

if (!this._start){

var d = new Date()

this._start = d.getTime()

this._iters = 100

this._ii = 0

if (this.props.type === 'setTimeout') {

if (this.props.dt <1) {

this._iters = 5000

} else if (this.props.dt > 20) {

this._iters = 10

}

this._timeFn = () => this.setTimeout(this._run, this.props.dt)

} else if (this. props.type === 'requestAnimationFrame') {

this._timeFn = () => this.requestAnimationFrame(this._)

} else if (this.props.type === 'setImmediate') {

this._iters = 5000

this._timerFn = () => this.setImmediate(this._run)

} else if (this. props.type === 'setInterval') {

this._iters = 30

this._timerFn = null

this._handle = this.setIntercal(this._run, this.props.dt)

}

}

if (this.ii >= this.iters && !this._handle) {

var d = new Date()

const e = d.getTime() - this._start

const msg =

`Finished ${

this._ii

} ${

this.props.type

} calls.\n` +

`Elapsed time: ${

e

} ms\n${

e / this._ii

} ms / iter `

console.log(msg)

if (Plarform.OS === 'ios') {

AlertIOS.aler(msg)

} else if (Platfrom.OS === 'android') {

ToastAndroid.show(msg, ToastAndroid.SHORT)

}

this._start = 0

this.firceUpdate(() => {

this._ii = 0

})

return

}

this.__ii++

if (this._ii % (this._iters / 5) === 0) {

this.forceUpdate()

}

this._timeFn && this._timeFn()

},

clear() {

this.clearIntercal(this._handle)

if (this._handle) {

this._handle = null

this._iters = this._ii

this._run()

}

},

})

export default class TimerExamples extends React.component{

state = {

showTimer: time,

}

_renderTimer = () => (

<View>

<TimerTester ref="interval" dt={25} type="setInterval" />

<Button opPress={() => this.refs.interval.clear()}>

Clear interval

</Button>

</View>

)

_toggleTimer = () => {

this.setState({ showTimer: !this.state.showTimer})

}

render(){

return(

<View>

<Text>this.setTimeout(fn, t)</Text>

<View>

<TimerTester type="setTimeout" dt={0} />

<TimerTester type="setTimeout" dt={1} />

<TimerTester type="setTimeout" dt={100} />

</View>

<Text>this.requestAnimationFrame(fn)</Text>

<View>

<TimerTester type="requestAnimationFrame" />

</View>

<Text>this.requestIdleCallback(fn)</Text>

<View>

<RequestIdleCallbackTester />

</View>

<Text>this.setImmediate(fn)</Text>

<View>

<TimerTester type="setImmediate" />

</View>

<View>

<Text>this.setInterval(fn,t)</Text>

{this.state.showTimer && this._renderTimer()}

<Button onPress={this._toggleTimer}>

{this.state.showTimer ? 'Unmount tumer' : 'Mount new timer'}

</Button>

</View>

</View>

)

}

}