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. 作为一款内存数据库,为什么断电后Redis数据不会丢失

    前言 Redis 作为一款内存数据库,被广泛使用于缓存,分布式锁等场景,那么假如断电或者因其他因素导致 Reids 服务宕机,在重启之后数据会丢失吗? Redis 持久化机制 Redis 虽然是定义为 ...

  2. 常用shell命令及其用法

    ls(lsit) ​ 1.作用:列出文件列表 ​ 2.用法:ls [-a|-A--] [filename|directory] ​ ls ​ ls -a:查看隐藏文件 ​ ls -l:查看文件详细信息 ...

  3. ubuntu中如何安装selenium+chrome(headless)无界面浏览器?

    selenium是一个Web的自动化测试工具,它可以根据我们的指令,让浏览器自动加载页面,获取需要的数据,甚至页面截屏,或者判断网站上某些动作是否发生.但是它自身不带浏览器,不支持浏览器的功能,因此它 ...

  4. 基于Koa2框架的项目搭建及实战开发

    Koa是基于 Node.js 平台的下一代 web 开发框架,由express原班人马打造,致力于成为一个更小.更富有表现力.更健壮的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 ...

  5. oracle 常用语法()

    一ORACLE的启动和关闭 1在单机环境下 2在双机环境下 Oracle数据库有哪几种启动方式 1startup nomount 2startup mount dbname 3startup open ...

  6. java生成Https证书,及证书导入的步骤和过程

    以下是相关的Tomcat,JDK和Windows环境: Tomcat版本:tomcat-7.0.55 JDK版本: jdk1.6.0 目录所在的位置: Serve的目录:D:\server\tomca ...

  7. 深信服edr控制中心漏洞——代码执行

    第一处代码执行 文件:tool/php_cli.php第64行

  8. 使用mybatis自动实现接口封装返回结果集

    import java.lang.annotation.Annotation; import java.lang.annotation.Documented; import java.lang.ann ...

  9. 存储过程demo返回银行名称

    create or replace procedure TEST_NUMO(Cityno IN VARCHAR2,--输入参数 Deptid IN VARCHAR2,--输入参数 Retval OUT ...

  10. 关于Java注解(annotation)的简单理解

    一.什么是注解? 从 JDK5 开始,Java增加对元数据的支持,也就是注解.简单理解就是代码里的特殊标志,这些标志可以在编译,类加载,运行时被读取,并执行相应的处理,以便于其他工具补充信息或者进行部 ...