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

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

• 非受控组件