TypeScript 基础补充

• TypeScript 是 JavaScript的超集

TypeScript 的编译

1. 编译器：babel-loader 因为浏览器解析不了ts语法，需要像es6解析成es5语法一样，让浏览器能识别。
2. 编译器配置文件：tsconfig.json

TS 的定义声明

• *.d.ts
• 只包含类型声明，不包含逻辑
• 不会被编译，不会被webpack打包

为什么要使用jsx

如果要渲染页面的元素，用js doucument.getElementById....如果里面有嵌套，更加繁杂 而 jsx可以更方便 2. 可以防止注入攻击，会将HTML文件变成字符串，但函数会被攻击

• 函数声明 const Robot:React.FC =({id,name,email})=>{}
• 类声明 class ShoppingCart extends React.Component<Props,State> {}

css module (模块化)

import './index.css' --->import style from './index.css'

State 和 Props 的区别？

• props 是组件对外的接口，state 是组件对内的接口
• props 是组件间数据传递，state 用于组件内部的数据传递
• state：
  1. state是私有的，可以认为state是组件的私有属性
  2. 用setState() 修改State， 如果直接修改state，组件不会触发render函数，页面不会渲染
  3. 构建函数constructor 是唯一可以初始化state的方法
  4. state的更新是异步操作
• props:
  1. props 就是传入函数的参数。是从父组件传递向子组件的数据。 只读属性 函数式编程
  2. Immutable
  • 对象一旦创建就不可以改变
  • 通过判断内存地址是否一致，来确认对象是否有经过修改

target 和 currentTarget

  //事件发生的元素
  console.log('e.target ',e.target);
    
  //描述事件处理绑定的元素
  console.log('e.currentTarget',e.currentTarget);

处理异步、动态显示

• AJAX 阿贾克斯
• callback 回调函数
• 程序栈stack，先进先出

Callback Hell 回调地狱

面试题：setState() 是异步还是同步的？

答：异步更新，同步执行。 setState() 本身并非异步，但对state的处理机制给人一种异步的假象。 state处理一般发生在生命周期变化的时候。 this.setState((preState,preProps)=>{}) this.setState((state,props)=>{})

React 组件的生命周期

• Mounting:创建虚拟DOM，渲染UI
• Updating:更新虚拟DOM，重新渲染UI
• Unmounting:删除虚拟DOM，移除UI