Comments (8)
其实并不需要这么比喻,直接说具体问题也许更加容易懂。
你 setState 之后肯定会重新 render,但是有 option 并没有变化,所以图形上感觉不到区别。你可以尝试加一些动画试试看。
from echarts-for-react.
@hustcc thank you. 对,我知道图没有变化,但是实际上echart 做了render这个动作。我的目标是不让echart做render。
一个图感觉不明显,如果页面有20几个的话,页面就会hang住。。。。。
现在我的做法是写了一个shouldupdate来判断数据,想看看有没有其它办法。
因为感觉react并没有控制echart.init出来的那个div里的canvas
from echarts-for-react.
我理解的你的意思了,如果按照我这里组件代码:
componentDidUpdate() {
this.renderEchartDom();
this.bindEvents(this.getEchartsInstance(), this.props.onEvents || []);
},
只有 componentDidUpdate 的时候才会触发重新渲染,我来测试一下,如果外部组件 state 变化,但是ReactEcharts 的属性不变化的情况下,看会不会触发图表渲染。
from echarts-for-react.
https://medium.com/@arikmaor/react-redux-performance-tuning-tips-cef1a6c50759#.f9uq92zhu
按照这个文章说的,react首先生成virtual dom,然后比较前后两个virtual dom.
我觉得react就认为
from echarts-for-react.
<div><canvas></canvas></div>
from echarts-for-react.
我加入 30 个 charts,每秒刷一次,确实有卡顿的感觉。
如果我这边添加 shouldupdate 来判断传入的属性是不是有更新,其实也需要对 option 等很多的属性进行deep equal 比较,应该也是比较消耗的。
from echarts-for-react.
额,sorry,我不是想让你加判断。因为其实大家用这个一般也会在外面包一层,然后添加自己的业务逻辑。大家可以自己处理shouldUpdata.
我想知道怎么能不让echart在数据明明没有变化的时候不render canvas。
就是option没变化,echart还是做了canvas的重绘,这个其实是比较重的一个操作,从chrome的性能分析工具上来看。
from echarts-for-react.
那估计得 echarts 来解决了。这个估计有点难了。
from echarts-for-react.
Related Issues (20)
- DOMException: Failed to execute 'drawImage' 'CanvasRenderingContext2D: The 1mage argument is canvas element with a width or height of 0.
- percentage `name (undefined%)` when series data is empty `series.data:[ ]` HOT 1
- Allow setting `id` and `data-testid` HOT 1
- Feature Request: RTL support
- Project status HOT 3
- Not support @typescript-eslint/parser 6.x
- 主题theme似乎不生效?
- react 5.1 增加了resize动画的功能,echarts-for-react v3.0.2 应该如何调用? HOT 1
- Typing does not support charts v5.4.3
- How to override the readonly style for position relative? HOT 2
- I can not append Data while Zooming
- Table Component
- 动态切换主题
- How to connect several charts on chart load? HOT 2
- How to update datasets on zoom event? HOT 2
- [bug] : Inconsistent Zoom Functionality with ECharts: Seeking Guidance on Mouse Scroll and Button Control Integration
- Tree branch once opened does not retract back on closing it HOT 1
- How to rewrite this example with echarts-for-react
- add type to EChartsOption
- Update Required type Opts ( and add support for SSR) HOT 2
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 echarts-for-react.