4.11- react中的key有什么作用?为什么遍历列表时,key最好不要用index?-react脚手架项目的创建-npm yarn与
npm start`的区别-react脚手架项目文件及应用
一.学习内容
1.1 react中的key有什么作用?为什么遍历列表时,key最好不要用index?
解决1:虚拟DOM中key的作用:
1.key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
2.当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】,随后React进行【新虚拟DOM】与【旧虚拟DOM】 的不同的比较,比较规则如下:
--旧虚拟DOM中找到了与新虚拟DOM相同的key:
(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
(2).若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM
--旧虚拟DOM中未找到与新虚拟DOM相同的key:
(1).根据数据创建新的真实DOM,随后渲染到到页面
解决2:用index作为key可能会引发的问题:
1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新导致效率低。
2. 如果结构中还包含输入类的DOM(input框等):会产生错误DOM更新,界面有问题。
3. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。
总结:在开发中,最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。如果确定只是简单的展示数据,用index也是可以的。
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Defing extends React.Component{
state={
person:[
{id:1,name:'小明',age:18},
{id:2,name:'小红',age:19}
]
}
add=()=>{
let p={id:this.state.person.length+1,name:'小白',age:20}
this.setState({person:[p,...this.state.person]})
}
render(){
return (
<div>
<h1>展示人员列表</h1>
<button onClick={this.add}>添加人员信息</button>
<ul>
{
this.state.person.map((item)=>{
return <li key={item.id}>{item.name}---{item.age}</li>
})
}
</ul>
</div>
)
}
}
ReactDOM.render(<Defing/>,document.getElementById('test'))
</script>
</body>
</html>
1.2 react脚手架项目的创建
1.全局安装:npm i -g create-react-app
2.切换到想创项目的目录,创建脚手架文件: create-react-app 文件名
3.进入项目文件夹:cd 文件名
4.启动项目:npm start
也可以npm yarn
1.2.1npm yarn
与npm start
的区别
1.npm软件包管理系统,需要等待前一个包完全安装完才跳到后一个包继续处理(下载巨慢,特别是新项目)。
使用:Node.js 内置了npm,只要安装了node.js,就可以直接使用 npm。
2.yarn也是软件包管理系统,是对npm进行了优化,可并行执行包处理,速度会快很多(采用了,并行、离线等功能,优化了 install 时下载速度)。
好处:它可以立即安装软件包。它缓存每个包并将其保存在磁盘上,在此包的下一次安装中,可以不需要互联网连接,就可以进行安装 因为该包是从磁盘离线安装的。
安装使用:npm install -g yarn
两者的选择使用场景:
1.如果当前的工作流程比较顺利,不想安装额外的工具,并且没有大量磁盘空间,就选择 npm。
2.如果您想要速度快,功能更多,需要一些 npm 中缺少的功能,并且有足够的磁盘空间,就选择 Yarn。
1.3 react脚手架项目文件
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html--------主页面
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
App.css -------- App组件的样式
App.js--------App组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js------入口文件
logo.svg ------- logo图
reportWebVitals.js
— 页面性能分析文件(需要web-vitals库的支持)
setupTests.js
---- 组件单元测试的文件(需要jest-dom库的支持)
1.4 react脚手架项目的应用
1.在index.html主页面中,创建容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React脚手架</title>
</head>
<body>
<--容器-->
<div id="root"></div>
</body>
</html>
2.创建App组件
import React,{Component} from "react";
// react文件中应用的是多种暴露的方式,不是解构赋值
//引入子组件
import Hello from "./Component/hello"
export default class App extends Component{
render() {
return(
<div><Hello/></div>
)
}
}
3.在入口文件中创建组件
//引入react核心库
import React from "react";
//引入ReactDOM
import ReactDOM from "react-dom";
//引入App组件
import App from './App'
//渲染组件到页面
ReactDOM.render(<App/>,document.getElementById('root'))
4.创建子组件模块
import React, { Component } from "react"
//引入样式
import './hello.css'
export default class Hello extends Component{
render(){
return <h2 className='core'>Hello脚手架</h2>
}
}
二.学习总结
今天学习了react中遍历对象中key的作用,如何选取key作为唯一标识。接着学习react脚手架的创建文件的介绍以及项目的应用。今天上午看了一些中软杯的赛题,都不怎么能看的懂,B组赛题好多都是大数据的应用,采用Hadoop框架,几乎不太理解,看了一些电商用户消费,了解了RFM、CLV两个模型是什么意思,但是后端人员说这个比较难,所以最终也没有选出赛题。下午就继续学习了react,对react脚手架进行了了解,以及简单的应用。今天的学习状态不是很好,有点烦躁,比较担心中软杯的赛题。