Comments (2)
Hi Elie,
You made some excellent points !
When the application state gets big, does a single change in the application cause all GUI to rerender? If so, isn't that a bit of a waste? And if not, how does the app know which specific parts to update?
It's important to understand that XAML does not behave like React Virtual DOM. For example, a Listbox is completely re-rendered each time we set the ItemsSource, even if we use the same collection. It's totally understandable. The Listbox can't make the assumption to re-render or not only based on the reference of the ItemsSource since most of the IEnumerable implementations are mutable. The same goes for bindings and DataContext. Because of this, we need to be more cautious with XAML performance when the application state get bigger.
So, how to only update the parts that need to be re-rendered efficiently with a single state ? The key lies in immutability. Since we have an immutable state composed with immutable objects, a component need to be rerender only when some parts of the application state changed. We need to stop the flow of state observable before modifying the XAML. Reactive Extensions DistinctUntilChanged method can be used to do that :
App.Store
.DistinctUntilChanged(state => new { state.Todos, state.Filter })
.Subscribe(state => TodosItemsControl.ItemsSource = GetFilteredTodos(state));
You can find a more detailed explanation here : https://github.com/GuillaumeSalles/redux.NET#performance-optimization
Also, with lists of items, if we have an array of items and we add an item to the array, would a list box showing those items have to completely rerender?
If XAML virtualization is not enough, we need to set an the ItemSource with an ObservableCollection and patch it instead of replace it when needed. React virtual DOM patches the real DOM in a similar fashion. More info : https://facebook.github.io/react/docs/reconciliation.html#list-wise-diff. It would be nice to release helpers to do this kind of patch with Redux.
It would also lose things such as internal state as to which item was selected, right?
Exactly. But it would not be a problem with the patch solution. Without the patch solution, I think an extension method on Selector that set the previous SelectedItem after replacing the ItemsSource could do the job.
There is another pitfall with Selector #16
Hope I answered your questions.
from redux.net.
Thank you very much for the detailed response.
On 2 January 2016 at 02:39, Guillaume Salles [email protected]
wrote:
Hi Elie,
You made some excellent points !
When the application state gets big, does a single change in the
application cause all GUI to rerender? If so, isn't that a bit of a waste?
And if not, how does the app know which specific parts to update?It's important to understand that XAML does not behave like React Virtual
DOM. For example, a Listbox is completely re-rendered each time we set the
ItemsSource, even if we use the same collection. It's totally
understandable. The Listbox can't make the assumption to re-render or not
only based on the reference of the ItemsSource since most of the
IEnumerable implementations are mutable. The same goes for bindings and
DataContext. Because of this, we need to be more cautious with XAML
performance when the application state get bigger.So, how to only update the parts that need to be re-rendered efficiently
with a single state ? The key lies in immutability. Since we have an
immutable state composed with immutable objects, a component need to be
rerender only when some parts of the application state changed. We need to
stop the flow of state observable before modifying the XAML. Reactive
Extensions DistinctUntilChanged method can be used to do that :App.Store .DistinctUntilChanged(state => new { state.Todos, state.Filter }) .Subscribe(state => TodosItemsControl.ItemsSource = GetFilteredTodos(state));
You can find a more detailed explanation here :
https://github.com/GuillaumeSalles/redux.NET#performance-optimizationAlso, with lists of items, if we have an array of items and we add an item
to the array, would a list box showing those items have to completely
rerender?If XAML virtualization is not enough, we need to set an the ItemSource
with an ObservableCollection and patch it instead of replace it when
needed. React virtual DOM patches the real DOM in a similar fashion. More
info :
https://facebook.github.io/react/docs/reconciliation.html#list-wise-diff.
It would be nice to release helpers to do this kind of patch with Redux.It would also lose things such as internal state as to which item was
selected, right?Exactly. But it would not be a problem with the patch solution. Without
the patch solution, I think an extension method on Selector that set the
previous SelectedItem after replacing the ItemsSource could do the job.There is another pitfall with Selector #16
#16Hope I answered your questions.
—
Reply to this email directly or view it on GitHub
#29 (comment)
.
from redux.net.
Related Issues (20)
- Make compatible with .NET Standard HOT 4
- Observable collection that keeps suitable items HOT 3
- Saga HOT 23
- Is the return value from Store.Dispatch useful for anything? HOT 13
- What is the point of this Redux.NET line HOT 3
- [Question] Any plans for state persistence? HOT 1
- Future of Redux.NET / version 3.0 HOT 29
- Create store bug HOT 9
- Refactor GetState() to State (property) HOT 2
- Make InnerDispatch protected virtual
- New ActionDispatched event would duplicate StateChanged HOT 11
- Won't compile in Xamarin HOT 2
- Question about Dispatching Actions. HOT 3
- What's the status of this project? HOT 19
- WPF Dev Tools don't work
- C#.NET Windows Applications. HOT 8
- Is this Dead project & no longer being maintenance? HOT 2
- Could not link assemblies HOT 1
- The call is ambiguous between the following methods or properties: 'System.ObservableExtensions.Subscribe<T>(System.IObservable<T>, System.Action<T>)' and 'System.ObservableExtensions.Subscribe<T>(System.IObservable<T>, System.Action<T>)' HOT 1
- Nuget Package should be marked deprecated.
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 redux.net.