React-Native学习第二天：使用内置组件

这里只对RN内置组件使用过程，遇到的问题做个记录。具体的使用方法和属性，大家可以到官网查看：内置组件

一、JSX学习

JSX学习地址
JSX 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。JSX是RN项目必须掌握的，这里面的语法需要大家到JSX学习地址学习，只有掌握了JSX，才能更加得心应手搭积木。

二、{ {}}

在 JSX 中，引用 JS 值时需要使用{}括起来。在你需要传递非字符串值（比如数组或者数字）的时候会经常用到这种写法：<Cat food={[“fish”, “kibble”]} /> age={2}。然而我们在 JS 中定义一个对象时，本来也需要用括号括起来：{width: 200, height: 200}。因此要在 JSX 中传递一个 JS 对象值的时候，就必须用到两层括号：{ {width: 200, height: 200}}。

三、props 和 state

props 用来配置组件的第一次渲染（初始状态）。state 则用来记录组件中任意可能随时间变化的数据。
1.、props的使用

const Cat = (props) => {
    
    
  return (
    <View>
      <Text>{
    
    props.name}</Text>
    </View>
  )
};
<Cat name="Maru" />

2、state的使用

import React, {
    
     useState } from 'react';

const Cat = (props) => {
    
    
  const [isHungry, setIsHungry] = useState(true);
  // ...
};

useState实质上做了两件事情：

创建一个“状态变量”，并赋予一个初始值。上面例子中的状态变量是isHungry，初始值为true。
同时创建一个函数用于设置此状态变量的值——setIsHungry。

取什么名字并不重要。但脑海中应该形成这样一种模式：[<取值>, <设值>] = useState(<初始值>).

你可能注意到虽然isHungry使用了常量关键字const，但它看起来还是可以修改！简单来说，当你调用setIsHungry这样的设置状态的函数时，其所在的组件会重新渲染。此处这一整个Cat函数都会从头重新执行一遍。重新执行的时候，useState会返回给我们新设置的值。

四、Fragments（片段）

const Cafe = () => {
    
    
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

由于 JSX 的语法要求根元素必须为单个元素，如果我们需要在根节点处并列多个元素，在此前不得不额外套一个没有实际用处的View。但有了 Fragment 后就不需要引入额外的容器视图了。