The front-end quick explode

  • React 18 is the first RC release with the following updates:

    • New client rendering API:ReactDOM.createRoot(Used to replaceReactDOM.render).
    • Server rendering API updated to fully support Server Suspense and streaming SSR.
    • Automatic batch optimization (solves the problem of not batching in asynchronous callbacks).
    • There is no longer a Concurrent Mode, but a Concurrent Feature, which is less intrusive
    • Added Hooks API:
      • useId: Generates a unique ID for the component.
      • useSyncExternalStoreIt is recommended that all tripartite state libraries be switched to this API.React-redux 8.0.0-alpha has been switched to this API.
      • useInsertionEffect: used to insert DOM nodes globally into the CSS library, for example<style>Or SVG<defs>Compared to,useLayoutEffectThis method does not get the REF of the DOM node during the callback process.
      • For concurrent renderinguseDeferredValue,startTransition,useTransition.
    • Suspense API Updates:
      • Suspense API for React 16-17 is client-only, and onlyReact.lazyMix and match.
      • The Suspense API from React 18 will support asynchronous loading of internal components as well as streaming SSR.
      • Suspense no longer relies on the fallback attribute to define boundaries.
    • Deleted the setState on unMounted Component warning.
    • Internet Explorer is no longer supported. That’s because the new features introduced in React 18 were built using modern browser features, such as microtasks, that aren’t fully populated in IE. Internet Explorer will also cease support on June 15, 2022.

  • Safari 15.4 released with over 70 new features and the following major updates:

    • <img>Element support configurationloadingProperty for lazy loading images, previously supported by Chrome 77, Firefox 75, and Edge 79.
    • New support<dialog>Elements,::backdropFake elements, previously supported by Chrome 37, Firefox 98, and Edge 79.
    • New support[:has()](https://www.w3.org/TR/selectors-4/#relational)Parent pseudo-class selector, which is the first browser to officially support, and requires Flag to be enabled in Chrome.
    • To support theCSS Cascade Layers feature
      • This feature contains@layerRule that internally allows CSS selectors to be declared. Internally matched selectors will be assigned to one or more layers.
      • @layerRules have a higher priority than elements.
      • You can declare different at the beginning of the file@layerOrder to reorganize the followings@layerThe relative priority of.
      • It was previously supported in Chrome 99 and Firefox 97.
    • Three new apis for the ECMAScript Stage 3 proposal are added to the JS array
      • [findLast()](https://github.com/tc39/proposal-array-find-from-last)Find the last element of the array.
      • [findLastIndex()](https://github.com/tc39/proposal-array-find-from-last)Find the index of the last element of the array.
      • [at()](https://github.com/tc39/proposal-relative-indexing-method)To access an array element with the specified index.
    • Developer tools added new CSS alignment controls, Use Flexbox and Grid to intuitively set the align-content, align-items, align-self, context-content, context-items, or context-self properties.
    • New Viewport unit svh,lvh,dvh 和 svw,lvw 和 dvw, these values change as the user scrolls.

  • ECMAScript has a new proposal: Types as Comments. The purpose of this proposal is to enable developers to add type comments to their JavaScript code, allowing type checkers outside of JavaScript to examine these comments. At run time, the JavaScript engine ignores them, treating them as annotations. Run programs written in TypeScript, Flow, and other statically typed supersets of JavaScript without any compilation.

  • With the release of Chrome 99, Chrome on the Mac reached a new speed milestone with the highest score of any browser to date, 300, in Apple’s Speedometer browser response speed test. Chrome 99 enables a build optimization technique called ThinLTO to inline speed-critical parts of a code base, even if spread across multiple files or libraries. Combined with recent graphics optimizations (i.e., pass-through decoders and out-of-process rasterization), tests showed Chrome’s graphics performance to be 15% faster than Safari’s.

chest

  • Detect elements in focus all the time. If you want to know at any time which element on the page is in focus, you can detect it using real-time expressions in the console tools.

  • Pppointed is an arrow drawing tool that can be exported as SVG.

Editor: Ink dust & review: cheng Hu, a trace