devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

TypeScript(二)--React与TS_react ts

作者：凡人多烦事01 | 2024-02-07 14:27:47

赞

踩

react ts

目录

一、扩展 npx

二、class组件的创建

2.1、数据传递

2.2、状态

2.3、正向传值

2.4、逆向传值

 2.5、Ref的使用

三、函数组件的创建

3.1、正向传值

 3.2、Ref的使用

四、useState--函数组件可以使用状态

4.1、定义对象

4.2、定义数组对象

五、useRef

六、路由

创建项目 create-react-app 项目名 --template typescript

一、扩展 npx

创建项目：npx create-react-app 项目名 --template typescript

在 npm version >= 5.2.0 开始，自动安装了npx。

npx 这条命令会临时安装所依赖的环境。命令完成后原有临时下载的会删掉，不会出现在 全局中。下次再执行，还是会重新临时安装。不用全局安装，不用担心长期的污染。

也就是说 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装

二、class组件的创建

1、创建一个tsx后缀名的文件

2、在需要的位置引用使用 但是引用的时候可能会出错

3、在引用时候不要加后缀名

2.1、数据传递

使用传统的方式进行数据传递的时候发现会报错！

所以：在进行数据传递的时候要使用 interface接口对类型限制 在子组件中进行限制设定

2.2、状态

直接定义状态会出现问题，需要使用接口

2.3、正向传值

左边为Fu.tsx,右边为Zi.tsx。

2.4、逆向传值

 左边为NiFu.tsx,右边为NiZi.tsx.

 2.5、Ref的使用

  1. import React, { Component, createRef } from 'react'
  2. export default class RefCom extends Component {
  3.     myinput=createRef<HTMLInputElement>()
  4.     fun=()=>{
  5.       // 类型断言
  6.         console.log((this.myinput.current as HTMLInputElement).value);
  7.     }
  8.   render() {
  9.     return (
  10.       <div>
  11.           {/* <h1>ref的使用</h1> */}
  12.           <input type="text" ref={this.myinput}/>
  13.           <button onClick={this.fun}>点我得到输入框的值</button>
  14.           </div>
  15.     )
  16.   }
  17. }

三、函数组件的创建

函数组件---无状态组件 可读性非常好 减少了大量的冗余代码 因为在函数组件中 只有一个jsx 简化了创建组件的便捷性

函数组件不会被实例化 渲染性能就大大提升了

函数组件中不用使用this

函数组件代码精简不用实例化 可以尽可能少的节省创建时候的内存消耗 提高性能

函数组件在默认情况下不能使用 状态 不能使用ref 不能使用生命周期

FC就是FunctionComponent的缩写ts+react编写组件的语法

  1. // 后面的<>是范型 中间的{}是没有props state占位的
  2. export let Home:React.FC<{}>=()=>{
  3.     return (
  4.         <div>我事一个函数组件</div>asd
  5.     )
  6. }

3.1、正向传值

 3.2、Ref的使用

  1. import React, { useRef } from 'react'
  2. const Demoref:React.FC<{}>=()=>{
  3.     let demop=useRef<HTMLParagraphElement>(null)
  4.     let fun=()=>{
  5.         (demop.current as HTMLParagraphElement).style.color="red";
  6.     }
  7.     let demoinput=useRef<HTMLInputElement>(null)
  8.     let funb=(()=>{
  9.         console.log((demoinput.current as HTMLInputElement).value); 
  10.     })
  11.     let demodiv=useRef<HTMLDivElement>(null)
  12.     let func=()=>{
  13.         console.log((demodiv.current as HTMLDivElement).style.backgroundColor='gray'); 
  14.     }
  15.     return (
  16.         <div>
  17.             <p ref={demop}>点击按钮修改我的颜色</p>
  18.             <button onClick={fun}>点我修改</button>
  19.       <hr/>
  20.       <input type="text" ref={demoinput}/>
  21.       <button onClick={funb}>点我得到值</button>
  22.       <hr/>
  23.       <div ref={demodiv} style={{width:"500px",height:"500px",
  24.       backgroundColor:'pink'}}></div>
  25.       <button onClick={func}>点我修改</button>
  26.         </div>
  27.     )
  28. }
  29. export default Demoref

