Comments (4)
Hi @fbove, customApplyProps
is not called unless the props change.
Could you explain what is your use case exactly so I can think understand it? In most scenarios it makes no sense to re-apply props (potentially costly operation) if they didn't change.
from react-pixi-fiber.
The example is:
import React from 'react'
import PropTypes from 'prop-types'
import Graphics from './Graphics'
class Arrows extends React.Component {
findNode = nodeId => this.props.nodes.find(node => node.id === nodeId)
computedArrows = () =>
this.props.arrows.map(arrow => ({
from: this.findNode(arrow.from),
to: this.findNode(arrow.to)
}))
render() {
// re-render here is ok (1)
const arrows = this.computedArrows().map(arrow => (
<Graphics
key={`${arrow.from.id}-${arrow.to.id}`}
from={arrow.from}
to={arrow.to}
/>
))
return arrows
}
}
Arrows.propTypes = {
nodes: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired,
w: PropTypes.number.isRequired,
h: PropTypes.number.isRequired
})
),
arrows: PropTypes.arrayOf(
PropTypes.shape({
from: PropTypes.string.isRequired,
to: PropTypes.string.isRequired
})
)
}
export default Arrows
import { CustomPIXIComponent } from 'react-pixi-fiber'
import * as PIXI from 'pixi.js'
const TYPE = 'Arrow'
export const behavior = {
customDisplayObject: () => new PIXI.Graphics(),
customApplyProps(instance, oldProps, newProps) {
// Here I read "from" and "to" from newProps and create lines.
// but this is not called
this.applyDisplayObjectProps(oldProps, newProps)
}
}
export default CustomPIXIComponent(behavior, TYPE)
Arrows is receiving updated props and re-rendering (1), but CustomPIXIComponent it's not. And it does have new props to show.
A workaround was to reset arrows on the state, inside the Component where I'm using Arrows.
this.setState({ arrows: [] })
this.setState({
arrows: [...arrowsResp.arrows]
})
It'd probably be some React behavior I'm not aware of.
from react-pixi-fiber.
Do I understand correctly that you mean that the props are not applied the first time the CustomPIXIComponent
object is created? If yes, then this is intended behaviour. You have customDisplayObject
method for instantiation, where you can also apply any props you like.
customDisplayObject: () => new PIXI.Graphics(),
is the easiest implementation, you could do something like this instead:
customDisplayObject: (props) => {
const g = new PIXI.Graphics()
// apply props to g here
// ...
return g
},
customApplyProps
is then only called on subsequent renders. applyDisplayObjectProps
is only a hook for your custom component that calls default, react-pixi-fiber
function for applying props to components, as customApplyProps
is bypassing default behaviour.
from react-pixi-fiber.
Closing as I think the above is the correct way to solve this. Let me know if not.
from react-pixi-fiber.
Related Issues (20)
- Performance comparison with react-pixi? HOT 1
- TypeError: Cannot read properties of null (reading 'stencil') at ContextSystem.push../node_modules/@pixi/core/dist/esm/core.js.ContextSystem.validateContext (core.js:5206) HOT 4
- NPM installation of library react-pixi-fiber@[email protected] throws error HOT 4
- 1.0.0-beta.13 missing index.es.js HOT 12
- Error: Vite(esbuild) unable to find matching export in PIXI.js HOT 14
- Attempting to compile an app with PixiJS 5.3.11 or 6.2.2 and the latest beta 15 result in an error. HOT 1
- Is this project dead? HOT 2
- Webpack complains about missing exports in pixi.js HOT 3
- Could not resolve dependency: peer react@"^17.0.2" from [email protected] HOT 3
- Stage is not compatible with the React's StrictMode HOT 5
- Pointer Events don't fire at all HOT 2
- Upgrade reconciler
- Text components style property is not correctly typed HOT 2
- Issue on running demo HOT 1
- rightupoutside event may not be supported? HOT 2
- Can't use with new versions of PixiJS HOT 6
- export 'extras' (imported as 'PIXI') was not found in 'pixi.js' HOT 3
- Explicit "createStageClass" usage causes crash HOT 1
- Breaking changes in React experimental branch
- TypeError dispatcher.useSyncExternalStore is not a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pixi-fiber.