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】