前端快报6月

UI AS AN AFTERTHOUGHT

这篇文章介绍作者对UI框架和状态管理的思考。在React中开发者通常会在组件中处理业务逻辑，这样导致UI和数据无法解耦。文章中的方式是让React做比较纯粹的渲染框架，业务逻辑组织在全局store中.

Track down the JavaScript code responsible for polluting the global scope

文章提供了基于ES6 proxy查找全局变量污染的方案

useEvent RFC

相关文章 What the useEvent React hook is (and isn't)
react增加了useEvent提案，使用场景能帮我们缓存一个函数的回调。主要用于解决如下的问题:

1. 通常的场景在组件中声明中的函数会因为依赖项的问题导致在渲染的时候函数会新生成引用，这样在使用该函数的子组件就会触发重新渲染。

2. react hooks的依赖解耦 比如在一个effect hook中有两段业务逻辑，这样就需要把两段业务逻辑的依赖都加入到effect hook的依赖中，导致effect执行不符合预期。
   useEvent简化实现如下:

    function useEvent(handler) {
        const handlerRef = useRef(null);
   
        // In a real implementation, this would run before layout effects
        useLayoutEffect(() => {
            handlerRef.current = handler;
        });
   
        return useCallback((...args) => {
            // In a real implementation, this would throw if called during render
            const fn = handlerRef.current;
            return fn(...args);
        }, []);
    }
   

useEvent可以看出是官方的解决前面提到问题的方案，在往前走一会，有如下的一些思考:

1. 是否需要一个不变的callback => 性能 vs 代码复杂度
2. 组件是否做了组件该做的事 => 渲染和业务逻辑的设计

The Story of Concurrent React

视频介绍react Concurrent发展的过程

React key attribute: best practices for performant lists

文章介绍React组件中key使用的注意事项

React Hook: Detect Click outside of Component

文章介绍如何实现一个自定义的hook来监听组件外的点击

Web Applications 101

文章介绍web应用前端技术的发展过程，从最开始的web1.0到web2.0娓娓道来。

工具

kbar

kbar是一个给站点提供快捷操作的工具

                      欢迎大家关注前端小板凳公众号，一起进步