运用 JavaScript 概念编写更好的 React 代码
对象销毁
条件执行
价差运营商
使用 Array.prototype.reduce() 进行扁平化
高阶函数
模板字面量
开始使用 React 进行开发可能既有趣又简单，但如果不认真思考开发过程，你的代码库很快就会变得混乱、冗长且难以阅读。编写简洁（高质量）的代码，很多人都认为需要经验积累，我也认同这种观点。然而，有一些简单却常被忽视的 JavaScript 概念，我认为如果能正确运用，就能极大地提升 React 代码的质量。以下列举这些概念，排名不分先后，让我们开始吧……
对象销毁
说实话，我还没见过哪个专业的 React 代码库没有用到这种语法糖。这是一个简单的概念，却能极大地提升代码的简洁性。思路很简单：创建名称与待解构对象名称相同的变量，并存储与其名称对应的值。
let {foo, baz} = {foo: 1, bar: "Leave me out", baz: 2}
console.log(foo, baz) // -> 1, 2
这个属性在 React 中主要用于从组件的 prop 或 state 中赋值变量，从而避免重复调用 props[.]this 和 state[.]that。希望你能理解。😆
同样的道理也适用于数组的解构，不过数组元素的索引决定了操作的执行方式。
条件执行
我们经常需要根据给定的条件执行逻辑，简单的 if-else 语句就足够了，但 React 开发者更倾向于使用 && 运算符。下面的代码会在表达式返回 'true' 时向控制台输出 'congrats'。
const isAdult = (age) => age >= 18
isAdult(18) && console.log('Congrats!!!') // 'congrats'
价差运营商
在 React 代码库中，我们经常会看到使用扩展运算符向组件传递 props，因为这通常很方便。
扩展运算符的一个简单用例是向函数传递任意参数。例如，当我们想计算一系列数字的“平均值”时，就可以利用扩展运算符轻松实现。
const calc_mean = (...series) => series.reduce((sum, n) => sum + n, 0) / series.length;
const mean = calc_mean(2,4,6,8)
console.log(mean) // 5
利用扩展运算符，我们可以计算任意长度参数的均值。
使用 Array.prototype.reduce() 进行扁平化
我出于一时冲动选择了“扁平化”这个词，因为我实在想不出更好的词，请原谅我😱。
不过，我的目的是将一系列数据简化为一个单一的输出结果。例如，假设你新工作的任务是找出给定“客户”样本中新发货产品的评价百分比。
let customers = [
{category: 'happy', count: 1200},
{category: 'sad', count: 204},
{category: 'indifferent', count: 25},
];
// compute total from customers list
let total = customers.reduce((sum, {count}) => sum + count, 0)
// optional: proceed to compute percent for all categories
let customer_reviews = customers.map(customer => {
let percent = customer.count / total * 100
return {...customer, percent: percent.toFixed(2) + '%'}
})
console.log(customer_reviews)
现在我们有了一份客户名单，以及他们的平均评价百分比。
高阶函数
这里讨论的这类高阶函数指的是那些返回函数的函数，因为它们可以极大地简化代码，并使可重用逻辑的抽象变得轻而易举。例如，假设我们想要根据另一个集合来过滤一个集合。
let invite_ids = [ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
let friends = [{name: 'sam', id: 1}, {name: 'jon', id: 13}, {name: 'snow', id: 10}]
有趣的事实：数组invite_ids实际上是一个斐波那契数列 😉
现在我们只想邀请那些 ID 可以在 invite_ids 列表中找到的朋友参加聚会，我们该如何实现呢？
const filter_invites = (ids) => ({id}) => ids.includes(id)
// now we can do this...
let my_invites = friends.filter(filter_invites(invite_ids))
console.log(my_invites) // [{name: 'sam', id: 1}, {name: 'jon', id: 13}]
请注意，我们在保持代码可读性的同时，实现了多么简洁明了的逻辑。执行过滤的函数甚至可以被抽象出来，以便于重用和/或测试。
模板字面量
模板字面量非常实用，本质上它们就像字符串，但功能更强大。它们通常用于我们需要嵌入表达式和其他代码逻辑的地方。
- 一个简单的问候程序
function greet(name) {
return `Hello ${name}`
}
greet('mike') // Hello mike
- 模板中的条件逻辑
let friends = ["ola", "tea", "mike"]
let className = `box ${friends.length ? 'show' : 'hidden'}`
console.log(className) // 'box show'
通过使用模板字符串，我们可以编写更简洁的内联条件表达式。
随着你编写更多 React 代码，还会发现许多其他概念，但我并不打算将这篇文章奉为圭臬。感谢阅读，期待您的反馈。
文章来源：https://dev.to/nuel_ikwuoma/javascript-concepts-to-write-better-react-code-45f0你可以在推特上关注我。