Comments (6)
Ok, I worked one solution to my issue, which was to simply clone my child component, update it's props with show = false and it worked! However I'm quite new to react and to me it seems like a quite costly procedure, unless it's a lot more expensive to remove and apply new spans on the fly?
from react-reveal-text.
This probably has something to do with the fact that shouldComponentUpdate()
always returns false if the show
prop hasn't changed. That means that the spans (and their styles) are not being reapplied when you change your text.
It may be a good idea to allow users to opt-in to this optimization. I welcome any PRs for this.
from react-reveal-text.
Okok! So If I just remove that condition, should the component then update with the new spans? And of curiosity, would it be more performant to update a components children(i,e the new spans) than unmounting and rendering a new component?
from react-reveal-text.
Try the new version 0.1.1
. I made additional checks under shouldComponentUpdate
.
from react-reveal-text.
Tried it yesterday and It made my code much simpler, but both my old and new solution with your updated code is making my project hurt in chrome due to a huge composite layer / paint call. I did notice however when running my project in firefox, it runs super smooth!
Other than that, amazing job with this component!
from react-reveal-text.
Yeah unfortunately, there's no other way to do this (without using SVG or Canvas). DOM element updates are necessary to apply the spans and that tends to be expensive.
from react-reveal-text.
Related Issues (3)
- Improve README HOT 1
- Height is collapsed until render 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-reveal-text.