1、回顾
2、线上的mock
3、线上接口文档 Swagger
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
- 非受控组件