React尚硅谷037-066(快捷键、生命周期、key值、配置代理)

ES7 React插件

常用的快捷指令：

• met(赋值箭头语句)

• imp---------import moduleName from ‘module’ //组件引入

• fre---------arrayName.forEach(element => { } //forEach循环

• anfn---------(params) => { } //箭头函数

• cp---------const { } = this.props //解构props

• cs---------const { } = this.state //解构state

• imbrc---------import { Route, Switch, NavLink, Link } from react-router-dom’ //引入路由

• est---------this.state = { } //初始化state

• sst---------this.setState({ }) //设置state

• ssf---------this.setState((state, props) => return { }) //设置state，回调形式

• cdm---------componentDidMount = () => { } //生命周期

• fref---------const ref = React.createRef() //ref

• props---------this.props.propName

• props限制和redux等快捷键以后跟进

  clg---------console.log(object)
  clo---------console.log(`object`, object)
  

037-047生命周期（新）

挂载：

constructor

render

componentDidMount

更新：

shouldComponentUpdate（必须要有返回值）

render

componentDidMound

卸载

componentWillUnmount

父子组件渲染顺序

父constructor

父render

子constructor

子render

子componentDidMount

父componentDidMount

旧版图：

048-diffing算法

最小力度是标签，里面的文字没有比较

逐层对比

048-key的作用

一.

1. 简单来说，key是虚拟dom对象的标识，在更新显示时起重要作用

2. 详细来说，当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟dom】随后react进行【新的虚拟dom】与【旧的虚拟dom】的diff比较，比较规则如下：

   a.旧虚拟dom中找到与新虚拟dom相同的key：

   （1）若虚拟dom中内容没变，直接使用之前的真实dom

   （2）若虚拟dom中内容变了，则生成新的真实dom，随后替换掉页面中之前的真实dom

   b.旧虚拟dom中未找到与新虚拟dom相同的key

   ​ 根据数据创建新的真实dom，随后渲染到页面

二.

1. ​ 用index作为key可能会引发的问题：

   1.若对数据进行：逆序添加，逆序删除等破坏顺序的操作

   这样让key值改变了，对比的时候出错，效率低

   ​ 会产生没有必要的真实dom更新===>界面效果没问题，但效率低

   2.如果结构中还包含输入类的dom：

   ​ 会产生错误dom更新===>界面有问题

   3.注意！如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

   <ul>
                       {
                           this.state.persons.map((item,idx)=>{
                               return <li key={idx}>{item.name}---{item.age}<input type="text"/></li>
                           })
                       }
                   </ul>
                   <br />
                   <br />
                   <ul>
                       {
                           this.state.persons.map((item,idx)=>{
                               return <li key={item.id}>{item.name}---{item.age}<input type="text"/></li>
                           })
                       }
                   </ul>
   

049-050-051-052脚手架

reportWebVitals.js记录性能的，用到web-vitals库

setupTests.js做组件单元测试，jest-dom库

主要是：

index.html

App.js只渲染App，ReactDOM.render(,document.getElementById(“root”))

index.js入口文件

<React.StrictMode>检查代码里是否合理，如ref字符串形式

053-样式的模块化

在css文件名字里加入module，如index.module.css

import hello from ‘./index.module.css’

用的时候hello.title

065-066-脚手架配置代理

1. package.json里"proxy":“http://localhost:5000”（3000没有的再转发给5000），所有从3000发出去的请求都转发给了5000，发的时候发3000，代理5000

   getStudentData = (params) => {
       axios.get('http://localhost:3000/students').then(
           response=>{console.log(response.data)},
           error=>{console.log('失败',error)}
       )
   }
   

   缺点：不能配置多个代理

2. src里建立setupProxy.js，CJS写

   const proxy = require('http-proxy-middleware')
   module.exports=function(app){
       app.use(
           proxy('/api1',{//遇见/api1前缀的请求，就会触发改该代理配置
               target:'http://localhost:5000',//请求转发给谁
               changeOrigin:true,//默认false，控制服务器收到的请求头中Host字段的值，标识着从那儿发出的请求
               pathRewrite:{'^/api1':''}//重写请求路径（必须）
           }),
           proxy('/api2',{
               target:'http://localhost:5001',
               changeOrigin:true,
               pathRewrite:{'^/api2':''}
           })
       )
   }
   

• 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
• 缺点：配置繁琐，前端请求资源时必须加前缀