当后端人员未提供接口，前端人员该怎么测试 --mock

2024-02-22 12:45:28

1、回顾

2、线上的mock

http://rap2.taobao.org/

https://www.easy-mock.com/

3、线上接口文档 Swagger

https://swagger.io/

4、react 文档

React 是一个用于构建用户界面的 JavaScript 库

4.1 元素、组件

const element = <h1>Hello, world!</h1>;
// 既不是字符串也不是 HTML。被称为 JSX，是一个 JavaScript 的语法扩展

JSX 可以生成 React “元素”。
react的关注点分离：React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。
React 不强制要求使用 JSX，也可以使用函数

// jsx
const App = (
  <div className="test">
    hello jsx
  </div>
)

// 函数
const App = React.createElement('div', {className: 'test'}, 'hello jsx')

// 注意：这是简化过的结构
const element = {
  type: 'div',
  props: {
    className: 'test',
    children: 'hello jsx'
  }
};

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

4.2 元素渲染

元素是构成 React 应用的最小砖块
组件是由元素构成的
React 只更新它需要更新的部分 --- react内部含有diff算法，采用的虚拟DOM

组件（类组件、函数式组件）, 元素就是一个变量，它的值为一段HTML代码

4.3 组件与props

组件名称必须以大写字母开头。组件可以嵌套使用。组件并不是拆分的越小越好，而是越合理越好
Props 的只读性
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
组件内部可以用状态，组件之间用props

4.4 状态

使用类组件可以设置初始化的数据（状态），函数式组件不能设置状态
State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。

4.5 生命周期

初始化阶段
运行时阶段
销毁阶段
异常处理

4.6 事件处理

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 onClick onChange

使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。

4.7 条件渲染

jsx 不 if，jsx可与、或、三目
if 可 JSX
阻断渲染

render () {
  if (!flag) {
    return false; // return null;
  }
}

4.8 列表&key

jsx 不 for，可 map
for中可jsx
列表必加key, key为变化的标识，没有变复用
遍历谁谁加key
key 只是在兄弟节点之间必须唯一

render () {
  return (
    {
      this.state.isLoading ? <Loading /> : this.state.prolist.map(item => ())
    }
  )
}

4.9 表单

受控组件

使 React 的 state 为“唯一数据源”。渲染表单的 React 组件控制着用户输入过程中表单发生的操作。控制取值的表单输入元素就叫做“受控组件”。

通过事件对象event获取值，调用setState更改值，value为表单的值，表单的值为自己组件的状态

handler (event) {
  this.setState({
    username: event.currentTarget.value
  })
}

render () {
  return (
    <div>
      <input type="text" value={ this.state.username } onChange = { this.handler.bind(this)}>
    </div>
  )
}

验证、追踪访问字段以及处理表单提交的完整解决方案： https://jaredpalmer.com/formik

非受控组件

码农公寓