早报@2019-02-23

[whatwewant]

[email protected] - 📣 announcements - npm forum

npm 发布 6.9.0-next.0，可以用 --before 安装某个时间之前的版本，通过 pkgname@npm:[email protected] 安装 fork 后的版本

• tags: 发布,NPM,NPM 6.9.0-next.0

gridsome 发布 0.5，静态站点生成框架，基于 vue 类似 gastby

• tags: 发布,Gridsome,Gridsome 0.5,Vue,Gastby,静态站点

Progressive react，如何让 react 站点更快

• 1 使用 Chrome DevTools Performance 和 React DevTools Profile 检查组件渲染性能问题;
• 2 减少重新渲染次数
  • 2.1 适当重写 shouldComponentUpdate (SCU)
  • 2.2 对于class组件, 积极使用 PureComponent
  • 2.3 对于函数式组件, 积极使用 React.memo
  • 2.4 Memorize Redux Selectors (使用 reselect)
  • 2.5 虚拟长列表，比如 react-window
• 3 使用 Lighthouse 测试 app-level 性能
• 4 改善 app-level 性能
  • 4.1 对于非SSR, 使用 React.lazy split components
  • 4.2 对于SSR, 使用 loadable-components split components
  • 4.3 使用Service Worker缓存必要的文件, 比如 Workbox
  • 4.4 对于SSR, 使用 stream 代替字符串, 也就是 使用 renderToNodeStream 和 renderToStaticNodeStream
  • 4.5 无法SSR ? 可以使用 react-snap 这样的库代替;
  • 4.6 对于 CSS-in-JS, 应该抽取关键样式(Critical Styles)
  • 4.7 Make sure your application is accessible. Using React A11y 和 react-axe;
  • 4.8 添加一个web app manifest，这样你就可以将应用添加到PC或者移动设备桌面了;
• tags: 文章,React,Devtools,SCU,PureComponent,React.memo,reselect,react-window,Lighthouse,React.lazy,loadable-components,SSR,CSR,renderToNodeStream,renderToStaticNodeStream,react-snap,CSS-in-JS,A11y,Workbox,Service Worker

react-redux 关于 hooks 相关设计的讨论

• tags: 文章,React,Redux,Hooks

Navi - 基于 hooks 和 suspense 的 react 路由 - Frontarm

• tags: React,Hooks,类库,Suspense,Router