在 React Native 中使用问号的 useRef 表达式

Question

我学习了一些关于在 React Native 函数中使用 'useRef' 钩子的知识。在检查我在 Internet 上找到的一些代码时......我看到了包括问号（“？”）的用法，就像这样（如代码中所述）：

import React, { useEffect, useRef, useState } from 'react';
import {
  Button,
  Dimensions,
  StyleSheet,
  View,
} from 'react-native';
import { SignalingChannel } from './SignalingChannel';

import { mediaDevices, MediaStream, RTCPeerConnection, RTCView } from "react-native-webrtc";
import { config } from './config';

const STREAM_ID = "170714163152216487974907";

export const Publisher = () => {

//...

const peerConnection = useRef<RTCPeerConnection>()

peerConnection.current = new RTCPeerConnection({
  iceServers: []
})

peerConnection.current?.addStream(localStreamRef.current);  //WHY THE "?" AFTER 'peerConnection.current'...?

peerConnection.current.onsignalingstatechange = () => console.log(peerConnection.current?.signalingState)  //WHY THE "?" AFTER 'peerConnection.current'...?

peerConnection.current.onicecandidateerror = console.log
peerConnection.current.onicecandidate = (event) => {
  const candidate = event.candidate;
  if (candidate && signalingChannel.current?.isChannelOpen()) {  //WHY THE "?" AFTER 'signalingChannel.current'...?
    signalingChannel.current?.sendJSON({  //WHY THE "?" AFTER 'signalingChannel.current'...?
      command: "takeCandidate",
      streamId: STREAM_ID,
      label: candidate.sdpMLineIndex.toString(),
      id: candidate.sdpMid,
      candidate: candidate.candidate,
    })
  }
}

const offer = await peerConnection.current.createOffer();
await peerConnection.current.setLocalDescription(offer);

//...

};

我试图找到有关这些问号的用途的信息，但没有成功。 'useRef' 似乎也接受上述代码中的扩展，例如“peerConnection.current.createOffer();”或“signalingChannel.current?.isChannelOpen()”...在我使用的关于 'useRef' 挂钩的文档中也没有提到。欢迎提供有关这些字符和用法的任何信息。

Answer 1

看起来你的例子不需要 ?.，它是 optional chaining，还有一个，请将你的结构添加到 ref

const peerConnection = useRef<RTCPeerConnection>(
 new RTCPeerConnection({
   iceServers: []
 })
);

因为在你的例子中你每次都创建一个实例运行

Answer 2

useRef 作用是保存对“PeerConnection”组件的引用，并将其属性和方法（函数）公开给“peerConnection.current”。

´useRef´ 在组件重新渲染周期中保留其值。在某些 worst-case 场景中，“useRef”持有引用的子组件不应挂载，您无法访问其成员方法和属性。

可选的链接运算符 (?) 通过避免在未公开时调用组件方法或属性来避免代码崩溃。

在 React Native 中使用问号的 useRef 表达式

useRef expressions using question marks in React Native

formatting

react-native

use-ref