# 前言由于React Native 使用和React相同的API结构，所以了解学习React很有必要，本节带你快速入门React ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7dfde430b5534477a8675414b3a9c9ad~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1092\&h=699\&s=83090\&e=png\&b=bfc9eb) ```javascript import React from 'react'; import {Text} from 'react-native'; const FirstCompose = () => { return Hello; }; export default FirstCompose; ``` 这是最简单的一个React组件代码，第一步需要通过`import`导入你所需要的组件或库，这里就导入了React和Text，通过一个函数就可以声明一个组件，它的返回值可以被渲染。最后一步将你的组件通过`export`导出即可。导入导出属于JavaScript语法，它有多种写法，详细可以查阅资料。关注函数返回`Hello`：这是React用来描述UI元素的语法（JSX），属于JavaScript语法的一部分 # JSX 需要注意的是，JSX语法是被包含在React库中，所以你需要在文件首部`import React from 'react'`导入。由于JSX是属于JavaScript的一部分，所以你仍然可以使用JavaScript的其他语法，只需要用{}包裹起来即可。 ```javascript import React from 'react'; import {Text} from 'react-native'; const getFullName = ( firstName: string, secondName: string, thirdName: string, ) => { return firstName + ' ' + secondName + ' ' + thirdName; }; const Cat = () => { return Hello, I am {getFullName('Rum', 'Tum', 'Tugger')}!; }; export default Cat; ``` # 自定义复杂组件我们也可以把多个组件组合在一起导出，在Android开发中，我们把View放到`LinearLayout`, `FrameLayout`, `RelativeLayout`等父布局中，并对其进行排列组合，在React中我们只需要使用``就可以把多个组件组合起来。``也可以简写成`<>` ```javascript import React from 'react'; import {Text, View} from 'react-native'; const Cat = () => { return ( I am also a cat! ); }; const Cafe = () => { return ( Welcome! ); }; export default Cafe; ``` 在这个例子中，其他文件只需要使用``就可以一次渲染全部组件。其中一个组件包含了另一个组件称为父组件 # Prop 上一节只讲了如何定义一个复杂组件，但是并没有提供用户可选的参数。为自定义的组件添加参数很简单，就是为你声明的函数增加参数即可: ```javascript import React from 'react'; import {Text, View} from 'react-native'; type CatProps = { name: string; }; const Cat = (props: CatProps) => { return ( Hello, I am {props.name}! ); }; const Cafe = () => { return ( ); }; export default Cafe; ``` 使用`TypeScript`语法规定参数类型，参数的使用和正常的类调用一样，主要关注调用函数时的传参``。这是一种传参的方式，还有一种情况，大家可能会好奇，例如：`Hello`这种情况下这里的Hello传递以后是属于那个参数呢？答案是：**Hello 是传递给 `children`属性的值。`children`属性是一个特殊的属性，它允许您在组件中嵌套其他组件或文本。** 我们顺便查看一下源码是不是这样。 ```javascript export interface TextProps extends TextPropsIOS, TextPropsAndroid, AccessibilityProps { /** * Specifies whether fonts should scale to respect Text Size accessibility settings. * The default is `true`. */ allowFontScaling?: boolean | undefined; children?: React.ReactNode; //... } ``` 确实可以发现children属性，并且他是`React.ReactNode`类型。那我们推断一下是不是 ```javascript ... ``` 这样也可以正常显示，甚至做更多自定义呢？ # State 到目前为止，我们的页面都是静态的。我们可以使用`useState`定义一个可修改的变量，当其改变时，将会触发重新渲染 ```javascript import React, {useState} from 'react'; import {Button, Text, View} from 'react-native'; type CatProps = { name: string; }; const Cat = (props: CatProps) => { const [isHungry, setIsHungry] = useState(true); return ( I am {props.name}, and I am {isHungry ? 'hungry' : 'full'}! ); } //这里按钮触发会执行三次increment，也就是执行三次setAge，因为传递的是函数，并不会立马执行， //而是丢入队列，等下次渲染时，依次执行，这样才可以达到依次点击，age + 3 //如果你不使用函数的方式递增，那么是会失败的 function increment() { setAge(a + 1); setAge(a + 1); setAge(a + 1); } //set函数执行后age的值不会立马改变，所以这里其实是调用了3此setAge(42 + 1) //按钮点击后，依旧只增加1 ``` 4. 对于state为对象或者数组的情况，由于state是只读的的属性，你应该替换它，而不是修改内部值 ```javascript const [from, setFrom] = useState({firstName:"AAA"}) setForm({ ...form, firstName: 'Taylor' }); //这里也是一个解构赋值语句，实则是新建了一个对像 ``` # useEffect ```javascript useEffect(setup, dependencies?) ``` * `dependencies`：是一个数组，里面包含了useEffect监听的值，当这些值产生变化后，会调用`setup`函数 * 如果传递的数组内有值：那么则会在首次渲染时和数组内的值变化后，调用setup函数 * 如果传递的数组是空数组：那么仅会在首次渲染时，调用setup函数 * 如果完全没有传递这个参数：那么每次渲染，都会调用setup函数 * `setup`：是一个函数，函数可以再返回一个"清理函数"，首次渲染时，会调用setup函数，之后渲染如果你提供了清理函数，会先使用旧的`dependencies`执行清理函数，然后使用新值执行setup函数。当组件被移除时，会最后调用一次清理函数 ```javascript import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); //清理函数 return () => { connection.disconnect(); }; }, [serverUrl, roomId]); // ... } ``` # useRef ```javascript useRef(initialValue) ``` 返回一个仅包含`current`属性的对象，这个属性的初始值为你设置的`initialValue`。当下一次渲染时useRef会返回**相同**的对象，你可以改变`current`的值用来记录一些信息。它与`useState`的不同之处在于，当你修改`current`时不会触发渲染。 ref的另一个用处是可以控制DOM，如下例子 ```javascript import { useRef } from 'react'; export default function Form() { const inputRef = useRef(null); function handleClick() { inputRef.current.focus(); } return ( <> ); } ``` 首先使用null声明一个ref，然后将其赋值给DOM的ref属性。在React创建这个DOM并渲染至屏幕上时，React会设置ref的current为这个DOM。然后就可以通过current操作它。当DOM从屏幕消失时，React会将current置为null。 # memo ```javascript const MemoizedComponent = memo(SomeComponent, arePropsEqual?) ``` memo可以让组件当属性未改变时跳过渲染 * `SomeComponent`：一个你需要处理的组件，memo会返回一个新的一模一样的组件 * `arePropsEqual`：一个用户判断属性是否改变的函数，函数原型为：`（preProp， newProp）=> bool`如果未指定该参数，那么会使用`object.is`

Your age: {age}