Skip to content

Improved Efficiency, componentWillUpdate, Debug

Pre-release
Pre-release
Compare
Choose a tag to compare
@CMEONE CMEONE released this 17 Mar 21:01
· 11 commits to main since this release

In this release, we improved the efficiency of the component diffing and updating algorithm. To see the speed at which tApp updates the DOM after a setState, set tApp.debugComponentTiming to true to see the number in milliseconds in the console or set it to a function taking one parameter to perform an action on the result. Be sure not to use this action to update a component, or you will create an infinite loop. For best results, just use normal DOM manipulation methods to display this number to the screen.

An example of the component timing can be seen on /example/components.html. As shown, updating multiple components, each with multiple subelements, can be done in 10-50ms, which is decent timing for a lightweight library such as tApp.

We also added a componentWillUpdate method into each component, allowing it to take an action before it is updated. For template-based or unpreserved components, we recommend that you destroy all the children (so that they are not uselessly stored in memory):

componentWillUpdate() {
    while(this.children.length > 0) {
        this.children[0].destroy();
    }
}