How To Dev

Introduction In the previous article, I provided much information related to React Fiber and Rendering Pipelines. I will further explain its operating mechanism and how to optimize performance more. At the same time, I will introduce how to use flushSync to set the priority of a task to a higher level. Prerequisites Please review the previous article to grasp some information about React Fiber before continuing. Detail For the example using useDeferredValue, you can try increasing the number of items processed or simulating a slower machine configuration to test it out. When you input continuously, you will see cases where everything still functions, but sometimes the machine will lag completely, unable to accept further input. Why is that? The reason lies in the principle I mentioned above, which is that React Fiber only works in the Render Phase when it can stop the current process to prioritize higher priority tasks (like user input), but once it enters the Commit Phase, it can no ...

Introduction Konva is a powerful 2D Canvas library that makes handling vector graphics and images easy. React-konva is a wrapper library that allows you to use Konva within React applications using familiar Components instead of having to manipulate the Canvas API directly. This combination brings declarative state management for graphical objects in the style of React. Advantages include: The ability to process thousands of shapes while still ensuring high performance Built-in support for interactive features like drag & drop, transforming, and flexible mouse/touch event handling. Support for layering, image filters, and the ability to quickly export canvas content to image formats or JSON. Detail In this article, I will guide you on using Konva to create a whiteboard with functions similar to a simple paint application, allowing you to upload images, draw rectangles, circles, and pencil lines, to help you initially understand Konva's functions First, please install the follow...