5个好用的react方法
原创
1 - 优化参数检查
❌ 停止使用以下方式：
if (userRole !== 'admin' && userRole !== 'moderator' && userRole !== 'user') {
console.error("无效的用户角色")
}✅ 改用以下方式：
const allowedRoles = ['admin', 'moderator', 'user'];
if (!allowedRoles.includes(userRole)) {
console.error('无效的用户角色');
}2 - 使用 useReducer 控制切换状态
❌ 停止使用以下方式：
const [isModalVisible, setIsModalVisible] = useState(false)
setIsModalVisible((prevState) => !prevState)✅ 改用以下方式：
const [isModalVisible, toggleModalVisibility] = useReducer((currentValue) => !currentValue, false)
toggleModalVisibility()3 - 对象解构作为参数
❌ 停止使用以下方式：
const processUserData = (firstName, lastName, age, email) => {
....
}
processUserData("Toto", "Tata", 35, "tototata@gmail.com");✅ 改用以下方式：
const processUserData = ({ firstName, lastName, age, email }) => {
....
}
processUserData({
firstName: "Toto",
lastName: "Tata",
age: 35,
email: "tototata@gmail.com"
});4 - 高效的对象克隆
❌ 停止使用以下方式：
const originalObject = {
key1: 'value1',
key2: {
key2a: () => console.log('value2a')
}
}
const objectCopy = originalObject✅ 改用以下方式：
const originalObject = {
key1: 'value1',
key2: {
key2a: () => console.log('value2a')
}
}
const objectCopy = structuredClone(originalObject)
// 或者
const objectCopy = {...originalObject}5 - 使用 Set 高效管理唯一值
❌ 停止使用以下方式：
const uniqueItemsArray = ['Apple', 'Banana', 'Orange', 'Banana', 'Apple'];
// 向数组添加新项
uniqueItemsArray.push('Grapes');
uniqueItemsArray.push('Orange'); // 已存在但再次添加
// 检查值是否存在于数组中
const hasGrapes = uniqueItemsArray.includes('Grapes');
// 从数组中删除项
uniqueItemsArray = uniqueItemsArray.filter(item => item !== 'Banana');
uniqueItemsArray.forEach(item => {
console.log(item);
});✅ 改用以下方式：
const uniqueItemsSet = new Set(['Apple', 'Banana', 'Orange', 'Banana', 'Apple']);
// 将显示 ['Apple', 'Banana', 'Orange']
// 向 Set 添加新的唯一项
uniqueItemsSet.add('Grapes');
uniqueItemsSet.add('Orange');
// 检查值是否存在于 Set 中
const hasGrapes = uniqueItemsSet.has('Grapes');
// 从 Set 中删除项
uniqueItemsSet.delete('Banana');
// 遍历 Set
for (let item of uniqueItemsSet) {
console.log(item);
}我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
