React Big Changes All in One

React 重大更新

React Versions

React 版本变更

https://reactjs.org/versions/

semantic versioning (semver) / 语义化版本

https://semver.org/

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

https://reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.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的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  7. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  9. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  10. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. (14)-Python3之--虚拟环境virtualenv

    1.安装virtualenv pip install virtualenv 如果是在Linux下需要把virtualenv添加到/usr/bin目录下 # find / -name virtualen ...

  2. ADB 基本命令

    ADB很强大,记住一些ADB命令有助于提高工作效率. 获取序列号: adb get-serialno 查看连接计算机的设备: adb devices 重启机器: adb reboot 重启到bootl ...

  3. WebRTC 泄漏真实 IP 地址

    WebRTC(网页即时通信,Web Real-Time Communication) 它允许浏览器内进行实时语音或视频对话,而无需添加额外的浏览器扩展.包括 Chrome.Firefox.Opera. ...

  4. 服务之间的调用为啥不直接用 HTTP 而用 RPC?

    什么是 RPC?RPC原理是什么? 什么是 RPC? RPC(Remote Procedure Call)-远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.比 ...

  5. Flutter GetX使用---简洁的魅力!

    前言 使用Bloc的时候,有一个让我至今为止十分在意的问题,无法真正的跨页面交互!在反复的查阅官方文档后,使用一个全局Bloc的方式,实现了"伪"跨页面交互,详细可查看:flutt ...

  6. 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 ...

  7. SQL系列总结——基础篇(一)

       数据库与表.列的关系其实就像是一个Excel工作薄(workbook)与Excel表格(sheet)以及表格中的列的关系一样.关系数据库中最基本的对象有3个:表.列.用户     基本的概念名词 ...

  8. ElasticSearch的查询(二)

    一.Query String search 添加测试数据 PUT test_search { "mappings": { "test_type": { &quo ...

  9. Testing Round #16 (Unrated)

    比赛链接:https://codeforces.com/contest/1351 A - A+B (Trial Problem) #include <bits/stdc++.h> usin ...

  10. 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的最大 ...