-
- +
+ Outil de Performance React
- Outil de Performance pour React -
- Nominé aux React Open Source Awards 2020 + 🏆 Nominé pour les React Open Source Awards 2020
-
+ Outil de Performance React
-
+
- Website -
+##Sur la page principale, vous disposez de deux choix principaux depuis le menu déroulant :
+ +- **Timejump** : Consultez et naviguez dans l’historique des snapshots de l’état de votre application. Vous pouvez revenir à n’importe quel point dans le temps pour observer l’évolution de l’état au fil des modifications. Vous pouvez également utiliser le bouton de lecture pour rejouer chaque changement d’état automatiquement. +- **Providers / Consumers** : Comprenez mieux les dépendances de contexte de votre application et leurs interactions grâce à une visualisation des relations entre fournisseurs et consommateurs. +
-
+
+
+
-
+
-
-
+2. **Processus de Build** -
-
React Performance Tool
-
+
- Website -
+##On the main page, there are two main selections from the dropdown panel:
-
-
+
+
+
-
+
+
- 
-
+ Инструмент для анализа производительности React
+
-
+
На главном экране доступны два основных выбора из выпадающего списка:
-Reactime - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state). -В настоящее время Reactime поддерживает React приложения с классовыми, функциональными компонентами, хуками и Context API. +- **Timejump**: Просматривайте и перемещайтесь по истории снимков состояния (snapshot) вашего приложения. Можно переместиться в любую точку во времени, чтобы увидеть, как состояние эволюционировало при изменениях. Также доступна кнопка воспроизведения, чтобы автоматически проиграть каждое изменение состояния. +- **Providers / Consumers**: Глубже понимайте зависимости контекста приложения и его взаимодействия, визуализируя отношения провайдеров и потребителей. +
+
+
+
+
+
+
- 
-
An instance of this class is the default export from routes.ts. It includes the logic that allows Reactime to work with target applications built with React Router. The addRoute method is invoked in linkFiber.ts within the sendSnapshot function. The navigate method is invoked in timeJump.ts immediately before invoking jump.
-A url string.
-Either the current route if the user has not navigated away from it or a new instance of a route constructed from the url.
-addRoute - Method to add a new route to the route history array. Also ensures that the routeHistory stack always matches the browser history stack.
This method will perform the following:
-A boolean indicating whether or not a new route was navigated to.
-Invokes history.go passing in the delta between the current route and the target route. https://developer.mozilla.org/en-US/docs/Web/API/History/go
-
+ 
+ 
- Private rebuildA url string.
-Rebuilds the browser history stack using the copy of the stack maintained in the routeHistory stack. https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState, https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
rebuildHistory
-This is the current snapshot that is being sent to the snapshots array. -Creates a Tree
-the current state of the component represented by this node.
-the name of the component represented by this node.
-an object containing the props of the component represented by this node.
-an array of child nodes.
-a reference to the parent node.
-a boolean value indicating whether the node is expanded in the UI.
-a unique identifier for the node.
-an object representing the route associated with the node.
-Optional routestring if root, serialized state otherwise
-name of child
-props
-??
-Action
-dispatch Executes actions that changes state in reactime
-handleOnkeyDown Executes key commands
-Displays tree showing two specific versions of tree: -one with specific state changes, the other the whole tree
-props from maincontainer
-a diff tree or a string stating no state changes have happened
-Calling this redux#ActionCreator with an argument will
-return a PayloadAction of type T with a payload of P
Calling this redux#ActionCreator will
-return a PayloadAction of type T with a payload of undefined
Calling this redux#ActionCreator will
-return a PayloadAction of type T with a payload of undefined
Calling this redux#ActionCreator will
-return a PayloadAction of type T with a payload of undefined
Calling this redux#ActionCreator with an argument will
-return a PayloadAction of type T with a payload of P
Calling this redux#ActionCreator with an argument will
-return a PayloadAction of type T with a payload of P
Calling this redux#ActionCreator will
-return a PayloadAction of type T with a payload of undefined
Calling this redux#ActionCreator with an argument will
-return a PayloadAction of type T with a payload of P
Calling this redux#ActionCreator with an argument will
-return a PayloadAction of type T with a payload of P
Calling this redux#ActionCreator will
-return a PayloadAction of type T with a payload of undefined
Calling this redux#ActionCreator with an argument will
-return a PayloadAction of type T with a payload of P
This is a recursive function that runs after Fiber commit, if user is navigating to a new route during jumping. This function performs the following logic:
-componentActionRecord arrayA Fiber object
-This is a function that runs after every Fiber commit using the following logic:
-A Fiber object
-An instance of a Tree object
-This function receives raw Data from REACT DEV TOOL and filter the Data based on the exclude list. The filterd data is then converted to string (if applicable) before being sent to reacTime front end. -NOTE: the formating is important since Chrome will only accept JSON.stringfiable object. Circular object & function are not JSON stringifiable.
-The data object obtained from React Devtool. Ex: memoizedProps, memoizedState
-The cached data from the current component. This can be data about states, context and/or props of the component.
-The update component data object to send to front end of ReactTime
-This function receive a string representation of a functional component. This function then use JSX parser to traverse through the function string, and extract the state variable name and its corresponding setState method.
-The string representation of a functional component
-Helper function to:
-During time jump, dispatch method will be used to re-render historical state.
-The current state of the component associated with the current Fiber node.
-An array of array of HookStateItem objects
-A function to throttle
-A number of milliseconds to use as throttling interval
-A function that limits input function, callback, from being called more than once every MIN_TIME_BETWEEN_UPDATE milliseconds
throttle
-This is a closure function to keep track of mode (jumping or not jumping)
-The current mode (i.e. jumping)
-an async function that takes an targetSnapshot, then invokes updateReactFiberTree based on the state provided within that target snapshot
Object that contains the current state of the application or system that needs to be serialized.
-serializeState - In the context of React, state is often used to store data that determines the behavior and appearance of a component. By serializing the state, we can preserve the component's data across page refreshes, server-side rendering, and other transitions. Additionally, by serializing the state and passing it to a child component, we can create a deep clone of the state, which allows the child component to manipulate the state without affecting the original component. This is useful in situations where we want to keep the state of the parent component immutable, but still allow child components to modify a copy of the state.
-The current mode (i.e. jumping, time-traveling, or paused)
-a function to be invoked by index.js that initiates snapshot monitoring
-linkFiber - linkFiber contains core module functionality, exported as an anonymous function, perform the following logic:
-This function creates a new snapShot fiber tree with the provided fiberRoot, then send the updated snapshot to front end.
-This runs after every Fiber commit if mode is not jumping.
-This
The fiberRootNode, which is the root node of the fiber tree is stored in the current property of the fiber root object which we can use to traverse the tree
-
-
- 
-
-
- Website -
- -You can view your application's file structure and click on a snapshot to view
-your app's state. State can be visualized in a Component Graph, JSON Tree, or
-Performance Graph. Snapshot history can be visualized in the History tab.
-The Web Metrics tab provides some useful metrics for site performance. The accessibility tab
-visualizes an app's accessibility tree per state change.
-Snapshots can be compared with the previous snapshot, which can be viewed in Diff mode.
-
-
-
-
Whenever the state is changed (whenever setState, useState is called), this
-extension will create a snapshot of the current state tree and record it. Each
-snapshot will be displayed in Chrome DevTools under the Reactime panel.
-
-
You can save a series of state snapshots and use it to analyze changes in
-component render performance between the current and the previous series of snapshots.
-You can also name specific snapshots and compare all snapshots with the same
-name.
-
-
When toggled to a specific snapshot, a visualization of the individual
-components of the snapshot will be displayed. This can be done under the same
-Performance tab where the snapshots are rendered. You will also find details of
-each component upon hovering.
-
-
Download the recorded snapshots as a JSON file and upload them to access state trees across different sessions.
-
-
-
-
If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. You'll notice a circle located to the right of the button, which will appear as either red (indicating disconnection) or green (signifying a successful reconnection).
-
-
One of the most common issues that affects performance in React is unnecessary
-render cycles. This problem can be fixed by checking your renders in the
-Performance tab in Chrome DevTools under the Reactime panel.
-
-
Using the actions sidebar, a user can jump to any previously recorded snapshots.
-Hitting the jump button on any snapshot will allow a user to view state data at
-any point in the history of the target application.
-
-
Reactime offers full support for Gatsby applications. You would be able to
-identify unnecessary renders, duration of each rendering, travel-debugging
-features and visual representation of the tree components.
-
-
Reactime offers debugging and performance tools for Next.js apps: time-traveling
-debugging, preventing unnecessary component re-renders and making your
-application faster.
-
-
Reactime offers debugging and performance tools for Remix apps (in beta). Support still
-needs to be added for multi-route time traveling. Every other feature works.
-
-
Reactime offers support for TypeScript applications using stateful class
-components and functional components. Further testing and development is
-required for custom hooks and Concurrent Mode.
-
-
After cloning this repository, developers can simply run npm run docs at the
-root level and serve the dynamically generated /docs/index.html file on a
-browser. Doing so will provide a readable, extensible, and interactive GUI view
-of the structure and interfaces of the codebase.
-
-
Reactime 24.0 includes a new accessibility debugging feature for developers!
-"No ARIA is better than bad ARIA"
-This version of Reactime remedies this phrase by implementing a feature that allows developers to track the accessibility tree of their application based on state change.
-Similar to the component map feature, developers can time travel to different states of their app's accessibility tree and hover over specific nodes to learn more about their individual accessibility-related information.
-We've also developed an enable/disable button that determines when the Chrome Debugger API grabs the app's accessibility tree and a legend component that describes the tree in greater detail.
-If you would like to read more about previous releases, click here!
-- -
To get started, install the Reactime -extension -from Chrome Web Store.
-After installing Reactime, you can test its functionalities with your React -application in development mode.
-Please note, the time jumping feature will ONLY work when your -application is running in development mode. In production mode, you are -able to view your application’s component map but no additional features.
-NOTE: The React Developer Tools -extension -is also required for Reactime to run, if you do not already have it installed on -your browser.
-Go to Chrome Extensions (make sure Chrome Extension is in Developer Mode) for
-manual installation in (https://developer.chrome.com/extensions/faq#faq-dev-01)
-and click on Load Unpacked. Use src/extension/build/ to load this extension.
-Turn on 'Allow access to file URLs' in the extension details page if testing
-locally.
Please refer to Developer Install for a detailed guide:
-Refer to the DEVELOPER README for more info on the project, and -instructions on building from source.
-After installing the Chrome extension, just open up your project in the browser.
-Then right click on your application and choose the 'Reactime' context menu item to open up a Reactime panel.
-Alternatively, you can open up your Chrome DevTools and navigate to the Reactime panel.
-Reactime initially runs using the dev tools global hook from the Chrome API. It -takes time for Chrome to load this. Try refreshing your application a couple of -times until you see Reactime running.
-Reactime works in tandem with the React Developer Tools to access a React application's Fiber tree; under the hood, Reactime traverses the Fiber tree through the React Developer Tool's global hook, pulling all relevant information needed to display to the developer
-Try refreshing the application you want to test and refresh the DevTools by -clicking the right mouse button “Reload frame”.
-Reactime is an open-source project, and we'd love to hear from you about -improving the user experience. Please read DEVELOPER README, -and create a pull request (or issue) to propose and collaborate on changes to Reactime.
-With the release of Node v18.12.1(LTS) on 11/4/22, the script has been updated to
-'npm run dev' | 'npm run build' for backwards compatibility.
For version
-Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
This project is licensed under the MIT License - see the LICENSE file -for details.
-Props for the action component
-Optional stateOptional seriesOptional children?: []Optional children?: unknown[]Optional componentOptional name?: stringOptional state?: unknownOptional stateOptional currentOptional marginOptional childrenOptional componentOptional currOptional children?: unknown[]Optional componentOptional name?: stringOptional state?: Record<string, unknown>Optional stateOptional snapshotsOptional toggleOptional viewOptional webOptional children?: any[]Optional componentOptional name?: stringOptional state?: string | objectOptional stateOptional childrenOptional componentOptional nameOptional stateOptional stateOptional nameOptional currOptional children?: any[]Optional componentOptional name?: stringOptional state?: string | objectOptional stateOptional snapshotsOptional snapshotactualDuration - The time taken to render the current Fiber node and its descendants during the previous render cycle. This value is used to optimize the rendering of components and to provide performance metrics to developers.
-actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
-key - The key a user assigned to the component or null if they didn't assign one
-context - {in experiment} - An object contains all context information of the current component
-index - {class component only} - The index of the bound setState method stored in componentActionsRecord
hooksState - {functional component only} - An object contains all states of the current functional component
-hooksIndex - {functional component only} - An array of index of the bound dispatch method stored in componentActionsRecord
props - An object contains all props of the current component
-selfBaseDuration - The base duration of the current Fiber node's render phase (excluding the time taken to render its children). This field is only set when the enableProfilerTimer flag is enabled.
-state - {class component only} - An object contains all states of the current class component
-treeBaseDuration - The total base duration of the current Fiber node's subtree. This field is only set when the enableProfilerTimer flag is enabled.
-Optional actualThe time taken to render the current Fiber node and its descendants during the previous render cycle.
-Optional actualThe time at which the rendering of the current Fiber node started during the previous render cycle.
-{in experiment} - An object contains all context information of the current component
-{functional component only} - An array of index of the bound dispatch method stored in componentActionsRecord
{functional component only} - An object contains all states of the current functional component
-{class component only} - The index of the bound setState method stored in componentActionsRecord
The key a user assigned to the component or null if they didn't assign one
-An object contains all props of the current component
-Optional selfThe base duration of the current Fiber node's render phase (excluding the time taken to render its children).
-An object contains all states of the current class component
-Optional treeThe total base duration of the current Fiber node's subtree.
-state - states within the current functional component
-component - contains bound dispatch method to update state of the current functional component
-an object contains bound dispatch method to update state of the current functional component
-states within the current functional component
-Indicate if mode is jumping/not jumping or navigating during jumping
-jumping - Describe whether we are jumping
-When jumping = true, no new snapShot will be sent to front end.
navigating - Cache timeJump function to be invoked after ReactFibe tree update with new states from new route
-if user uses click left/right arrow or play button, front end will post a message `jumpToSnap` and a payload of the cached snapShot tree, we will set `jumping = true`
-if during jumping, we navigate to another route, such as from buttons to tictactoe, backend will set `navigating = cache of timeJump function`
-Describe whether we are jumping
-When jumping = true, no new snapShot will be sent to front end.
Optional navigatingCache timeJump function to be invoked after ReactFibe tree update with new states from new route
-DevTools - A global object provided by the React Developer Tools extension. It provides a set of methods that allow developers to inspect and manipulate React components in the browser.
-getFiberRoots - get the Set of fiber roots that are currently mounted for the given rendererID. If not found, initalize a new empty Set at renderID key.
-A set of fiberRoot.
-a unique identifier for a specific instance of a React renderer
-root of the rendered tree (a.k.a the root of the React Application)
-onCommitFiberRoot - After the state of a component in a React Application is updated, the virtual DOM will be updated. When a render has been commited for a root, onCommitFiberRoot will be invoked to determine if the component is being mounted, updated, or unmounted. After that, this method will send update information to the React DevTools to update its UI to reflect the change.
-void
-An array of hooks used for debugging purposes.
-Optional actualTime spent rendering this Fiber and its descendants for the current update.
-This tells us how well the tree makes use of sCU for memoization. It is reset to 0 each time we render and only updated when we don't bailout.
-This field is only set when the enableProfilerTimer flag is enabled.
-Optional actualIf the Fiber is currently active in the "render" phase, this marks the time at which the work began.
-This field is only set when the enableProfilerTimer flag is enabled.
-Pointer to the first child.
-The type of the current Fiber node's element (e.g. the component function or class, or the DOM element type).
-For class/functional component, elmementType stores the function definition.
-Unique key string assigned by the user when making component on null if they didn't assign one
-The current props of the component associated with the current Fiber node.
-The current state for a functional component associated with the current Fiber node.
-Optional selfDuration of the most recent render time for this Fiber. This value is not updated when we bailout for memoization purposes.
-This field is only set when the enableProfilerTimer flag is enabled.
-Pointer to next sibling
-The local state associated with this fiber.
-For classComponent, stateNode contains current state and the bound update methods of the component.
-The type of the current Fiber node, such as FunctionComponent, ClassComponent, or HostComponent (for DOM elements).
-Optional treeSum of base times for all descendants of this Fiber. This value bubbles up during the "complete" phase.
-This field is only set when the enableProfilerTimer flag is enabled.
-actualDuration - The time taken to render the current Fiber node and its descendants during the previous render cycle. This value is used to optimize the rendering of components and to provide performance metrics to developers.
-actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
-child - Pointer to the first child.
-elementType - The type of the current Fiber node's element (e.g. the component function or class, or the DOM element type). For class/functional component, elmementType stores the function definition.
-key - The key a user assigned to the component or null if they didn't assign one
-memoizedProps - The current props of the component associated with the current Fiber node.
-memoizedState - The current state of the component associated with the current Fiber node.
-selfBaseDuration - The base duration of the current Fiber node's render phase (excluding the time taken to render its children). This field is only set when the enableProfilerTimer flag is enabled.
-sibling - Pointer to next sibling
-stateNode - The local state associated with this fiber. For classComponent, stateNode contains current state and the bound update methods of the component
-tag - The type of the current Fiber node, such as FunctionComponent, ClassComponent, or HostComponent (for DOM elements).
-treeBaseDuration - The total base duration of the current Fiber node's subtree. This field is only set when the enableProfilerTimer flag is enabled.
-_debugHookTypes - An array of hooks used for debugging purposes.
-Const Const Const Const Const A set of excluded props and variable name
-Const Const clear - Clears componentActionsRecord
-getAllComponents - This method is used for debugging purpose to access the array of setState/dispatch methods
-getComponentByIndex - This function is used for stateful Class Component to retrieve an object that has the bound setState method
-index of component inside componentActionsRecord coming from timeJump.ts
getComponentByIndexHooks - This function is used for Functional Component to retrieve an array of objects that have the bound dispatch methods.
-index of component inside componentActionsRecord coming from timeJump.ts
saveNew - Adds a new component to the componentActionsRecord array and returns its index.
-An object that contains bound update method. For class component, the udpate method is setState. For functional component, the update method is dispatch.
Const Const Const Const Const Const Const Const Const Const Host Component: a type of component that represents a native DOM element in the browser environment, such as div, span, input, h1 etc.
-Const A subtree. Could be an entry point to a different renderer.
-Const Root of a host tree. Could be nested inside another node.
-Const Const Const Before we know whether it is function or class
-Const Const Const Const Const Const Const Const Const Const Each node is given a property labeled ignored. Nodes read by the screen reader have their ignored property evaluate to false.Nodes not read by the screen reader evaluate to true.
Nodes labeled as no name are visible to a screen reader, but were not given a name label.
Each node is given a property labeled ignored. Nodes read by the screen reader have their ignored property evaluate to false.Nodes not read by the screen reader evaluate to true.
Nodes labeled as no name are visible to a screen reader, but were not given a name label.
Route instances are created by the addRoute method on Routes. A Route instance has two properties: the url of the route and a unique id.
-