我初学 React 那会儿，天天在组件里 new User()，结果页面卡得跟 PPT 一样；后来才发现，把 User 改成工厂函数不仅代码短一半，性能还飞起。下面我就用 3 步把自己踩过的坑和现在的写法一次性说明白。
1. 工厂函数到底长什么样
我最早把「只要返回一个新对象，而且不用 new」的函数叫小工厂。比如给应用造用户：
const createUser = ({ firstName, lastName, email }) => ({
firstName,
lastName,
email,
fullName() { // 注意这里的 `this`
return `${this.firstName} ${this.lastName}`;
},
});
const u1 = createUser({ firstName: 'John', lastName: 'Doe', email: 'john@doe.com' });
console.log(u1.fullName()); // John Doe
关键点：
- 形参直接解构，一口气把字段收齐
- 用对象字面量直接返回，省掉大括号+return
2. 动态键名的黑科技
过去我看到别人写 obj[key] = value 就头大，其实 ES6 的计算属性能让工厂函数一秒生成任意结构：
const createKV = ([key, value]) => ({ [key]: value });
createKV(['platform', 'React']); // { platform: 'React' }
记住：中括号里放变量，键名就活了。
3. 性能抉择：工厂 vs 类
我曾经以为「工厂永远快」，结果在 V8 做过基准测试后才明白：
- 每次调用工厂都会创建一份全新的方法
fullName，1000 次就有 1000 份内存 - 用类时
fullName挂在原型上，只存一份，实例共用
如果你的对象数量巨大，并且方法固定，直接上类更省内存：
class User {
constructor(firstName, lastName, email) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
}
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
const u2 = new User('Jane', 'Doe', 'jane@doe.com');
小结
- 简单场景或需要动态字段就
createXxx，方便又直观 - 量大、方法固定就用
class Xxx，省内存靠原型 - 无论哪种，牢记箭头函数不会绑定自己的
this，方法里写箭头就掉坑