四、useState--函数组件可以使用状态

useState()就是React提供最基础、最常用的Hook，主要用来定义和管理本地状态。

tsx的写法

  1. import {useState} from "react"
  2.  let Home:React.FC<{}>=()=>{
  3.     //  创建状态  使用泛型约束状态的类型
  4.     let [text,setText]=useState<string>("你好")
  5.         return (
  6.             <div>
  7.                 使用useState数据---{text}
  8.             </div>
  9.         )
  10.     }
  11.     export default Home

修改

  1. import {useState} from "react"
  2.  
  3.  let Home:React.FC<{}>=()=>{
  4.     //  创建状态
  5.     let [text,setText]=useState<string>("你好")
  6.     let fun=():void=>{
  7.         // 修改状态
  8.         // 两种都可以 setText(text="你坏")
  9.         setText("我改了")
  10.     }
  11.         return (
  12.             <div>
  13.                 使用useState数据---{text}
  14.                 <button onClick={fun}>点我修改</button>
  15.             </div>
  16.            
  17.         )
  18.     }
  19.     export default Home

4.1、定义对象

1.声明对象类型的状态

  1. import {useState} from "react"
  2. //定义接口约束 类型
  3. interface IText{
  4.     a:String,
  5.     b:number,
  6.     c:string
  7. }
  8.  
  9. let Home:React.FC<{}>=()=>{
  10.     //  创建对象类型状态
  11.     let [text,setText]=useState<IText>({
  12.         a:"第1",
  13.         b:666,
  14.         c:"第3",
  15.     })
  16.     // 定义数组数据
  17.     let [arr,setarr]=useState<number[]>([111,2222,3333,44444])
  18.    
  19.         return (
  20.             <div>
  21.                 使用useState数据---{text.a}----{text.b}---{text.c}
  22.                 <br />
  23.                 使用数组 --{arr[1]}
  24.             </div>
  25.            
  26.         )
  27.     }
  28.     export default Home

修改

  1. import {useState} from "react"
  2. //定义接口约束 类型
  3. interface IText{
  4.     a:String,
  5.     b:number,
  6.     c:string
  7. }
  8.  
  9. let Home:React.FC<{}>=()=>{
  10.     //  创建对象类型状态
  11.     let [text,setText]=useState<IText>({
  12.         a:"第1",
  13.         b:666,
  14.         c:"第3",
  15.     })
  16.     // 定义数组数据
  17.     let [arr,setarr]=useState<number[]>([111,2222,3333,44444])
  18.    
  19.  
  20.     let fun=():void=>{
  21.         // 修改状态
  22.         setText({...text,a:"我变了"})
  23.     }
  24.     let funb=():void=>{
  25.             // 使用扩展运算符来进行深拷贝 （注意扩展运算符扩展第一层是深拷贝 第二层还是浅拷贝）
  26.             let newarr=[...arr];
  27.             newarr[1]=777
  28.             // 修改数组
  29.             setarr(newarr)
  30.             console.log(newarr)
  31.     }
  32.         return (
  33.             <div>
  34.                 使用useState数据---{text.a}----{text.b}---{text.c}
  35.                 <button onClick={fun}>点我修改a</button>
  36.                 <br />
  37.                 使用数组 --{arr[1]}
  38.                 <button onClick={funb}>点我修改arr</button>
  39.             </div>
  40.            
  41.         )
  42.     }
  43.     export default Home

