React 17 的版本是非比寻常的，因为它没有添加任何面向开发人员的新功能。而主要侧重于升级简化 React 本身。
React17 系统精讲 结合TS打造旅游电商平台KE
下栽课呈：lexuecode.com/492.html
React17 与React16 变化哪些
rico1015
lv-2
2021年08月04日 11:57 · 阅读 3149
新的JSX转换
React 16原理
babel-loader会预编译JSX为React.createElement(...)
复制代码
React 17原理
React 17中的 JSX 转换不会将 JSX 转换为 React.createElement，
而是自动从 React 的 package 中引入新的入口函数并调用。
另外此次升级不会改变 JSX 语法，旧的 JSX 转换也将继续工作。
复制代码
总结
React 17支持新的JSX转换。我们还将对它支持到React 16.14.0，React 15.7.0和0.14.10。
需要注意的是，这是完全选择启用的，您也不必使用它。
之前的JSX转换的方式将继续存在，并且没有计划停止对其支持。
复制代码
事件代理更改
在React 17中，React将不再在后台的文档级别附加事件处理程序。取而代之的是，它将它们附加到渲染您的React树的根DOM容器：
const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
复制代码
React17 系统精讲 结合TS打造旅游电商平台
总结
在React 16和更早的版本中，React将对大多数事件执行document.addEventListener（）。
React 17将在后调用rootNode.addEventListener（）。
复制代码
渐进式升级
React v17 开启了 React 渐进式升级的新篇章。当你从 React 15 升级至 16 时（或者，从 16 升级到 17），你通常会一次性升级整个应用程序，这对大部分应用来说十分有效。但是，如果代码库编写于几年前，并且没有及时的维护升级，这会使得升级成本越来越高。并且，在 React 17 之前，如果在同一个页面上使用不同的 React 版本（可以这么做，但是有风险），会导致事件问题的出现，会有一些未知的风险。
我们正在修复 React v17 中的许多问题。这意味着，当 React 18 或未来版本来临时，你将有更多选择。首选，当然还是一次性升级整个应用；但你还有个可选方案，渐进式升级你的应用。举个例子，你可能将大部分功能升级至 React v18，但保留部分懒加载的对话框或子路由在 React v17。
但这并不意味着你必须进行渐进式升级。对于大多数应用来说，一次性升级仍是更好的选择。加载两个版本的 React，仍然不是理想方案 —— 即使其中一个版本是按需加载的。但对于那些长期未维护的大型应用来说，这意义非凡，React v17 开始让这些应用不会被轻易淘汰。
我们准备了示例仓库，此示例演示了如何在必要时懒加载旧版本的 React。此示例由 Create React App 构建，使用其他工具也可以实现同样的效果。欢迎使用其他工具的小伙伴通过 PR 的形式提供 Demo。
React17 系统精讲 结合TS打造旅游电商平台
安装
使用 npm 安装 React v17：
npm install react@17.0.0 react-dom@17.0.0
使用 yarn 安装 React v17：
yarn add react@17.0.0 react-dom@17.0.0
我们还提供了由 UMD 构建的 CDN 版本：
<script crossorigin src="https://unpkg.com/react@17.0.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.production.min.js"></script>
import { Component } from 'react';
import PropTypes from 'prop-types';
class TodoItem extends Component {
constructor(props) {
super(props);
this.handleDel = this.handleDel.bind(this); // 能提升性能
}
// 只有当子组件的props和state有变化时，才需要执行render函数，从而更新渲染子组件
shouldComponentUpdate(nextProps, nextState) {
// 父组件render重新渲染，会导致子组件render也重新渲染，影响性能
if (nextProps.content !== this.props.content) {
// 子组件接收的content的值发生了变化，子组件需要被重新渲染
return true;
} else {
// 子组件接收的值未发生了变化，子组件不需要被重新渲染
return false;
}
}
handleDel() {
// 接收父组件传递过来的属性和方法
let { delItem, index } = this.props;
delItem(index);
// this.props.delItem(this.props.index);
}
render() {
console.log('child render');
let { content, test } = this.props;
// return <li onClick={this.handleDel} dangerouslySetInnerHTML={{ __html: content }}></li>;
return (
<li onClick={this.handleDel}>
{test}-{content}
</li>
);
}
}
// 类型校验
TodoItem.propTypes = {
content: PropTypes.string.isRequired, // 字符串类型，必传
delItem: PropTypes.func,
index: PropTypes.number,
test: PropTypes.string.isRequired,
};
// 默认值
TodoItem.defaultProps = {
test: 'hello',
};
export default TodoItem;