基本概念
React
是一个用于构建用户界面的Javascript库,是DOM
的一个抽象层React
主要用于构建UI
状态管理
State
Props
Effect Hook
- 副作用:数据获取、设置订阅、手动更改DOM
- 可以把
useEffect Hook
看作componentDidMount、componentDidUpdate、componentWillUnmount
这三个函数的组合 - 默认
useEffect
在第一次渲染之后和每次更新之后都会执行 - 在函数组件中执行副作用操作,可以直接使用
state
,不用编写class
1 | import React, { useState, useEffect } from 'react'; |
路由
- 主要使用的是
React Router
,包括react-router
,react-router-dom
,react-router-native
1 | import { Switch, Route } from 'react-router-dom' |
组件
组件属性
动态添加元素样式
style
1
<div style={{display: this.state.show ? "block" : "none"}}>动态样式</div>
动态添加类
class
1
<div className={this.state.show ? "show-class" : "hide-class"}>动态类</div>
常用组件
Prompt
- 在路由即将切换前弹出确认框(离开前确认)
- 需要注意的是,如果用户点击了取消,那么会组织路由的切换,但是用户的点击事件如果有监听,依然会触发点击事件的
- 最好在
message
里面判断是否需要展示Prompt
,不要在when
里面,因为在when
里面,每次重新render
都会执行,但是message
里面只是在用户真的打算跳转的时候才会执行
1 | <Prompt |
JSX语法
基本语法
1 | <div tabIndex="0">ttt</div> // 可以使用双引号来直接指定属性值 |
代码片段fragments
- 为一个组件添加元素,并且不会在DOM中增加额外的节点,常规的做法是在外层包一个
div
,这样就会多一层DOM元素,为了减少元素数量,可以这样做
1 | return ( |
条件渲染
如果是在JSX
外部的js
部分代码,那么直接使用js
自己的if
或者其他条件判断即可完成。在JSX
内部的话一般则是使用逻辑与&&
或者三目运算符完成。例如
1 | render() { |
必备三方组件
React-Redux
从后端的角度看,就是一个维护全局变量的东西
Action
定义了要发生什么,并且携带着数据,reducer
用来定义发生该事情后需要做什么,selector
可以理解是从state
获取数据的API。Redux
可以通过connect
方法,将store
的dispatch
方法保存到组件的props
中state
与props
的对应通常需要使用mapStateToProps
这个函数进行定义。它默认会订阅Store
,每当state
更新的时候,就会自动执行,重新计算UI组件的参数下面的方法在跟组件外面包了一层
Provider
,这样所有的子组件默认都能拿到store
了
1 | import { Provider } from 'react-redux' |
- 可以用
connect
将组件与store
进行连接,它可以接收四个参数:mapStateToProps(state, ownProps) : stateProps
,第一个参数就是Redus的store
,这个方法的返回值就会作为组件的props
Redux-Saga
从后端的角度看,就是在启动应用的时候,再启动一些单独的线程,这些线程可以异步去做些更改变量或者监听的事情,类似于钩子。
可以在这里对异步操作进行集中处理。
Effect
的几种方法:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import {take,call,put,select,fork,takeEvery,takeLatest} from 'redux-saga/effects'
// take: 用来监听action,返回监听到的action对象,例如如果有一个type=login的action,那么在执行dispatch(loginAction)之后,就可以这样获取对象
const action = yield take('login')
// call: 调用指定函数
yield call(myfunc, param1, param2);
// put: 触发dispatch,用于发送action,dispatch in saga
yield put({type: 'login'})
// select: 和getState类似,用于获取store中的state
const state = yield select()
// fork
// takeEvery/takeLatest: 用于监听简单的例子:
1
2
3
4
5
6
7
8
9
10
11// 在编写saga的文件里面一般这样写钩子函数
export function * mySaga(action) { // 这里的参数action,是包含了payload,state的对象
console.log("Hello Saga");
}
// 在main.js中,这样引入saga中间件
import createSagaMiddleware from 'redux-saga';
import {helloSaga} from './saga.js';
const sageMiddleware = createSagaMiddleware();
const store = createStore(rerducer, aplyMiddleware(sagaMiddleware));
sagaMiddleware.run(helloSaga);saga
中使用fetch
1
2
3function* onGetSuccess(state) {
const res = yield fetch("https://example.com").then(response => response.json());
}
Redux-actions
将redux-actions
和react-sage
配合使用可以简化大量的重复代码。在之前我们要创建一个action
需要线这样子定义:
1 | // 在使用redux-actions之前,需要这样创建一个action并使用 |
Styled-Components
- 目的是将
React
组件包装成Styled
组件
1 | import { Card } from 'antd'; |
SWR
state-while-revalidate
的缩写,是HTTP RFC 5861
中描述的一种Cache-Control
扩展React
的Hook
组件,用于缓存从远端获取的数据- 常用语多次请求相同URL获取数据,或者更新数据后,先返回缓存的响应,与此同时去后台发送新的请求,以提高响应速度,减少等待时间
- 请求的结果根据标识
key
放在redux
里缓存,取数据的时候直接从redux
里面取 SWR
并不是一个请求库,只是一种管理数据的方式
1 | import useSWR from 'swr'; |
事件
支持事件列表
1 | // 焦点事件 |
TroubleShooting
React 表达式必须有一个父元素: 常出现在
JSX
的渲染的内嵌语句中返回了错误格式的结果:1
2
3
4
5
6
7
8
9render() {
return (
{
[ // 需要返回的应该是数组而不是混搭
<p>abc</p>,
<p>def</p>,
]
})
}