mirror of
https://github.com/status-im/react-native.git
synced 2025-02-15 10:57:00 +00:00
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 https://github.com/facebook/react-native/pull/14551 Differential Revision: D5398653 Pulled By: javache fbshipit-source-id: 1264acfb8844b60584604a664e0474f9e212d1d1
This commit is contained in:
parent
5f1408858a
commit
6b29fe78c4
@ -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)
|
||||
|
Loading…
x
Reference in New Issue
Block a user