React-Native 开发中的小技巧
动态样式
export default class Test extends Component {
render() {
return (
<View>
<Text style={styles.title(18)}>{'好好学习，天天向上'}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
title: (fontSize) => ({
lineHeight: 40,
fontSize: fontSize,
color: 'red',
textAlign: 'center',
}),
})链判断运算符（见：ES6语法对象的扩展）
我们在编程开中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在。比如，要读取message.body.user.firstName，安全的写法是写成下面这样：
// 错误的写法
const firstName = message.body.user.firstName;
// 正确的写法
const firstName = (message
&& message.body
&& message.body.user
&& message.body.user.firstName) || 'default';上面例子中，firstName属性在对象的第四层，所以需要判断四次，每一层是否有值。
三元运算符?:也常用于判断对象是否存在。比如：
const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined上面例子中，必须先判断fooInput 是否存在，才能读取fooInput.value。
这样的层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法。比如：
const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value上面代码使用了?.运算符，直接在链式调用的时候判断，左侧的对象是否为null 或undefined。如果是的，就不再往下运算，而是返回undefined。
链判断运算符有三种用法:
obj?.prop// 对象属性obj?.[expr]. // 同上func?.(...args)// 函数或对象方法的调用
?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。
Null 判断运算符（见：ES6语法对象的扩展）
读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。比如：
const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;上面的三行代码都通过||运算符指定默认值，但是这样写是错的。开发者的原意是，只要属性的值为null或undefined，默认值就会生效，但是属性的值如果为空字符串或false或0，默认值也会生效。
为了避免这种情况，ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。比如：
const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;上面代码中，默认值只有在左侧属性值为null或undefined时，才会生效。
这个运算符的一个目的，就是跟链判断运算符?.配合使用，为null或undefined的值设置默认值。比如：
const animationDuration = response.settings?.animationDuration ?? 300;
上面代码中，response.settings如果是null或undefined，就会返回默认值300。
箭头函数中的 this（见：ES6语法函数的扩展）
在JavaScript 中this对象的指向是可变的，但是在箭头函数中，它是固定化的，也可以称为静态的。
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
所以，箭头函数转成 ES5 的代码如下：
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}上面代码中，转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。
长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。箭头函数”绑定”this，很大程度上解决了这个困扰。