React17在我看来是这样的
前端大神之路
共 3720字，需浏览 8分钟
·
2021-03-14 02:21
本文适合觉得React难学，或者想重头系统化学习React的小伙伴。
如果这篇文章有触动到你，欢迎关注前端早茶，与广东靓仔携手共同进阶～
作者：广东靓仔
一、前言
本文基于开源项目：
https://github.com/facebook/react
React官方文档写得特别好，还带着我们去领悟它的设计模式。
1.1 没有React基础可以开始用React17吗?
二、React 17 带来了哪些改变
基石 ，为什么这么说呢？细心的小伙伴们会发现官方描述了这么一句话：“React v17 开启了 React 渐进式升级的新篇章”。这句话我看出了雄心勃勃，后续 18、19 等的更新版本一定是以17这个“基石”来开启新篇章。这里列举让广东靓仔眼前一亮的两点：
1、新的 JSX 转换逻辑
2、事件系统重构
当然React17也有其他的更新，大家有兴趣可以去看官方文档。
三、重构 JSX 转换逻辑
React17之前我们如果这样写，代码如下：
function MyComponent() {
return <p>前端早茶</p>
}
页面是会报错的，why?
上一篇文章有讲到React 中对 JSX 代码的转换依赖的是 React.createElement 这个函数。有兴趣可以回头看下上一篇文章。
因此在写JSX的时候，是一定要在头部引入React的，代码如下：
import React from 'react';
function MyComponent() {
return <p>前端早茶</p>
}
import React from 'react'; React17中编译器会自动帮我们引入 JSX 的解析器的，例如：
function MyComponent() {
return <p>前端早茶</p>
}
这个代码最后会被编译器转换为：
import {jsx as _jsx} from 'react/jsx-runtime';
function MyComponent() {
return _jsx('p', { children: '前端早茶' });
}
https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation
四、事件系统重构
React17版本中事件系统重构可以分为两块来看：
放弃document 来做事件的中心化管控 放弃事件池 4.1 卸掉历史包袱
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
之后React 组件就只能自己管理自己的东东了，无法再影响到全局了。
4.2 拥抱新潮流
广东靓仔找来了官方的代码，来说明：
function handleChange(e) {
// This won't work because the event object gets reused.
setTimeout(() => {
console.log(e.target.value); // Too late!
}, 100);
}
要想获取的话，我们就需要使用e.persist() ，代码如下：
function handleChange(e) {
// Prevents React from resetting its properties:
e.persist();
setTimeout(() => {
console.log(e.target.value); // Works
}, 100);
}
五、总结
在看源码前，我们先去官方文档复习下框架设计理念、源码分层设计 阅读下框架官方开发人员写的相关文章 借助框架的调用栈来进行源码的阅读，通过这个执行流程，我们就完整的对源码进行了一个初步的了解 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍
关注我，一起携手进阶
如果这篇文章有触动到你，欢迎关注前端早茶，与广东靓仔携手共同进阶～
评论