Geek Answers Handbook

Responding to spontaneous memory

I am trying to create a game for a mobile pool in React Native, 0.17, to gain experience and problems with garbage collection. Right now I have ten circles that are simultaneously displayed that bounce around the screen. However, the memory consumption for the application increases over time, and I do not know how to solve this problem.

It seems like this was a React Native problem in earlier versions, and I notice that it crashes in time as shown in the graph here, but in a much larger application, I am worried that this might be a problem. Has anyone else had similar problems or had solutions?

The relevant code is here and any help is much appreciated. Thanks!

var Test = React.createClass ({

getInitialState: function() { var circs = []; for (var i = 0; i < startCount; i++) { circs.push({ id: i, x: 0, y: 0, vx: 2 + Math.random() * 2, vy: 2 + Math.random() * 2, dx: 0, dy: 0, cOb: new Animated.ValueXY({x: 0, y: 0}), }); } return { circles: circs, stop: 1 }; }, stopCircle: function() { this.state.stop = -1 * this.state.stop; this.setState(this.state); }, componentDidMount: function() { this.animateCircles(); }, animateCircles: function() { this.triggerAnimation(this.animateCircles); }, triggerAnimation: function(ani) { for (var i = 0; i < this.state.circles.length; i++) { var cCircle = this.state.circles[i]; if (cCircle.x * cCircle.x + cCircle.y * cCircle.y > DIST_TO_EDGE * DIST_TO_EDGE) { var prevX = cCircle.x - cCircle.vx; var prevY = cCircle.y - cCircle.vy; var exitX = (1.5 * prevX + .5 * cCircle.x) / 2; var exitY = (1.5 * prevY + .5 * cCircle.y) / 2; cCircle.x = prevX; cCircle.y = prevY; var exitRad = Math.sqrt(exitX * exitX + exitY * exitY); exitX = exitX * DIST_TO_EDGE / exitRad; exitY = exitY * DIST_TO_EDGE / exitRad; var twiceProjFactor = 2 * (exitX * cCircle.vx + exitY * cCircle.vy) / (DIST_TO_EDGE * DIST_TO_EDGE); cCircle.vx = cCircle.vx - twiceProjFactor * exitX; cCircle.vy = cCircle.vy - twiceProjFactor * exitY; break; } } if (this.state.stop == 1) { for (var k = 0; k < this.state.circles.length; k++) { this.state.circles[k].x += this.state.circles[k].vx; this.state.circles[k].y += this.state.circles[k].vy; } } this.setState(this.state); var animateC = []; for (var i = 0; i < this.state.circles.length; i++) { var currCirc = this.state.circles[i]; animateC.push( Animated.timing(currCirc.cOb, { ...TIMING_CONFIG, toValue: {x: currCirc.x, y: currCirc.y} })); } Animated.parallel( animateC ).start(ani); }, getStyle: function(which) { return [ styles.circle, {transform: this.state.circles[which].cOb.getTranslateTransform()} ]; }, render: function() { return ( <View style={styles.container}> <View style={styles.edge}> </View> { this.state.circles.map(function(c, i) { return ( <TouchableWithoutFeedback key={i} onPress={this.stopCircle}> <Animated.View style={this.getStyle(i)} /> </TouchableWithoutFeedback> ); }, this) } </View> ); },

The full application can be found at https://github.com/heliumsoule/React-Native-Pool if you want to run the application for yourself.

Thanks again.

+6
source share
2 answers

You have many temporary variables, both prime numbers and objects. I'm not quite sure if this often hits or if the animation spans multiple frames. If every frame, I would suggest that you just do a ton of distributions. They grow over time and cause small pauses when the garbage collector starts.

To reduce the number of distributions, you can convert temporary vars to instance variables that can be reused.

I'm not familiar enough with the animation APIs to find out if there are any optimizations there.

0
source

You have two virtual machines that perform garbage collection on their own terms. JVM and JavaScript.

This article can help you:

http://moduscreate.com/dynamic-memory-and-v8-with-javascript/

In addition, I suggest you comment on as much code as possible and see the effect on memory. Then comment a bit at a time and see what code that causes memory consumption to grow the fastest.

0
source

More articles:


All Articles