react+es6+redux相关编写规范及经验记录

const list = [
{
id: '1',
name: '张三'，
age: 25
}，
{
id: '2',
name: '李四'，
age: 26
}
]

少查询,只要能在页面、或者状态树中获取到的，就不要去调用api查
熟悉自己的上下文环境
错误写法：
if(data){
/*
好长一段代码
*/
if(data && data.name){

}
}

const和let掌握，const能看出来这个变量在程序中是没有被重新赋值的
const a = yield sdfssdf
b.name = a.name

避免重复使用变量计算
错误写法：
order.create_time = new Date().getTime()
order.pay_time = new Date().getTime()

order?moment(order.create_time).format('hh:ss'):''
order?moment(order.pay_time).format('hh:ss'):''
建议：
const time = new Date().getTime()
order.create_time = time
order.pay_time = time

if(order){
//
}

能少循环的尽量少循环
例如：
list.filter(item => item.age !== 25)
const person = list.find(item => item.id === '2')
简写：
let person;
list.filter(item => {
if(item.id === '2'){
person = item
}
return item.age !== 25
})

if判断
false: null，undefined，0，NAN, '', ..., 除了这些都是true,{},[]
错误写法
a = null
if(a !== null || a !== undefined){
// ...
}
if(a !== 0){
// ...
}
正确：
if(a)

switch替换if
超过三个if...else就用switch语句，
switch是通过找一个case的地址去找到对应条件执行，ifelse是遍历所有条件知道找到，在判断分支多的情况下switch效率高
如果数量特别大，建议用object的方式
const obj = {
'1': function(){
// ...ds
},
'2': function(){
// ...ds
}
}
obj[order.status]()

定义函数传参数时，如果超过三个参数的时候用对象
例如：
const getPerson = (name, age, id, address)=>{
console.log(name, age, id, address)
}
getPerson('张三', 25, '1', '银川')
建议：
getPerson({
name: '张三',
age: 25,
id: '1'
})
const getPerson = (data)=>{
console.log(data.name, data.age, data.id, data.address)
}

各种for循环方法需要了解，并熟练掌握
处理每一项数据
list.forEach(item
console.log(item)
})

list.map(item=>{
item.createTime = new Date()
return 1
})
forEach()
find()
findIndex()
filter()
sort()
Object.keys({})
Object.values({})
Object.assign({})

不是所有的状态数据都需要放到状态树上，只有在各组件之间都需要用到的属性才放到状态树上

接口应该放到config中，不能直接写死在前端saga中
const res = yield axios.post('http://10.10.61.45:8071/get_patient', queryBody);

不能写死的字典项
const statusDict = {
'2': '候诊中',
'3': '已就诊'
}

statusDict = {
waiting: '2',
visted: '3'
}
dict[item.status]
if(item.status === )

错误写法：
if(item.status === '2'){
// ...
item.text = '候诊中'
}
{
where:{
status: '2'
}
}
正确写法：
if(item.status === statusDict.waiting){
// ...
}

{
where:{
status: statusDict.waiting
}
}

多层对象必须判断
data.person.name

调试的一个经验：
我们在saga中如果要修改到数据库时，尽量在数据处理完成后，确保无误再调用
const updateObj = {
id: '1',
age: 25,
name: '张三'
}
console.log(updateObj,'updateObjupdateObj')
return
const triage = yield axios.patch('/api/Persons', updateObj)

immutable 常用
const a = Map({
id:'123',{
id1: '1'
})
const b = List([{
id: '1',
name: '张三'，
age: 25
}，
{
id: '2',
name: '李四'，
age: 26
}])

b.get(0)
a.getIn(['id','id1',';;;','ll'])
a.id.id1

b = {
id:'1'
name: 'zahngsan'
}
a.set('id','2') setIn(['id','id1'],'2')
merge(a,b)

养成写注释的习惯，代码是写给人看的

重复代码超过两遍就要单独封装了

命名规范问题，不要太长了

做东西不是我给你们说什么就做什么，首先你自己要有一个想法，最后东西完成以后你应该考虑如果是你自己用这个功能用的体验好吗