開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

2023年12月26日，開源日報第1055期：
今日推薦開源項目：《You-Dont-Need-Lodash-Underscore》
今日推薦英文原文：《Signals: A Performant Alternative to React Hooks》

開源項目

今日推薦開源項目：《You-Dont-Need-Lodash-Underscore》傳送門：項目鏈接

推薦理由：現代瀏覽器已原生支持許多Lodash/Underscore功能，減少項目依賴性，提高性能,在明確目標瀏覽器的情況下可以不安裝這些庫的依賴。對於ES5引擎還可以使用es5-shim

使用ESLint時，可直接安裝插件：

npm install --save-dev eslint-plugin-you-dont-need-lodash-underscore

然後更新eslint配置信息：

"extends": ["plugin:you-dont-need-lodash-underscore/compatible"]

英文原文

今日推薦英文原文：Signals: A Performant Alternative to React Hooks

推薦理由：Signals是React Hooks的高性能替代方案，提供了響應式的狀態管理機制, 相較於Hooks，Signals實現更精細的更新，尤其在複雜系統中性能更為出色, 學習簡便

Signals: A Performant Alternative to React Hooks

React hooks have revolutionized state management in React applications, providing a more concise and functional approach compared to traditional class-based components. However, there』s an emerging alternative that promises even better performance and granularity: Signals.

What are Signals?

Signals are a data-flow mechanism that allows you to manage state in a reactive and performant manner. They are based on the concept of Observable values, which emit notifications whenever their value changes. This enables components to subscribe to signals and re-render only when the data they depend on actually changes.

Why should you use signals instead of hooks?

There are various benefits to utilizing signals instead of hooks:

1.Signals have the potential to significantly enhance performance, particularly in systems with complicated state management. This is due to the fact that signals enable more granular updates, eliminating wasteful re-rendering of entire components.

  1. Signals are quite simple to learn and utilize, particularly if you are already familiar with reactive programming concepts. They offer a declarative and intuitive means of managing state.

  2. Signals are more adaptable than hooks, which are limited to functional components because they can be utilized both inside and outside of React components.

How to Use React Signals

The @preact/signals-react package can be used to use signals in React. This package includes a useSignal hook that lets you build and consume signals from within your React components.

Here』s an example of how to make a simple counter component with useSignal:

import React from 'react';  
import { signal, useSignal } from '@preact/signals-react';  

const count = signal(0);  

const Counter = () => {  
  const [countValue, setCountValue] = useSignal(count);  

  return (  
    <>  
      <div>Count: {countValue}</div>  
      <button onClick={() => setCountValue(countValue + 1)}>Increment</button>  
    </>  
  );  
};

export default Counter;

The useSignal hook is used in this example to subscribe to the count signal. The hook returns two values: countValue, which indicates the signal』s current value, and setCountValue, which is a function that can be used to adjust the signal』s value.

Conclusion

Signals are a compelling alternative to React hooks, particularly in high-performance applications. Their reactivity and granularity can lead to significant performance gains, while their ease of use and flexibility make them a versatile tool for state management. As the Preact community continues to develop and promote them, signals are poised to become a more prominent alternative for React developers seeking a performant and elegant approach to state management.

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/