框架

笔记

1. 设置反向代理解决跨域问题

  • src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        '/api1',
        createProxyMiddleware({
            target: '<http://localhost:5000>',
            changeOrigin: true,
        })
    )
}

2. 路由

  1. 注册路由
  1. 匹配到就不再往下匹配: <Switch></Switch>
  1. token未授权重定向到/login; 路径全不匹配重定向到/home
<Route path="/" render={()=>
    localStorage.getItem("token")?
    <MainPage ></MainPage>:
    <Redirect to="/login"/>
}/>
<Redirect from="/" to="home" exact></Redirect>
<Route path={"*"} component={NoMatch}></Route>
  1. 菜单刷新后仍选择之前选择的菜单
const selectKeys = [props.location.pathname]
const openKeys = ["/" + props.location.pathname.split("/")[1]]

<Menu selectedKeys={selectKeys} defaultOpenKeys={openKeys}>
   {renderMenu(menu)}
</Menu>

3. 关联请求

关联通俗来讲就是把上一次请求的返回内容中的部分截取出来保存为参数，用来传递给下一个请求使用。
  • _embed: http://localhost:8000/posts?_embed=comments
  • _expend: http://localhost:8000/comments?_expand=posts

4. Form

  • ref
    • 字符串形式的ref
      • <input ref="input1"/>
    • 回调形式的ref
      • <input ref={(c)=>{this.input1 = c}}/>
    • createRef: this.formRef.current
      • myRef = React.createRef() 
<input ref={this.myRef}/>
  • 用ref属性时出现问题：setState和访问ref是异步，modal还未加载迟来，取不到其属性，需把两个变成同步执行
setTimeout(() => {
	this.setState({isModal: true})
	this.formRef.current.setFieldsValue(item)
}, 0)

5. 权限

  1. 菜单动态创建
  1. 路由动态创建
      • 点击跳转的地址也要加入到路由注册

6. Redux

  • 三大原则
    • 单一数据源
    • State是只读的
    • 使用纯函数来执行修改
  • Store
    • 只有一个Store
    • 多个reducer使用combineReducers()进行合并
  • react-redux
    • <Provider store={store}></Provider>
    • connect(mapStateToProps, mapDispatchToProps)(Component)

Else

1. loading

可使用拦截器，状态存在redux中：在网络请求发送时设为true，收到response设为false

2. 表单外加元素

  1. 24栅格加一列
  1. 在表单Item外加内容
.voltage {
		float: right;
		position: relative;//位置相对于正常位置
		bottom: 43px;
		right: 40px;
}
<Item>...</Item>
<a className={styles.voltage} onClick={this.autoCompleteThresholdDown}>
		Item外面的a
</a>
<Item>...</Item>

3. 避免side effect

Error: Too many re-renders.
error: 页面加载时加载数据，加载数据引起页面刷新，导致疯狂加载

4. <></>和<React.Fragment></React.Fragment>

React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。
空标签无法传属性，React.Fragment可以

语言

1. JS

  • 解决item为undefined问题：
    • item?.length !== 0
    • (item || []).length !== 0
  • toString()
[1, 2, 3].toString() // '1, 2, 3'
[1].toString() // '1'

2. TypeScript

  1. 对象访问问题
/**
以下方式访问会报错: key是*类型但什么什么*类型不行, 总之无法通过map[key]进行访问
TEST_MAP = {
		[key1]: name1,
		[key2]: name2,
}
TEST_MAP[key1]
**/

// 解决方案1
getKeyValue = <T extends object, U extends keyof T>(obj: T, key: U): T[U] => obj[key]

// 解决方案2 (大佬写法)
export const PARAM_UNIT_TYPE_MAP: Record<string, {name: string}> = {
    [PARAM_UNIT_TYPE_SPEED]: {name: '速度均方根'},
    [PARAM_UNIT_TYPE_VIB]: {name: '振动加速度'},
    [PARAM_UNIT_TYPE_TEM]: {name: '温度'},
}
  1. 子类super父类的箭头函数报错
      2. 箭头函数本质是父类的一个属性，而非函数，所以无法super.func()调用

Ant Design

1. Row、Col

<Col span={%d}></Col>
//%d为在24栅格中所占用的格数

2. Modal生命周期与销毁

// 第一种
<Modal
	{..props}
>
{nodeChildren}
</Modal>
//--------------------------
// 第二种
{isModal && (
	<Modal
		{..props}
	>
	{nodeChildren}
	</Modal>
)}
第二种的意义在于，当Modal隐藏时删除Modal在DOM上的引用(可能引用说法不准确)；第一种会单只Modal只会创建一次，从而使用生命周期钩子时存在问题，第二种可以解决

3. Form的子组件不受控

ant design官方文档：
被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
badge