react16.5.2 component api笔记

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 | 留下评论

manning rxjs in action

RxJS + React + Redux (what we call the 3R) architecture
3R这个概念还行,在这本书里头一次见。

Learning to use a new tool is as important as learning when not to use it.
与学习如何使用一项工具一样重要的是,知道什么时候该用它。

看到consumer pull和iterator push模式
对generator又加深了一些理解其应该存在的使用场景

rx生成的订阅模型,比事件模型的更容易清理,unsubscribe,对内存释放友好

hot与cold的observable对象的区别,push与pull。

There is no onesize-fits-all solution to every problem
一句话说,没有银弹。

看完之后,对rxjs总算有了个靠谱的了解。可惜看到一半左右再上的官网看,发现已经升级版本6了,书里讲的都是5。
好在5和6除了函数式风格api的变化,其他相差不多。

发表在 books | 留下评论