react-学习笔记-10.21

新建项目

1. 全局安装react npm install -g create-react-app
2. 在自己的文件夹下安装项目 create-react-app todolist todolist为项目名称

介绍相应文件夹作用

3. 更改网站标签左上角图标
   
   只需要更改：

4. src下 app.js负责显示页面内容

5. src文件夹下的index.js是整个项目的入口，引入app，渲染app

6. public文件夹下

虚拟dom

1tate数据
2 JSX 模板
3 数据 + 模板 结合，生成真实的DOM,来显示
4srate发生改变
5 数据 + 模板 结合，生成真实的DOM，替换原始的DOM

缺陷：第一次生成了一个完整的DOM片段
第二次又生成了一个完整的DOM片段
第二次的DOM 体换第一次的DOM
消耗性能

更改后：

1state数据
2 JSX 模板
3 数据 + 模板 结合，生成真实的DOM,来显示
4srate发生改变
5数据 + 模板 结合，生成真实的DOM，
6新的DOM和原始的DOM做比对，找差异
7找出inout框发生变化
8只用新的DOM中的input元素，体换掉老的DOM中的input元素
缺陷：性能提升并不明显：
1.state数据
2.JSX模板
3 数据 + 模板 结合，生成真实的DOM,来显示

'abc'>hello

4.生成虚拟DOM（虚拟DOM就是一个JS对象，用来描述真实的DOM）

['div',{id:'abc'},['span',{},'hello']]

5.state发生变化
6.生成新的虚拟DOM

['div',{id:'abc'},['span',{},'bye']]

7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容
8.直接操作DOM，改变

生命周期

生命周期函数：指在某一时刻组件会自动调用执行的函数

1. componentWillMount在组建即将被挂载带页面的时刻自动执行
2. componentDidMount挂载之后被执行,通常ajax请求会放在这里面
   
   https://www.bilibili.com/video/av70587120/?p=29
   https://mail.notes.na.collabserv.com/verse
   https://www.jianshu.com/p/191d1e21f7ed
   http://react.carbondesignsystem.com/?path=/story/ui-shell–header-base
   https://ciodock-fra.w3-969.ibm.com/coachme-prod-coachme-web-angularjs/#/

12.23学习

css文件可以像js文件一样被引用
标签可以让最外层标签隐藏掉
循环时 key值最好不要是index因为原始虚拟dom值的index和后来的index不一定是一样的，可以用item做key值