Dynamic style

export default class Test extends Component {
 
    render() {
        return (
            <View>
                <Text style={styles.title(18)}>{'study hard and make progress every day'}</Text>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    title: (fontSize) => ({
        lineHeight: 40,
        fontSize: fontSize,
        color: 'red',
        textAlign: 'center',
    }),
})

Chain judgment operator (see: extension of ES6 syntax object)

In programming, if we read a property inside an object, we often need to judge whether the object exists. For example, to read message body. user. Firstname is written as follows:

// Wrong writing
const  firstName = message.body.user.firstName;
 
// Correct writing
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

In the above example, the firstName attribute is in the fourth layer of the object, so you need to judge whether each layer has a value four times.

Ternary operator?: It is also commonly used to judge whether an object exists. For example:

const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined

In the above example, you must determine whether fooInput exists before reading fooInput value.

Such layers of judgment are very troublesome, so ES2020 The "optional chain operator" is introduced, Simplify the above. For example:

const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value

The above code uses Operator, directly judge whether the object on the left is null or undefined during chain call. If yes, it will no longer operate down, but return undefined.

The chain judgment operator has three uses:

• obj?.prop / / object properties
• obj?.[expr]. // ditto
• func?.(...args) / / call of function or object method

?. Operator is equivalent to a short circuit mechanism. As long as the conditions are not met, it will not be executed further.

Null judgment operator (see: extension of ES6 syntax object)

When reading object properties, if the value of a property is null or undefined, sometimes you need to specify a default value for them. A common practice is to specify the default value through the | operator. For example:

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

The above three lines of code specify the default value through the | operator, but this is wrong. The developer's original intention is that as long as the value of the property is null or undefined, the default value will take effect, but if the value of the property is an empty string or false or 0, the default value will also take effect.

To avoid this, ES2020 A new null judgment operator??? Is introduced??. Its behavior is similar to 𞓜, but the value on the right side is returned only if the value on the left side of the operator is null or undefined. For example:

const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;

In the above code, the default value will take effect only when the property value on the left is null or undefined.

One purpose of this operator is to follow the chain judgment operator Use with to set the default value for null or undefined values. For example:

const animationDuration = response.settings?.animationDuration ?? 300;

In the above code, response If the settings is null or undefined, the default value of 300 will be returned.

this in the arrow function (see: extension of ES6 syntax function)

In JavaScript, the direction of this object is variable, but in arrow functions, it is fixed and can also be called static.

The fixation of this point is not because the arrow function has a mechanism to bind this. The actual reason is that the arrow function does not have its own this at all, so the internal this is the this of the outer code block. Because it doesn't have this, it can't be used as a constructor.

Therefore, the code of transforming the arrow function into ES5 is as follows:

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
 
// ES5
function foo() {
  var _this = this;
 
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

In the above code, the converted ES5 version clearly shows that the arrow function does not have its own this at all, but refers to the outer this.

This object in JavaScript language has been a headache for a long time. You must be very careful when using this object in object methods. The arrow function "binds" this ", which solves this problem to a great extent.