首页 ReactNative·语法

1、React Native中使用的Hooks其实是一种编程方式，通过Hooks编写 React 组件的方式和 “Class 组件” 区别很小。

//需要先导入react
import React from 'react';
import { Text, View } from 'react-native';

//Hooks方式, return dom
//一个简单的函数就可以作为一个组件
const HelloWorldApp = () => {
  return (
    <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

//Class组件方式，render after return
class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

//导出组件以便引入
export default HelloWorldApp;

2、JSX 本质上是 JavaScript，所以可以在其中直接使用变量。比如在return中使用已经定义的name。

<Text>Hello, I am {name}!</Text>

{}中还可以使用任意的 JavaScript 表达式，可以把{}想象成在 JSX 中打开了一扇从DOM调用 JS 的传送门。

3、JSX 语法的实质是调用React.createElement方法，所以必须在文件头部引用import React from 'react'。

4、React Native的基础组件是View，其他任何组件只是在View的层面上进行新的构造。这好像Html中的基础组件是div，它既是一个组件又是一个容器。

5、在 Android 上，布局常见的做法是把视图放入LinearLayout, FrameLayout或是RelativeLayout等布局容器中。在 React Native 中， View 使用弹性盒模型（Flexbox）来为子元素布局。

6、Props是“properties”（属性）的简写，可以看做是自定义组件中，Hooks写法中传入的参数，也可以看做dom中的标签属性值。Props 使得我们可以定制组件时，实现不同的特性。

7、在我们定义一个JS对象时，有一层括号，JSX引用时又有一个括号，这就是为什么JSX文件中，props都有两层括号的原因。

8、Props 是定制组件时初始化的参数， 那么state就是组件中个性化的数据。props 用来配置组件的第一次渲染（初始状态），state 则用来记录组件中任意可能随时间变化的数据。

9、Hooks与State

以下是useState的一个例子。

import React, { useState } from "react";
import { Button, Text, View } from "react-native";

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

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

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

export default Cafe;

Hook （钩子）是一种特殊的函数，它可以“钩住”一些 React 的特性。例如useState可以在函数组件中添加一个“状态钩子”，在函数组件重新渲染执行的时候能够保持住之前的状态。

useState实质上做了两件事情：

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

也就是这样的模式：[<取值>, <设值>] = useState(<初始值>)，值的名称可以是任意的。

10、State和渲染过程

State变量使用了常量关键字const，但它看起来还是可以修改。简单地说，就是调用useState中的函数时（此处是setIsHungry），其所在的组件会重新渲染。

11、Fragments（片段）

和Vue一样，JSX 的语法要求根元素必须为单个元素，就是前面代码中的<>和</>， 。这一对 JSX 标签称为Fragments（片段），它是一个没有实际用处的View，但它在保证根节点的唯一性又不用额外引入其他的容器方面发挥了很大的作用。