React 17 深度解析：承前启后的关键版本

JayceM

于 2025-08-06 17:53:31 发布

阅读量358

点赞数 13

CC 4.0 BY-SA版权

分类专栏：面试 React 文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/weixin_43822134/article/details/149971074

React 同时被 2 个专栏收录

9 篇文章

订阅专栏

面试

8 篇文章

订阅专栏

React 17 是一个独特的“桥梁版本”，它没有引入显著的新特性，而是专注于为未来版本铺平道路。

一、核心定位：渐进升级的基石

版本定位的特殊性
在这里插入图片描述

无破坏性变更： API完全向前兼容，无废弃警告
升级零成本： 99%的组件无需修改代码
多版本共存： 支持不同React版本组件共存（如微前端场景）

核心目标
1、为并发模式（React 18）铺路
2、重构事件系统解决多版本冲突
3、改进JSX转换机制
4、优化副作用清理时机

二、事件系统重构：解决多版本冲突

问题根源（React 16 及之前）

// React 16 事件委托机制
document.addEventListener('click', dispatchEvent);

function dispatchEvent(e) {
	// 查找所有React根节点并触发事件
}

全局事件监听： 所有事件委托到document级别
多版本冲突： 多个React版本共存时事件系统互相干扰

React 17 解决方案

// React 17 事件委托机制
const rootNode = rootContainerElement;
rootNode.addEventListener('click', dispatchEvent);

事件委托到根节点： 事件监听绑定到React应用的根DOM节点
隔离事件系统： 不同版本React应用的事件互不干扰

实际影响

场景	React 16	React 17
微前端事件传递	可能混乱	完全隔离
事件阻止冒泡	需e.nativeEvent.stopImmediatePropagation()	标准e.stopPropagation()
嵌套React版本	冲突崩溃	和平共存

三、JSX转换革命：告别React导入

传统JSX转换（React 17 之前）

// 源代码
import React from 'react';

function Button() {
	return <button>Click</button>
}

// 编译后
import React from 'react';

function Button() {
	return React.createElement('button', null, 'Click');
}

强制导入React： 每个JSX文件需import React
包体积浪费： 不必要的React引入

新版JSX转换（React 17 +）

// 源代码（无需导入React）
function Button() {
  return <button>Click</button>;
}

// 编译后
import { jsx as _jsx } from 'react/jsx-runtime';

function Button() {
	return _jsx('button', { children: 'Click' });
}

核心优势：
1、零导入JSX： 不再强制import React
2、包体积优化： 减少 ~2kb 打包体积
3、树摇优化： 未使用的JSX代码可被移除
4、未来兼容： 支持自定义JSX运行时

升级指南

# 使用官方迁移工具
npx react-codemod update-react-imports

四、副作用清理时机优化

问题背景

useEffect(() => {
	// 设置操作
	return () => {
		// React 16:同步执行清理，可能阻塞渲染
		heavyCleanup();
	};
});

清理函数同步执行，阻塞屏幕更新
大型应用可能导致卡顿

React 17 改进

function commitHookEffectListUnmount() {
	// 异步执行清理函数
	setTimeout(executeCleanup, 0);
}

清理函数异步化： 在渲染完成后延迟执行
执行顺序保证： 组件树的清理按子 → 父顺序执行

实际影响

场景	React 16	React 17
卸载性能	可能卡顿	更流畅
清理函数中的 setState	警告	允许（异步安全）
执行时机	同步	异步微任务

五、严格模式强化：提前暴露并发问题

新增调试行为

<React.StrictMode>
	<App />
</React.StrictMode>

开发环境行为增强：
1、双重渲染组件：

类组件：constructor → render → componentDidMount 执行两次
函数组件：函数体执行两次
目的： 检测不纯渲染（Impure Rendering）
2、双重调用生命周期：

// 以下方法被调用两次：
getDerivedStateFromProps()
shouldComponentUpdate()
render()
useState/useMemo/useReducer 初始化函数

检测范围

识别不安全生命周期使用
暴露竞态条件（Race Conditions）
发现副作用滥用

六、其他重要改进

1、原生组件栈支持

浏览器可点击跳转： 直接定位到源码位置
支持异步组件栈： Suspense 场景更清晰

2、事件代理优化

// 移除事件池（Event Pooling）
// React 16:
onClick = {e => {
	e.persist(); // 必须调用
	setTimeout(() => console.log(e.target), 100);
}} 

// React 17:
onClick = {e => {
	setTimeout(() => console.log(e.target), 100);
}}

废弃事件池机制： 现代浏览器已优化事件对象性能
简化事件处理： 无需e.persist()

3、返回 undefined 处理

function Component() {
	return undefined; // React 17 抛出错误
}

更严格类型检查： 修复React 16 静默忽略的bug

七、升级迁移实践指南

步骤分解

# 1-更新依赖
npm install react@17 react-dom@17

# 2-修改入口文件（可选但推荐）
// 旧：
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// 新：
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />)

破坏性变更处理

变更点	解决方案
事件委托位置变更	测试微前端场景事件传递
事件池移除	删除所有 e.persist() 调用
返回undefined报错	检查所有组件返回类型

性能对比