react安装极其了解
2024-10-21 09:52:17
全局安装react脚手架工具
首先全局进行安装:cnpm install create-react-app -g 查看是否安装完成:create-react-app
创建react项目:create-react-app <项目名>
如果create-react-app出现如下错误时:
1.//换源 npm config set registry https://registry.npm.taobao.org
2.//配置后通过以下方法验证是否成功 npm config get registry
react的render方法:
对于组件而言:
创建时执行
state发生变化
props发生变化执行
forceUpdate
对于整个项目而言:
创建时执行
setState
forceUpdate
1.state props 数据
2.jsx 模板
3.数据+模板结合。生成真实的DOM。显示在页面中
4.setState 发生变化
5.数据+模板结合。生成真实的DOM。替换原有的DOM
缺点:
第一次创建完整的真实的DOM
第二次创建完整的真实的DOM,替换原有的DOM
1.第二次创建真正dom性能消耗非常高
2.替换dom性能消耗非常高
1.state props 数据
2.jsx 模板
3.数据+模板结合。生成真实的DOM。显示在页面中
4.setState 发生变化
5.数据+模板结合。生成真实的DOM。不进行替换原有的DOM
6.新的dom和原来dom进行比对,找到差异。(消耗性能)
7.只替换发生变化的dom。
缺点:
性能提升并不明显
虚拟dom的概念:
1.state props 数据
2.jsx 模板
3.数据+模板结合,生成虚拟dom(js对象)。
jsx模板 <div className="App"><span>hello world</span></div>
createElement
虚拟dom(js对象)['div', {className: 'App'}, ['span', null, 'hello world']]
生成真实DOM
4.生成真实的DOM。显示在页面中
5.setState 发生变化
6.数据+模板结合。生成虚拟dom
['div', {className: 'App'}, ['span', null, 'hello react']]
7.原来的虚拟dom和新的虚拟dom,进行比较找到差异。(diff算法,同级比较)
8.只替换发生变化的dom。
优点:
1.提升了性能
2.可以跨平台,有了React Native
package.json配置项
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
index.html
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> //有利于搜索引擎搜索,manifest.json配置
<noscript>没有引入js</noscript>当项目没有引入js文件时显示页面上
最新文章
- Ubuntu grub引导修复
- lua学习之table类型
- ubuntu14.04 gedit显示GB2312中文编码
- 【Hibernate】Hibernate系列8之管理session
- String,你到底创建了几个对象????
- Java基础(38):Calendar类的应用(优于Date类)
- Oracle 10 - 数据库表
- String类概述
- Material风格的Quick组件,妈妈再也不用担心我的界面不好看了
- 【需求工程】KANO模型
- File attachment or query results size exceeds allowable value of 1000000 bytes.
- Python基础知识拾遗
- 详解Tomcat的连接数和线程池
- eclipse Dynamic web module相关问题
- WebSocket原理与实践
- Android Autosizing TextViews
- nginx 隐藏 index.php
- 阿里DRUID数据源
- Hadoop学习之路(十)HDFS API的使用
- 三星S5-PV210内存初始化
热门文章
- Exadata中Infiniband交换机升级
- PAT甲级——1097 Deduplication on a Linked List (链表)
- 关于强大的requests
- 安装mongodb并配置
- Oracle 11g安装报错Environment variable: ";PATH";
- oracle 中的null与&#39;&#39;
- mysql数据库忘记密码时如何修改(二)
- js 独立命名空间,私有成员和静态成员
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
- Web前端开发的学习过程