专栏首页前端说吧React - 入门:前导、环境、目录、原理

React - 入门:前导、环境、目录、原理

前导介绍:

facebook、2013开源。官网:https://reactjs.org/

版本v16之后,对其底层的核心算法进行了重构,引入了底层的新引擎React Fiber(16版本以后的react)

可支持服务端渲染

生态丰富:React Router、React Native、React VR、Redux(状态管理)、Jest(测试相关开发)、TypeScript等

应用:支持前端开发、服务端开发、移动端开发、vr项目开发

优点:项目容易维护,使用了虚拟DOM、相较于直接操作dom来说性能更好。

特点:API比较少

环境安装:

1. 本机React开发环境安装。

npm安装命令:sudo npm i create-react-app -g

(mac版复制上述命令到全局命令行。window版去掉前边sudo关键字进行安装。下同)

创建项目:(对应目录下执行命令):create-react-app 自定义文件夹名字

(在要创建react项目的目录下,开启命令行输入上述命令。)

观察命令行,create的过程中安装了三个东西:-

①. react:安装react

②. react-dom:此库用来渲染dom,如果没有他,我们的代码没有办法渲染到dom当中,所以需要引入,使用react,必须引入react-dom。

③. react-scripts:内置的webpack,有一些命令可以让我们去使用

安装完毕后,可以使用以下几个运行的命令:

值得注意的是,npm start 没有run,但是npm run build 就需要run。

另外,npm run eject是不可会退的,他会把你所有的依赖都移除,所以谨慎使用。

2. Chrome开发者工具安装。

  a. React Devloper Tools

  b. Redux DevTools

(需要安装以下两个,自行想办法去chrome商店安装。或者可以去插件相关github下载安装包,解压后打开这个地址chrome://extensions/拖拽到chrome进行安装)

模版目录:

react项目目录

如果学过vue,跟vue的目录基本一致

□ node_modules 

□ public

□ src

□ package.json

□ .gitignore

□ readme.md

重点说下public和src文件夹

· public

favicon.icon

index.html

根目录文件

manifest.json

实现一个快捷图标,配合serviceWorker实现pwa

· src

App.css

App.js

主页面

App.test.js

实现自动化测试

index.css

index.js

主入口

logo.svg

serviceWorker.js

pwa技术使用,以写网页的形式写一个app应用。帮助我们实现一个网页应用

原理:

render函数及其作用 将jsx语法放到react中进行渲染。

render接收两个参数:

参数

含义

要进行渲染的元素

一个容器、通过原生js的id选择器选择了一个#root的根元素。此元素位于index.html中

将第一个参数渲染的元素放到第二个参数元素中

render的名字不可改,不过可以利用es6的as方法进行修改:

不过ReactDOM的名字随便更改:

【ps:这都是es6的模块导入与导出的知识点啊!】

React的名字不能改,是因为render函数内部有用到React这个变量。

JSX语法会利用babel进行转化,转化成React.createcreateElement函数。

此时就必须要用到React这个变量。

React.createElement函数:

React.createElement函数接收多个参数

参数

含义

示例

备注

type

元素类型

“div”

html中已有的标签即可

props

attrs属性

{id: 'gjf'}

无时可以传null占位

children...

子元素们

'标签内的文本' React.createElement()

可以是文本、 也可以是另一个新的函数用于生成新的标签, 子元素可以有无数个一直延伸,props后边有几个参数就有几个子元素。

重写react.createElement方法

初步体验使用:不用JSX语法转译,而是通过React.createElement自己写一段Node对象来生成html

可见,JSX语法就是React.createElement函数的语法糖。

App生成的对象打印VNode节点对象:

React.createElement模拟实现:

不引入React,而是自己写一个React让其是一个对象,对象里边有createElement方法。

第一步:搭出大致框架

此时的打印结果如下:

第二步:深入细节

离胜利只差一步的时候被卡住了,怎么把得到的dom元素字符串化呢!

使用js自带的这些转化字符串的方法都不可用:

后来发现,我把createElement和render一起实现了,

createElement只是vNode对象并返回,并不是生成字符串形式的dom标签,

也不是只让render做把React.createElement返回的dom标签直接塞到根节点里的。

render函数才是将React.createElement生成的vNode渲染成html元素并插入到html当中的!

重写:第二步深入细节

修改后实现效果,打印vNode虚拟节点如下:

接下来就需要重写render函数!

重写react-dom.render函数

render(vNode,container)

参数

含义

备注

vNode

虚拟节点

container

容器

包裹虚拟节点生成的html元素

【重写render函数】根据虚拟节点vNode生成dom元素,并插入到container中~

2019-10-13  23:27:35

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css笔记 - 张鑫旭css课程笔记之 margin 篇

    relative可定位,但是不改变容器尺寸和占据的空间 margin不同,margin也在盒模型中。 从border开始往里边,是可视尺寸clientWidth...

    xing.org1^
  • JS-鼠标跟随块(一个小圆点跟着鼠标跑)

    xing.org1^
  • 【python系统学习14】类的继承与创新

    也就是说,通过类的继承,可以让子类拥有父类拥有的所有属性和方法。 这样,很多基础代码不用再重复书写,就可以直接实现代码的复用

    xing.org1^
  • React 17.0.0-rc.2带来全新的JSX转换

    北京时间 9 月 23 日凌晨,React 团队发布了关于全新 JSX 转换的博客,同时发布了 React 17.0.0-rc.2 版本,新的 JSX 转换不再...

    公众号@魔术师卡颂
  • 堪比魔法水晶球!人工智能变身“占卜师”

    镁客网
  • React学习(二)-深入浅出JSX

    在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起

    itclanCoder
  • React基础(2)-深入浅出JSX

    在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起

    itclanCoder
  • mac 系统新功能体验-根据时间变化的动态桌面背景,看壁纸演绎风景大片中的日出与日落。

    设置方法如下,直接在桌面与屏幕保护程序里进行设置就好了。如果没有的话,需要更新一下系统,新版支持。

    小蓝枣
  • 一起来学matlab-matlab学习笔记8 基本绘图命令_5 初级二维绘图/交互式绘图

    本文为matlab自学笔记的一部分,之所以学习matlab是因为其真的是人工智能无论是神经网络还是智能计算中日常使用的,非常重要的软件。也许最近其带来的一...

    DrawSky
  • 相见恨晚的JavaScript包搜索工具 — JS.coach

    时见疏星

扫码关注云+社区

领取腾讯云代金券