4.2、定义数组对象

  1. import {useState} from "react"
  2. //定义接口约束 类型
  3. interface IObj{
  4.     name:String,
  5.     age:number,
  6.     sex:string
  7. }
  8.  
  9. let Home:React.FC<{}>=()=>{
  10.     let [obj,setobj]=useState<IObj[]>([
  11.         {name:"xixi1",age:181,sex:"男1"},
  12.         {name:"xixi2",age:182,sex:"男2"},
  13.         {name:"xixi3",age:183,sex:"男3"},
  14.         {name:"xixi4",age:184,sex:"男4"}
  15.     ])
  16.         return (
  17.             <div>
  18.                 {
  19.                     obj.map((v,i)=>{
  20.                         return (
  21.                             <h1 key={i}>{v.name}--{v.age}--{v.sex}</h1>
  22.                         )
  23.                     })
  24.                 }
  25.             </div>
  26.            
  27.         )
  28.     }
  29.     export default Home

修改数组对象

  1. import {useState} from "react"
  2. //定义接口约束 类型
  3. interface IObj{
  4.     name:String,
  5.     age:number,
  6.     sex:string
  7. }
  8.  
  9. let Home:React.FC<{}>=()=>{
  10.     let [obj,setobj]=useState<IObj[]>([
  11.         {name:"xixi1",age:181,sex:"男1"},
  12.         {name:"xixi2",age:182,sex:"男2"},
  13.         {name:"xixi3",age:183,sex:"男3"},
  14.         {name:"xixi4",age:184,sex:"男4"}
  15.     ])
  16.  
  17.     let fun=()=>{
  18.         let newobj=[...obj]
  19.         newobj[1].age=666
  20.  
  21.         setobj(newobj)
  22.     }
  23.         return (
  24.             <div>
  25.                 {
  26.                     obj.map((v,i)=>{
  27.                         return (
  28.                             <h1 key={i}>{v.name}--{v.age}--{v.sex}</h1>
  29.                         )
  30.                     })
  31.                 }
  32.                 <button onClick={fun}>点我修改第二条的age</button>
  33.             </div>
  34.            
  35.         )
  36.     }
  37.     export default Home

五、useRef

hooks中可以通过 useRef()获取Dom节点

  1. import {useRef} from "react"
  2.  
  3.  let Home:React.FC<{}>=()=>{
  4.     // 指定为p标签类型
  5.     let u=useRef<HTMLParagraphElement>(null)
  6.  
  7.     let fun=():void=>{
  8.         // 我断定他是html p标签类型
  9.       (u.current as HTMLParagraphElement).style.color="red"
  10.     }
  11.         return (
  12.             <div>
  13.                 <p ref={u}>修改我的颜色</p>
  14.                 <button onClick={fun}>点我修改a</button>
  15.             </div>
  16.            
  17.         )
  18.     }
  19.     export default Home

试着使用ref得到输入框的值

props的使用

  1. sinterface IUser{
  2.     title?:String
  3. }
  4.  
  5. export let Home:React.FC<IUser>=(props)=>{
  6.         return (
  7.             <div>我是一个函数组件---{props.title}</div>
  8.         )
  9.     }

父组件正常传递

六、路由

ts+react-router-dom又有那些不同

1.下载 npm i --save-dev @types/react-router-dom@5

2.创建router文件夹 并且创建容纳路由配置的 index.tsx 与views文件夹

3.引用路由文件到全局配置文件index.ts中 并且指定路由模式

此时我们在引用react-router-dom的时候会出现问题 提示无法找到声明文件

  1. import React from 'react';
  2. import ReactDOM from 'react-dom/client';
  3. import './index.css';
  4. // 1.指定根路径为路由文件
  5. import App from './router/index';
  6. // 2.引用路由模式    但是此时会提示问题  原因是因为无法找到模块“react-router-dom”的声明文件
  7. import {BrowserRouter} from "react-router-dom"
  8.  
  9. const root = ReactDOM.createRoot(
  10.   document.getElementById('root') as HTMLElement
  11. );
  12. root.render(
  13.     <BrowserRouter>
  14.       <App />
  15.     </BrowserRouter>
  16. );

解决 需要安装声明文件 npm intall --save @types/react-router-dom@5 即可解决 ，一次成功可忽略。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/65977?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号