5个好用的react方法

2023-11-29 21:00:30 浏览数 (1)

1 - 优化参数检查

❌ 停止使用以下方式:

代码语言:javascript复制
if (userRole !== 'admin' && userRole !== 'moderator' && userRole !== 'user') {

   console.error("无效的用户角色")

}

✅ 改用以下方式:

代码语言:javascript复制
const allowedRoles = ['admin', 'moderator', 'user'];



if (!allowedRoles.includes(userRole)) {

    console.error('无效的用户角色');

}

2 - 使用 useReducer 控制切换状态

❌ 停止使用以下方式:

代码语言:javascript复制
const [isModalVisible, setIsModalVisible] = useState(false)



setIsModalVisible((prevState) => !prevState)

✅ 改用以下方式:

代码语言:javascript复制
const [isModalVisible, toggleModalVisibility] = useReducer((currentValue) => !currentValue, false)



toggleModalVisibility()

3 - 对象解构作为参数

❌ 停止使用以下方式:

代码语言:javascript复制
const processUserData = (firstName, lastName, age, email) => {

    ....

}



processUserData("Toto", "Tata", 35, "tototata@gmail.com");

✅ 改用以下方式:

代码语言:javascript复制
const processUserData = ({ firstName, lastName, age, email }) => {

    ....

}



processUserData({

    firstName: "Toto",

    lastName: "Tata",

    age: 35,

    email: "tototata@gmail.com"

});

4 - 高效的对象克隆

❌ 停止使用以下方式:

代码语言:javascript复制
const originalObject = {

    key1: 'value1',

    key2: {

        key2a: () => console.log('value2a')

    }

}



const objectCopy = originalObject

✅ 改用以下方式:

代码语言:javascript复制
const originalObject = {

    key1: 'value1',

    key2: {

        key2a: () => console.log('value2a')

    }

}



const objectCopy = structuredClone(originalObject)

// 或者

const objectCopy = {...originalObject}

5 - 使用 Set 高效管理唯一值

❌ 停止使用以下方式:

代码语言:javascript复制
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);

});

✅ 改用以下方式:

代码语言:javascript复制
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腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

0 人点赞