开发优秀写法
方法内声明变量
注意数据不可变性
const items = useMemo(() => {
const _items = [deps, ...add];
return _items;
}, [deps, add]);
用箭头函数分隔代码
jsx 中的函数会自动执行
<div>
{() => {
return <span>1</span>;
}}
</div>
Form.field 的 Children 一般可以直接非受控
因为该组件对 children 有拦截，如果是函数会传入参数
<Form.field>
{(value, onChange) => {
return <span>{value}</span>;
}}
</Form.field>
正则表达式在外部创建
const reg = /111/;
const fc = () => {};
多个条件判断可以改为数组
const EMPTY = [null, undefined, ""];
if (EMPTY.includes(a)) {
}
react 不推荐使用&&条件渲染
condition && <Component />;
大部分情况下&&都会生效，但是当第一个值不是 Boolean 类型时，就会出现问题
-
如果 condition 为 0 ，则在 UI 中显示为 0
-
如果 condition 未定义，将会抛出错误：未捕获的错误：错误：没有从渲染返回
不渲染应返回 null
condition ? <Component /> : null;
或者转化为 boolean 类型，但是可读性较差
常用
!!condition && <Component />;
再举个例子
console.log(0 ? 1 : 2); // 2
console.log(0 && 2); // 0
利用对象字面量（map）
对象字面量可以使代码更具有可读性，假如想根据角色显示三种类型用户，不能使用三元， 因为选项数量超过两个
而用 switch 写起来比较麻烦
const { role } = user;
// 对象字面量
const compoents = {
ADMIN: Administer,
EMPLOYEE: EmployeeUser,
USER: NormalUser,
};
const Component = components[role];
return <Component />;
使用 Fragments 语法
始终使用 Fragments 而不是 div
保持代码整洁且有利于性能
<></>
不要在渲染 render 中定义函数
定义变量可能会有闭包风险 但是函数完全可以定义在渲染外，防止重复渲染的性能消耗
组件命名
始终对组件使用 PascalCase （首字母大写）
对实例使用 CamelCase
import ReservationCard from "./ReservationCard";
const resevrvationItem = <ReservationCard />;
引号
对 JSX 属性使用双引号，对所有其他 JS 使用单引号
<Foo bar="bar" />
<Foo style=={{left: '20px'}}>
如果 prop 值是 react 组件，则始终使用 PascalCase 作为 prop 名称
<MyComponent
userName="hello"
Component={<SomeComponent/>}
><MyComponent/>
方法（尤其暴露方法）重要参数前置
可缺省参数后置并设置缺省值
fun(obj[,config])
fun(obj,config={})
函数参数过多（多于 3）创建 object 数据体
但是缺点是无法在数据体内突出核心
fun(a, b, c);
fun({ a: 1, b: 1, c: 1 });
所有 setter 类操作返回 this
一般都是返回 void，但是 js 可以返回 this 直接实现链式调用，优化可读性
事件机制只能选择其一
object.onDoSomething = func;
object.on("doSomething", func);
subType 扩展
// render logic
switch(feed.type) {
case 'item':
...
break
case 'other':
break
default:
break
}
如果增加一种 type: smallItem, 会默认进入 default 分支
考虑 smallItem 应该归为 Item 分支
完全可以增加 subType,而 type 保持为 item
API 名称不应该太具体，保持高抽象度
render和renderAtFirst
便于背后逻辑变更，而不需要用户替换 API 或了解细节
收敛 API
function renderPage() {
renderHeader();
renderSidebar();
renderFooter();
}
function renderPage() {
rederSections(["header", "Sidebar", "Footer"]);
}
利用 instanceof 聚合函数
function render(vehicle){
if(vehicle instanceof car){
...
}
}
延时操作
一般可以用setTimeout
涉及动画可以用requestAnimationFrame(callback)请求下一个动画帧
利用浏览器底层可以用requestIdleCallback
该 API 比较新，可以先面向接口编程，做一个 polyfill
解构实现增加和删除对象的键
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // original 也被修改
delete copy.a; // 通过 delete 运算符去除指定属性
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
不用展开语法映射（mapping）可迭代对象
即[...arr].map()
直接使用Array.from
const baz = Array.from(foo, bar);
尽量不使用 props 透传
除非在高阶组件的使用场景中，否则避免使用展开语法直接传递 this.props 给内部组件，应尽可能筛选出不必要的属性后再传入。
render() {
return <WrappedComponent {...this.props} />
}
render() {
const { irrelevantProp, ...relevantProps } = this.props;
return <WrappedComponent {...relevantProps} />
}
在自闭合标签尾部保留一个空格
定义 displayName
// 对于使用高阶组件生成的组件类，应当定义 displayName，该名称由高阶组件的名称和传入的组件名称组合而成
export default function withFoo(WrappedComponent) {
function WithFoo(props) {
return <WrappedComponent {...props} foo />;
}
const wrappedComponentName =
WrappedComponent.displayName || WrappedComponent.name || "Component";
WithFoo.displayName = `withFoo(${wrappedComponentName})`;
return WithFoo;
}
请求特殊条件下才发送要做返回处理
多个请求，每个请求各自在其特殊条件下才需要发出
预设每个请求为new Promise({code:成功代码})进行占位
这样就算不需要在当前条件下触发，也不会触发失败提示
接着将多个请求放在数组里管理
如果当前条件下需要触发，将数组中该项更新为真实请求
最后数组用 Promise.all 拿结果