React Big Changes All in One
React Big Changes All in One
React 重大更新
React Versions
React 版本变更
semantic versioning (semver) / 语义化版本
https://reactjs.org/docs/faq-versioning.html
React 16.13.1
https://github.com/facebook/react/blob/master/CHANGELOG.md#16131-march-19-2020
React v16.13.0
https://github.com/facebook/react/blob/master/CHANGELOG.md#16130-february-26-2020
Concurrent Mode (Experimental) / 并发模式
https://reactjs.org/docs/concurrent-mode-intro.html
https://reactjs.org/docs/concurrent-mode-adoption.html
React v16.9.0
https://github.com/facebook/react/blob/master/CHANGELOG.md#1690-august-8-2019
Renaming Unsafe Lifecycle Methods
componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate
https://reactjs.org/blog/2019/08/08/react-v16.9.0.html
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
React 16.9 does not contain breaking changes, and the old names continue to work in this release.
But you will now see a warning when using any of the old names:
why init execute twice bug
https://stackblitz.com/edit/react-ifecycle-order-all-in-one?file=package.json
https://react-ifecycle-order-all-in-one.stackblitz.io/
React v16.8
React Hooks
https://github.com/facebook/react/blob/master/CHANGELOG.md#1680-february-6-2019
useState
useReducer
useEffect
useMemo
useCallback
https://reactjs.org/docs/hooks-intro.html
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
React v16.3.0
https://github.com/facebook/react/blob/master/CHANGELOG.md#1630-march-29-2018
React lifecycle
getDerivedStateFromProps()
getSnapshotBeforeUpdate()
React DOM
supported context API
React.createRef()
React.forwardRef()
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles
React v16.x.x
refs
JSX Transform
React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform.
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
React Big Changes All in One的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- React的使用与JSX的转换
前置技能:Chrome浏览器 一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- (14)-Python3之--虚拟环境virtualenv
1.安装virtualenv pip install virtualenv 如果是在Linux下需要把virtualenv添加到/usr/bin目录下 # find / -name virtualen ...
- ADB 基本命令
ADB很强大,记住一些ADB命令有助于提高工作效率. 获取序列号: adb get-serialno 查看连接计算机的设备: adb devices 重启机器: adb reboot 重启到bootl ...
- WebRTC 泄漏真实 IP 地址
WebRTC(网页即时通信,Web Real-Time Communication) 它允许浏览器内进行实时语音或视频对话,而无需添加额外的浏览器扩展.包括 Chrome.Firefox.Opera. ...
- 服务之间的调用为啥不直接用 HTTP 而用 RPC?
什么是 RPC?RPC原理是什么? 什么是 RPC? RPC(Remote Procedure Call)-远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.比 ...
- Flutter GetX使用---简洁的魅力!
前言 使用Bloc的时候,有一个让我至今为止十分在意的问题,无法真正的跨页面交互!在反复的查阅官方文档后,使用一个全局Bloc的方式,实现了"伪"跨页面交互,详细可查看:flutt ...
- centos6.5 更新python2.6.6至2.7.6
1.查看当前Python版本 # python -V Python 2.6.6 2.下载Python2.7.6源码 # wget http://python.org/ftp/p ...
- SQL系列总结——基础篇(一)
数据库与表.列的关系其实就像是一个Excel工作薄(workbook)与Excel表格(sheet)以及表格中的列的关系一样.关系数据库中最基本的对象有3个:表.列.用户 基本的概念名词 ...
- ElasticSearch的查询(二)
一.Query String search 添加测试数据 PUT test_search { "mappings": { "test_type": { &quo ...
- Testing Round #16 (Unrated)
比赛链接:https://codeforces.com/contest/1351 A - A+B (Trial Problem) #include <bits/stdc++.h> usin ...
- Codeforces Round #664 (Div. 2) C. Boboniu and Bit Operations
传送门:cf1395C 题意 c[i]=a[i]&b[j],b[j]是b数组中任意一个,求c[1] | c[2] | ... | c[n]最小值. 题解 经典的二进制枚举答案,因为a和b的最大 ...