(Day1) React + TypeScript 复习总结

JSX

1. JSX的本质是JS对象：JSX标签对象 ------> 映射到html标签对象中，React就是用这种方式将JSX渲染到html文档中。
2. 简单描述一下JSX：
   jsx就是js于xml的一种结合体，理解为js于xml可以一起使用。它在运行的时候会被babel转译 生成 执行React.createElement(‘h1’,null,‘hello’)返回生成的对象结构（React元素），根据这个结构，最后进行页面的渲染（React.render()）。
3. jsx的属性 / 表达式：在大括号中，放一些变量，表达式；属性方面 className , style等。
4. jsx可以在循环中使用。

import React from 'react';
import ReactDOM from 'react-dom';
let root: HTMLElement | null = document.getElementById('root');

let arr:Array<string> = ['uzi','ming','xiaohu'];
let ReactAry:Array<React.ReactElement> = [];
for( let i = 0;i < arr.length ; i++ ){
   
    ReactAry.push(<li key={
   i}>{
   arr[i]}</li>);
}

ReactDOM.render(ReactAry,root); 

React元素的更新

React元素被创建之后就不可变了，要更新的话只能创建新的元素，重新渲染，并且只会更新必要的部分（DOMdiff 前后比较）。

import React from 'react';
import ReactDOM from 'react-dom'
let root: HTMLElement | null = document.getElementById('root');

let fn = function(){
   
    let ele: React.ReactElement = (
        <div>
            <div>更新时间:</div>
            <div>{
   new Date().toLocaleTimeString()}</div>
        </div>
    )
    ReactDOM.render(ele,root)
}

setInterval(()=>{
   
    fn()
},1000)

React组件 函数式组件和类组件

注意：我们除了学习基本用法外，还要明白它们之间的优缺点，不同之处。

扩展 1） 纯函数： 没有改变自己输入的值,并且也不改变作用域外的变量。

function add(a: number,b:number){
    //纯函数
      return a + b
}
function withdraw(account: {
   name: string},num:number){
    //不是纯函数
      account.name += 'adc';
      global.name = 10
}
withdraw({
   name:'uzi'},10)

• React是单向数据流，数据只能从上往下传递，并且props是不能修改的。
• 函数组件就像是一个纯函数,因为这个函数接收了属性对象,而且是只读的.然后返回一个值，也就是：输入是确定的,输出就是确定的。
• 不过 react,vue都要剥离class组件的趋势,改用函数值组件 hooks => 类组件有的功能,函数式组件也都有。

扩展 2）函数式组件与类组件的区别：
1. 函数式组件的性能比类组件的性能要高。毕竟函数只需要执行返回对应的React元素即可，并且每次运行完成后会销毁,减少了内存的开销，而类组件还需要实例化。
2. 函数式组件 没有 this 、状态 、生命周期 ；类组件有this、有生命周期、有状态state。

函数组件的渲染	类组件的渲染
1. 收集props对象； 2.把属性对象传入函数并返回React元素； 3.把React元素渲染到页面上。	1. 也是收集props对象； 2. 实例化对应类的实例； 3. 调用实例的render方法，获得返回的React元素； 4. 把返回的元素渲染到界面上就行。

复合式组件

和普通的复合写法一样，就是注意一下 类型 即可。

import React from 'react';
import ReactDOM from 'react-dom'

let root: HTMLElement | null = document.getElementById('root');
let style: React.CSSProperties = {
    // 规范css样式的类，乱写的话会报错。
    border: '1px solid red',
    padding:5,
}
interface UpData {
    // 在定义的时候要使用泛型(接口),使用的时候要指定具体props中值的类型.(调用的是时候要使用真实的接口类型.)
    name1: string;
    name2: string
}
interface RngData {
   
    uzi: string
}
interface IgData {
   
    theshy: string
}

class RNG extends React.Component<RngData> {
    //  这里的泛型 修饰的是 this.props (传递过来的参数)
    render(): React.ReactElement{
   
        return (
            <div>
                我是RNG电子竞技俱乐部的{
   this.props.uzi}
            </div>
        )
    }
}

class IG extends React.Component<IgData> {
   
    render(): React.ReactElement{
   
        return (
            <div>
                我是IG电子竞技俱乐部的{
   this.props.theshy}
            </div>
        )
    }
}

class LPL extends React.Component<UpData>{
   
    render(): React.ReactElement {
   
    	// this.props.headString = '12' // props是不可修改的
        let {
   name1,name2} = this.props
        return (
            <div style={
   style}>
                <RNG uzi={
   name1}/>
                <IG theshy={
   name2}/>
            </div>
        )
    }
}

let data: UpData = {
   
    name1: 'uzi',
    name2: 'TheShy'
}
ReactDOM.render(<LPL {
   ...data} />,root)

如何定义默认属性（结合类型检查）

props 设置默认属性： static defaultProps = {…} ；
类型检查：static propTypes = {…} 或者 类.propTypes = {…}

import React from 'react';
import ReactDom from 'react-dom';
import PropTypes from 'prop-types'
let root: HTMLElement | null = document.getElementById('root');

interface DataProps {
   
    name?: string;
    gender?: 'male' | 'female';
    hobby?: Array<string>;
    age?: number;
    position?: {
    x: number, y: number };
    [propName: string]: any // extends Record<string,any>   29行报错解决方案
}

class Animal extends React.Component<DataProps> {
   
    static defaultProps:DataProps  = {
    // static defaultProps = {} 给props添加默认属性。
        name: 'jacklove'
    }
    // static propTypes:Record<string,any>
    static propTypes = {
    // 对props中的属性进行类型检查 <=> Animal.propTypes = {...}
        name: PropTypes.string.isRequired,
        gender: PropTypes.oneOf(['male',