vim的ale调用eslint引起webpack与jest多次重新编译问题

在前端项目中,有大量的import,webpack的resolve.alias为此提供了很大的方便。为项目的一些常用路径定义别名,可以极大的简化代码并提高代码可读性。

eslint有一个plugin– eslint-plugin-import,能检测import的package是否合规,为了与webpack的alias一起工作,于是又有了一个新工具— eslint-import-resolver-webpack,使eslint可以识别webpack中定义的别名引用路径。

https://www.npmjs.com/package/eslint-import-resolver-webpack

我最初使用的是文档中省事的写法,直接在.eslintrc.js中使用了webpack的文件名

config: webpack.config.js

vim通过ale插件,支持eslint语法检查,是随输入随检查。

从此开始了编译的噩梦。

只要vim修改了文件内容,文件还没保存,但jest –watch 或 webpack-dev-server进程就会认为文件有改动,疯狂的重新编译,或重新运行测试。

一开始没意识到问题,还以为正常就这样,后来发现用其他编辑器在文件还没有保存的时候,修改文件内容是不会出发文件监听更新事件的。

首先定位错误到vim,经过挨个插件排查发现问题出在ale上,只要每次ale调用eslint,就会触发文件更新。实际用ls -l –full-time检查了一下发现eslint并没有更新文件的任何属性。

于是定位到eslint,对比了一下tslint,发现tslint不会触发文件更新事件。以为是eslint的bug或默认行为?于是开始排除eslint的插件,发现只要加载了webpack的配置,就会触发文件更新。终于定位到错误。

最后,将webpack中的alias部分提取到独立的文件,分别由.eslintrc.js与webpack.config引入使用,解决该问题。

发表在 ecmascript, vim | 留下评论

react16.5.2 component api笔记

此处只记录一些要点和一些与之前api不同的变更。
若需了解全部api可完整阅读 react component api

  • render 唯一的必须实现的函数
    • 必须是纯函数。可简单理解为此处只能进行只读操作,不可做出任何写操作或调用会引起写操作的函数。
    • 如果shouldComponentUpdate返回false,则不会被调用。
  • constructor(props)
    • 不能在这里setState。
    • 只有这里可以直接给this.state赋值。
    • 不能在这里调用有side-effects作用的函数,如果有需要,在componentDidMount里调用。
    • 不要在这里用props的值生成state内容。
  • componentDidMount
    • 此时组件已经载入,发起request请求,进行setState操作。
    • 可以在此进行一些事件订阅。
  • componentDidUpdate(prevProps, prevState, snapshot)
    • 在每次更新state或props之后调用,在第一次render时调用。
    • 此处禁用setState(文档上说尽量避免,但我认为应该禁用,如果有逻辑必须在此处调用setState,那么有必要重新梳理逻辑,一定是哪里想错了)。
    • 如果shouldComponentUpdate返回false,则不会被调用。
    • 如果有getSnapshotBeforeUpdate,则getSnapshotBeforeUpdate的返回值会作为第三个参数传入。
  • componentWillUnmount
    • 在此进行一些取消订阅或其他的清扫操作。
    • 此处禁用setState。
  • shouldComponentUpdate(nextProps, nextState)
    • return false则不会重新渲染,可在此处改善渲染性能避免重复渲染。
    • return false会阻止UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() 这三个生命周期函数的运行。
    • 在绝大多数情况下,不应手动实现该函数,应依赖react本身的默认更新行为。

以下是一些不常用的生命周期函数
  • static getDerivedStateFromProps(props, state)
    • 在render之前运行,包括第一次之后的渲染。
    • 是静态函数,有static关键字,里面没有实例this。
    • 在渲染之前,该返回值会替代当前实例的state,是在渲染之前最后一次修改state的机会。
  • getSnapshotBeforeUpdate
    • 在每次组件重渲染前调用,可获取当前dom内容。
    • 应有返回值。
  • componentDidCatch(error, info)
    • 捕获前端组件错误,通常只在最外层组件实现一次即可。
    • 以下错误不在该函数捕获范围内:
    • dom事件错误。
    • 异步错误。
    • 服务端渲染。
    • 该函数本身又抛出的错误。
  • 即将废弃
    • UNSAFE_componentWillMount
    • UNSAFE_componentWillReceiveProps
    • UNSAFE_componentWillUpdate
    • 都是去掉UNSAFE的同名函数的别名,即将废弃,无论是有没有UNSAFE前缀,别用就对了。
  • 非生命周期的实例方法
    • setState(updater[, callback])
    • setState可能同步或异步执行,因此不保证调用后的state为最新状态。
    • updater除了对象,还可以是函数,例如:

      this.setState((prevState, props) => {
      return {counter: prevState.counter + props.step};
      });
    • 如果要获取更新后的state,在callback中获取。
    • component.forceUpdate(callback)
    • 当组件由于非state或props的其他因素需要更新时才需要调用。一般来说需要手动调用这个是数据结构设计失败导致。
类静态属性
  • defaultProps
  • displayName
实例属性
  • state
  • props
发表在 ecmascript, react | 留下评论

manning progressive web apps

学习笔记

service worker仅能运行在https或localhost本地模式下的http环境中。

利用pwa的caches可以为web程序添加一层shell,或拦截并替换或加工请求。比如根据浏览器兼容,替换webp格式图片。

利用web数据库缓存提交请求,待连线时再与服务器同步。

讲解stream概念。结合caches自建流式渲染。

最后的trouble shooting很有用,有问题时应该先从在这里找找答案。

最后还有个展望web未来,说了一些es的蓝牙api,社交分享功能。通用支付功能,图像识别功能,二维码识别的例子。

发表在 books | 留下评论