前端进阶-react(3)

1.安装ts版项目

create-react-app my-app --template typescript

ts语法

// String(原生的构造函数) vs string (ts中的类型)
var myname:string = "字符"
var mybool:boolean = false
var mynumber:number = 100
var mylist:Array = ["111","222","3333"]
var myname2:string | number | boolean = 100
var myname3:string | number = "kerwin"
var mylist2:Array = [1,2,"kerwin"]
var mylist3:(string| number)[] = [1,2,"kerwin"]

interface MyInter {
  name:String, //必选属性
  readonly country:String,//只读属性
  getName?:(name:sting)=>string//定义方法

   [propName:string]:any
}

 MyObj:MyInter={
 name="kerwin"
 country="China"
 private age = 100 //私有属性， 不能在接口定义
 getName(name:string){
   //...

return name
 }
 private getAge(){
   //...
 } //私有方法， 不能在接口定义

function Test(list:String[],text?:String,...args:String[]):void{
    console.log(list,text,args)
 }
  Test(["1111","2222"])

interface SearchFunc {
(source: string, subString: string): boolean;
}
//对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
 let result = src.search(sub);
 return result > -1;
} 

interface objFunc {   //objFunc约束这一个类必须含有getName方法
getName: ()=>boolean;
}

class MyObj implements objFunc {

        getName(){

return name

}

}

变量前加下划线表示不被该组件或该文件以外给访问到。例如_list

private protect  public   

对于类组件的ts约束

 const mytext = useRef(null)

 函数组件的约束

const [list,setlist]=usestate([])

//子组件接受属性 -1
interface iprops {
  count:number
}
const Child:React.FC = (props)=>{
  return

    child-{props.count}
  

}

 useContext

interface IContext{
 call:string
}
const GlobalContext = React.createContext({
 call:"" //定义初始值,按照接口规则
})
     call:"电话"
}}>
   ....

const {call} = useContext(GlobalContext)

安装第三方的包时，

路由的约束

会用断言

interface IParams{
  id:string
}

// 使用编程式导航，需要引入接口配置
import { RouteComponentProps } from "react-router-dom";
interface IProps {自己定义的接口}
type HomeProps = IProps & RouteComponentProps; //两个接口属性都支持
interface IState {}
class Home extends React.Component {

}

redux的约束

import {createStore} from 'redux'
interface ActionInter{
  type:String,
  payload:any
}
const reducer  = (prevState={},action:ActionInter)=>{
  return action.payload
}
const store = createStore(reducer,//enhancer)
export default store

  styled-components:组件内写样式

 单元测试

react-test-renderer

test下创建文件A.test.js，运行时是npm test

浅查询，查询字段与增加删除

 删除

enzyme

安装enzyme与@wojtekmaj/enzyme-adapter-react-17

redux-saga

之前处理redux异步函数的是redux的中间件redux-chunk,

理解生成器

saga的使用

1.监听生成器

2.运行生成器

3.

可以简写

4.

5.

首页懒加载

//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));

Loading...

}>
    {
      this.state.visible
       ?
       
      :
       null
    }