react
2422400672
这个作者很懒,什么都没留下…
展开
-
react测试(5)jest Mock Functions
Mock 函数可以使用来测试代码之间的连接,即用来测试函数被调用的参数,返回值,调用了几次等等测试函数被调用的参数和返回值创建一个Mock Functions //定义一个调用一定此时回调函数的方法 function useCallBack(callback, count){ for (let i = 0; i < count; i++){ callback(i) } }原创 2020-08-08 17:54:58 · 515 阅读 · 0 评论 -
react 测试 (4) jest 异步代码测试
interface.js中放着调用接口的方法,假设我们要测试greeting接口的返回数据,或者经过业务处理后的数据//interface.jsimport axios from "axios"//返回数据型export const getGreeting = function(){ return new Promise((resolve, reject) => { axios.post("/greeting").then(response => resolv原创 2020-08-08 12:26:48 · 376 阅读 · 0 评论 -
react测试 (4) msw
Mock Service Worker(MSW)可以用于api的模拟,让前端在开发或者测试时不需要依赖后端的接口,msw不仅可以用在测试中,还可以在起的开发环境中使用node中使用,比如在测试用例中使用定义出我们需要的请求//handlers.jsimport { rest } from 'msw'export const handlers = [ //定义一个greeting的get请求 rest.get("/greeting",(req, res, ctx)=>{原创 2020-08-08 00:42:12 · 929 阅读 · 0 评论 -
react测试 (3) Testing Library
Testing Library是一个使用非常方便的测试辅助工具安装在脚手架创建的react项目中开箱即用npm install --save-dev @testing-library/react组件一个类似官网的示例import React, { useState, useReducer } from 'react'import axios from "axios"const initState = { error: null, greet: null}functio原创 2020-08-07 22:36:20 · 1797 阅读 · 1 评论 -
react测试 (2) Test Renderer
Test Renderer主要用于将 React 组件渲染成纯 JavaScript 对象,它可以配合jest的快照测试对ui组件进行测试,简单来说就是比较当前组件的快照是否和上次测试的快照相同,以避免开发人员无意的对ui组件的修改而导致问题。由于我没有写单纯的ui组件,我就用一个图片切换的组件进行演示组件import React, {useReducer} from 'react';interface cardState { urlPre: string; url: string原创 2020-08-07 00:42:15 · 822 阅读 · 0 评论 -
react测试(1)Test Utilities
由于我是用的是脚手架创建的react项目,所以测试所需要的库都是安装好的,如果非脚手架创建还需要安装相应的库组件我们用一个很简单的组件来举例,点击Reset按钮,count被设置为初始值,点击加号按钮或者减号按钮,count对应加一减一import React from "react"export default function MyCounter({initialCount}) { const [count, setCount] = React.useState(initialCoun原创 2020-08-06 23:47:27 · 389 阅读 · 0 评论 -
react hook(3) useCallback和useMemo
useCallback和useMemo返回一个memoized的回调函数或者一个memoized的值,只有当其传入的依赖项数组发生变化后才会发生改变。useCallback const [count, setCount] = useState(1); const [val, setVal] = useState(1); const callBack = useCallback(()=>{ return count; },[count])上面代码原创 2020-08-02 14:22:59 · 233 阅读 · 0 评论 -
react hook(2)useImperativeHandle
useImperativeHandle 可以结合ref将自定义的值,方法暴露给父组件,直接看代码import React, {useImperativeHandle} from "react"//定义props的接口,ref接口interface ImProps { value: string;}interface ImRef { printValue: () => void;}const Imperative = React.forwardRef<ImRef原创 2020-08-01 00:16:03 · 751 阅读 · 0 评论 -
react hook(1)useState
在渲染函数中像在class中一样使用state先看一个可以暂停的时钟的例子import React, {useEffect, useState} from "react"//这里这样写是因为我使用了typescript,不需要的可以忽略,重点看函数里的实现interface Interface {}const MyTime: React.FC<Interface> = (props: Interface)=>{ // useState 可以返回一个 state,以及更原创 2020-07-31 00:24:46 · 297 阅读 · 0 评论 -
react项目中引入typescript
新建项目使用typescript如果你是要新建一个使用typescript的react项目,并且你用脚手架Create React App去创建,那没就非常的容易,你只需要在创建的时候将命令改为npx create-react-app "你的项目的名称" --template typescript已有项目引入typescript如果你是要在已有的react项目引入typescript或者你想创建一个新的react项目但是不想使用Create React App,那么你必须手动的安装typescri原创 2020-07-28 23:01:35 · 5629 阅读 · 0 评论 -
react中使用第三方类库
在这里我们采用官网的Chosen来举例引入第三方类库下载第三方类库jquery.min.js,chosen.jquery.js,chosen.css,这些第三方类库可以到对应官网下载,然后在我们的react项目的index.html中引入 <link rel="stylesheet" href="./chosen.css"> <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script原创 2020-07-25 21:42:16 · 1091 阅读 · 0 评论 -
react Refs 转发
一个使用ref的组件import React from 'react';export default class Card extends React.Component { render() { //从props中分离出ref(forwardedRef),应为ref是无法透传的,ref引用input元素 const {forwardedRef, ...rest} = this.props; return <div className={"w原创 2020-07-23 00:07:04 · 219 阅读 · 0 评论 -
react Context
创建一个Contextimport React from 'react';//创建一个默认值为light的Contextconst theme = React.createContext("light");export default theme;使用Contextimport React from 'react';import ReactDOM from 'react-dom';import App from './App';import Theme from "./theme"原创 2020-07-22 21:11:16 · 145 阅读 · 0 评论 -
react使用react-redux管理应用数据
这里我已一个商品页面的简单demo来说明react-redux的使用一:安装所需要的依赖npm install --save redux npm install --save react-redux npm install --save redux-thunknpm install --save cross-fetch二:在一个模块目录下创建3个文件Goods.js actio...原创 2019-04-06 03:16:51 · 126 阅读 · 0 评论 -
react项目引入路由组件react-router-dom
步骤一: 安装react-router-dom,进入创建好的react项目,执行以下命定即可安装好路由组件npm install react-router-dom步骤二: 创建文件router.js用作react的路由,该文件主要为指定react的路由规则,匹配路径与相对应的页面组件,其中Home组件为页面的导航栏组件,用户改变当前的路径以跳转到相应的页面,即当路径为/cart,页面就会跳转...原创 2019-03-24 14:42:00 · 2911 阅读 · 1 评论 -
通过react脚手架搭建react项目
步骤一: 安装react脚手架 create-react-app (确保nodejs和npm是可用的)npm install -g create-react-app等待安装完成后可以打开使用cmd输入以下命令react脚手架是否可用create-react-app如果可用则会呈现如下的结果,之后就可以用安装好的脚手架进行react的创建了如果该命令不可用就需要检查当前的环境变量是否...原创 2019-03-23 23:46:38 · 366 阅读 · 0 评论