第96期 — 2021-02-28

在浏览器中阅读

周e信

扫描二维码关注微信公众号

前端

Jon Sneyers

rclone

Stephanie Eckles

在React使用中避免竞争条件和内存泄漏🔗
  • 使用变量判断

    useEffect(() => {
    let isComponentMounted = true;
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const newData = await response.json();
      if(isComponentMounted) {
        setTodo(newData);
      }
    };
    fetchData();
    return () => {
      isComponentMounted = false;
    }
    }, []);
  • 推荐方案:对于http请求使用DOM标准中的AbortController取消

    useEffect(() => {
    let abortController = new AbortController();
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
            signal: abortController.signal,
          });
      const newData = await response.json();
        setTodo(newData);
      }
      catch(error) {
         if (error.name === 'AbortError') {
          // Handling error thrown by aborting request
        }
      }
    };
    fetchData();
    return () => {
      abortController.abort();
    }
    }, []);

SARANSH KATARIA

Francisco Hodge

Chun

cron-parser - cron规则解析工具🔗
var parser = require('cron-parser');

try {
  var interval = parser.parseExpression('*/2 * * * *');

  console.log('Date: ', interval.next().toString()); // Sat Dec 29 2012 00:42:00 GMT+0200 (EET)
  console.log('Date: ', interval.next().toString()); // Sat Dec 29 2012 00:44:00 GMT+0200 (EET)

  console.log('Date: ', interval.prev().toString()); // Sat Dec 29 2012 00:42:00 GMT+0200 (EET)
  console.log('Date: ', interval.prev().toString()); // Sat Dec 29 2012 00:40:00 GMT+0200 (EET)
} catch (err) {
  console.log('Error: ' + err.message);
}

Harri Siirak

移动端

wix

React Native性能调优 - 该做的和不该做的🔗
  • 使用图像缓存解决方案(推荐react-native-fast-image)
  • 使用PNG格式而不是JPG
  • 使用较小尺寸的图像
  • 对图像使用WEBP格式。它可以帮助将iOS和Android上的二进制文件大小减少29%。
  • 使用Flipper(支持layout调试),expo不支持调试
  • 启用Hermes
  • 不要将控制台语句保留在源代码中
  • 不要使用Scrollview渲染大量数据项

    ScrollView组件一次渲染所有子级,处理大量数据会直接影响应用程序的性能。为了处理大量项目,React Native提供了一个名为的组件FlatList。此组件可确保项目被延迟加载,以使应用程序不会消耗不一致的内存。

Aman Mittal

其他

E安全

5亿美元的教训-花旗银行学到了UI设计的重要性🔗

财务软件Flexcube令人困惑的界面,导致银行意外地偿还了全部贷款的本金-其中大部分要到2023年才到期。

TIMOTHY B. LEE

Andy

扫描二维码关注微信公众号
本期阅读量