周e信第96期

第96期 — 2021-02-28

在浏览器中阅读

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

前端

下一代图片解码技术比较-推荐JPEG XL,AVIF 🔗

Jon Sneyers

教程 - 详解shadow特效 🔗

rclone

教程 - 使用CSS渐变创建响应图像效果并保持长宽比 🔗

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

simple-keyboard 虚拟键盘组件 🔗

Francisco Hodge

react-currency-input-field react货币输入组件 🔗

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

移动端

react-native-calendars - 支持expo的react native日历组件 🔗

wix

React Native性能调优 - 该做的和不该做的 🔗

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

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