开源日报每天推荐一个 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/