博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
速览新特性--react✈️16.0=>16.6
阅读量:6446 次
发布时间:2019-06-23

本文共 1290 字,大约阅读时间需要 4 分钟。

timeline

16.2.0

Fragment(render数组无需key)

【】

16.3.0

context api & new lifecycles

先React.createContext,通过context.Provider和context.Consumer来传递值

删除(16.x保留,17.0禁用)

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

新生命周期

  • getDerivedStateFromProps(nextProps, prevState),ps:需要额外写一个state来记录上一个props
  • getSnapshotBeforeUpdate(prevProps, prevState),ps:在render后,节点挂载前

推荐用法

  • state(非componentWillMount)中初始化
  • componentDidMount(非componentWillMount)中发送异步请求
  • componentDidMount(非componentWillMount)中添加事件监听、Invoking external callbacks
  • getDerivedStateFromProps(非componentWillReceiveProps)根据props更新state
  • componentDidUpdate(非componentWillReceiveProps)中解决改变props,多次触发cwrp的副作用
  • getDerivedStateFromProps+componentDidUpdate(非componentWillReceiveProps)props更新时重新请求
  • getSnapshotBeforeUpdate(非componentWillReceiveProps)在更新前记录原来的dom节点属性,componentDidUpdate(prevProps, prevState, snapshot)直接获得getSnapshotBeforeUpdate返回的dom属性值

【】

【】

16.4.0

Pointer events

【】

16.5

React Devtools profiler

可以录制内容分析,展示commit阶段性能数据:火焰图,柱状图 ,组件渲染次数,用户交换产生commit的追踪【from:】。每次操作带来的组件渲染消耗,可追踪 initial render、state updates、async work【】

Create react app 2.0

【】

16.6.0

Lazy & memo & contextType

lazy:lazy()动态导入+suspense组件使得render内可异步操作

memo:浅比较props

contextType:使用类组件的context

【】

【new-lifecycle】

转载于:https://juejin.im/post/5c0f5804e51d4527d24b71a0

你可能感兴趣的文章
我的友情链接
查看>>
使用正确的筛选参数来提高查询性能
查看>>
网易云课堂Linux运维在线班命令笔记
查看>>
poi操作excel 实例
查看>>
static
查看>>
通过字体大小的设计来提高用户体验
查看>>
07-python-基础知识练习
查看>>
请输入两个数字
查看>>
面试题:将字符串中的中英文分开显示
查看>>
python-09
查看>>
Nokia 920板砖自救(理论上通用,升级Win10成板砖也可以用这个恢复)
查看>>
HDU 1542 Atlantis[扫描线]
查看>>
大小写转换
查看>>
Ajax
查看>>
spark SQL学习(spark连接 mysql)
查看>>
centos查看端口被哪个应用端口占用命令
查看>>
Python学习笔记3-字符串
查看>>
logistic 回归(线性和非线性)
查看>>
nginx下禁止访问robots.txt的设置方法
查看>>
SQLPLUS 小技巧格式化字符串
查看>>