前端React结构工程-改写render
前端React结构工程-改写render
工程准备事项
- npm install
- cnpm
- 初始化工程实例
以上是实例化,安装过npm后的列表
接下来使用 npm run start 来启动项目
当你启动项目后会看到react给我们准备好的 默认界面
React中的 diff原理 和 调度原理是 这次探索的目标
只有搞明白这些,才能合理的利用react开发项目
我们实际使用的 项目是子集中的子集 d2
首先打开默认工程中的 package.json
在 scripts中 可以看到 - “start”: “react-scripts start”
- “build”: “react-scripts build”
- “test”: “react-scripts test”
- “eject”: “react-scripts eject”
那么 从目录的react-scripts 接着向上溯源
"bin": {"react-scripts": "./bin/react-scripts.js"},"dependencies": {"file-loader": "6.1.1","fs-extra": "^9.0.1","react-app-polyfill": "^2.0.0","react-dev-utils": "^11.0.3","react-refresh": "^0.8.3",},"devDependencies": {"react": "^17.0.1","react-dom": "^17.0.1"},
bin=>react-scripts 是执行的索引目录
react-scripts在首次调用到的时候执行一次,或编译时运行
使用的 npm run start 会在这里解释为 触发的语句
如果想要增加额外的触发语句,可自行增加api(event)
file-loader 和fs-extra是关联使用的,对于改写render来说 没多大实际意义。所以这里就过了
这里找到 require-render-return 和 no-require-return-value 将里面的 render改写为自定义的参数。
并在html中利用原型查看其原型,是否符合推测与更改的代码。
经过修改后,直接 npm run start一下
console.log的结果是 object对象.原型.的方法 为什么要说原型,一会大家就知道了
接下来索引进入到 react-Dom里面 查看源码并改写
…/node_modules/react-dom/cjs目录下的 就是 react的核心
react-dom.development.js 以下的操作 均是对 该文件进行 溯源修改的
REACT_ELEMENT_TYPE =0xeac7=react.element
如果你写过React的类组件,每一个类组件都是要继承于React.Component的。因此,如果我们在react.element中进行溯源
这句话就是
判断(类型 新子集 ==='对象'&&新子集 !== 空){switch(新子集.类型){c 变量 =创建一个元素来自 element[渲染](子集,返回的.根,穿透)}}
在react.element创建好新子集后,它必然是需要props出去的
接下来看它的pops,中间是默认传递了key。这就证明他内部的props是独一无二的,是肯定可以修改的
以上的原理我就搞明白了,谁是父元素的原型。
我们调用的是子集中的子集。你在写组件的关联都是类似的树循环。
最后将你传递的值 进行类型判断
如果 最初的 function不是 object类型的话,就会报错
并且这里的 Function 不是蓝色的,是绿色的
基本上到这里 溯源就结束了。已经知道的
- react.render 是从哪里起始的调用
- element是如何渲染的
- react是如何调度的
很多函数是关联的,不要只看命名就不去溯源
因为其中很多importa的会误导
扩展:react的更多溯源
retryTimeOutBoundary 渲染重绘
markRootUpdated 节点重绘
resolverRetryWakeable 虚拟Dom的different
captureCommitPhaseError 替换过时的Dom
captureCommitPhaseErrorOnRoot 替换过时的DOM在Root中
React 的总体流程
我是大菠萝!希望能帮助更多人
如果你们要做组件,那这里可能对你们有点帮助。
还没人敢改写 react的代码吧?哈哈哈
前端React结构工程-改写render相关推荐
- 一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
- 前端React教程第六课 认识栈调和、setState和Fiber架构
10 React 中的"栈调和"(Stack Reconciler)过程是怎样的? 时下 React 16 乃至 React 17 都是业界公认的"当红炸子鸡" ...
- 从零开始,教你用Webpack构建React基础工程
20170415更新 推荐大家使用facebook官方构建工具facebookincubator/create-react-app来创建React基础工程 前言 随着前端代码越来越多,越来越复杂,整个 ...
- 前端React教程第二课 React生命周期设计思想
02 为什么 React 16 要更改组件的生命周期?(上) React 生命周期已经是一个老生常谈的话题了,几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍.然而,入门教材在设计上往往 ...
- 2021前端react面试题汇总
2021前端react面试题汇总 React视频讲解 点击学习 全部视频:点击学习 (1)共同点 为了解决状态管理混乱,无法有效同步的问题统一维护管理应用状态; 某一状态只有一个可信数据来源(通常命名 ...
- Web前端-React学习
React基础 React 概述 React 是一个用于构建用户界面的JavaScript库. 用户界面: HTML页面(前端) React主要用来写HTML页面, 或构建Web应用 如果从MVC的角 ...
- 前端react基础基础学习 (一)
前端react基础基础学习 (一) 1.安装 npm i -g create-react-app 2.创建项目骨架 create-react-app react 组件创建方式 1.箭头函数的方式 / ...
- React Native工程中TSLint静态检查工具的探索之路
背景 建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查 ...
- React - children props 与 render props
React - children props 与 render props 一. children props 1. 函数组件形式 2. 类组件形式 二. render props 1. 函数组件形式 ...
最新文章
- 今年2月的微盟“删库”主角被判 6 年有期徒刑
- MIT研发无人机仓库管理系统,或将帮沃尔玛省下几十亿美元
- SSM中进行Junit单元测试时无法注入service
- 攻防世界-web-FlatScience-从0到1的解题历程writeup
- Neo4j:带密码的TF / IDF(和变体)
- js使用工具将表单封装成json字符串传到后台,js截取字符串(学生笔记)
- python混沌时间序列分析_用Python进行时间序列分析
- Hibernate学习笔记--第二篇 关联关系映射 many –to –one
- (转)C#对FTP的操作(上传,下载,重命名文件,删除文件,文件存在检查)
- html5 graphics with svg css3,Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
- go语言源自python语言_别再用Python编写机器学习基础设施啦,Go语言它不香吗?...
- JavaScript的实现
- CSS动画transform、transition和animation的区别
- 评分卡模型构建(含泪总结精华!!)
- 背英语句子,来巧记单词
- 《AngularJS深度剖析与最佳实践》一1.1 环境准备
- 怎么把单个的pdf文件合并在一起?怎么把几个单独的pdf文件合并为一个?
- Luogu P1850换教室【期望dp】By cellur925
- 【文献数据速递】CEO绿色经历能否促进企业绿色创新
- 如何利用excel计算百分位