Permalink
Browse files

Avoid creating a new Path instance for performance

Summary:
New a Path instance will cause a slice call to exist path.

```js
// react-native/Libraries/ART/ARTSerializablePath.js
if (path instanceof SerializablePath) {
  this.path = path.path.slice(0);
}
```

Most of d3's APIs can set context when we don't want to use d3's build-in path object. And in RN envirenment, we must use RN's path instance. So we can use RN's path as a context in d3 avoiding doing conversions from svg's path string to arrays. But with existing code, when Shape receive a `d` proprety, it new a path instance and will cause calling slice in a very large array.

Typical usage is as follows

```js
import React from 'react';
import { View, ART } from 'react-native';
import { line } from 'd3-shape';
import { scaleLinear } from 'd3-scale';

const { Path, Surface, Shape } = ART;
const width = 360;
const height = 300;
const data = [5,2,7,6,9,1,8,4,3];
const x = scaleLinear().range([0, width]).domain([0, data.length]);
const y = scaleLinear().range([height, 0]).domain([0, 9]);
const myline = line()
    .x(function(d, i) {
      return x(i);
    })
    .y(function(d) { return y(d); });

// use RN's ART Path
const path = Path();
myline.context(path)(data);

class TestArt extends React.Component {
  render() {
    return (
      <View>
        <Surface width={width} height={height}>
          <Shape
            stroke="red"
            d={
              // use RN's ART Path
              path
              // use d3's path
              // myline(data)
            }
          />
        </Surface>
      </View>
    );
  }
}
```
Closes #14551

Differential Revision: D5398653

Pulled By: javache

fbshipit-source-id: 1264acfb8844b60584604a664e0474f9e212d1d1
  • Loading branch information...
jetzhliu authored and facebook-github-bot committed Jul 11, 2017
1 parent 5f14088 commit 6b29fe78c4dac4c3cd5b9cb08b2de670dfdba30b
Showing with 3 additions and 2 deletions.
  1. +3 −2 Libraries/ART/ReactNativeART.js
@@ -392,7 +392,7 @@ class Shape extends React.Component {
render() {
var props = this.props;
var path = props.d || childrenAsString(props.children);
var d = new Path(path).toJSON();
var d = (path instanceof Path ? path : new Path(path)).toJSON();
return (
<NativeShape
fill={extractBrush(props.fill, props)}
@@ -486,7 +486,8 @@ function extractAlignment(alignment) {
class Text extends React.Component {
render() {
var props = this.props;
var textPath = props.path ? new Path(props.path).toJSON() : null;
var path = props.path;
var textPath = path ? (path instanceof Path ? path : new Path(path)).toJSON() : null;
var textFrame = extractFontAndLines(
props.font,
childrenAsString(props.children)

0 comments on commit 6b29fe7

Please sign in to comment.