react安装极其了解

Posted 2020-12-30 yunshangwuyou

 

全局安装react脚手架工具

首先全局进行安装:cnpm install create-react-app -g 查看是否安装完成:create-react-app

 

创建react项目：create-react-app <项目名>

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文件时显示页面上