React Native refs 和构造函数

Question

我是原生反应新手，想问一些问题。首先对不起，如果他们是愚蠢的。 :(

我一直在观看并尝试通过一些视频课程学习 React Native，我发现了这个 https://blog.expo.io/introducing-expo-ar-mobile-augmented-reality-with-javascript-powered-by-arkit-b0d5a02ff23 我冲浪时的指南。我复制并粘贴了代码，并尝试通过删除一些行来了解它们在做什么。当我删除“参考”线相机没有工作。我真的不明白为什么会这样。所以决定在这里问。问的时候，我认为问其他问题会很好。那么问题来了：

什么是 ref，什么时候用，什么时候不用？

什么是构造函数，什么时候用，什么时候不用？

已经感谢您的回答了！

代码是：

`
import Expo from 'expo';
import React from 'react';

import * as THREE from 'three'; // 0.87.1
import ExpoTHREE from 'expo-three'; // 2.0.2

console.disableYellowBox = true;

export default class App extends React.Component {
  render() {
    return (
      <Expo.GLView
        ref={(ref) => this._glView = ref}
        style={{ flex: 1 }}
        onContextCreate={this._onGLContextCreate}
      />
    );
  }

  _onGLContextCreate = async (gl) => {
    const width = gl.drawingBufferWidth;
    const height = gl.drawingBufferHeight;

    const arSession = await this._glView.startARSessionAsync();

    const scene = new THREE.Scene();
    const camera = ExpoTHREE.createARCamera(arSession, width, height, 0.01, 1000);
    const renderer = ExpoTHREE.createRenderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

    scene.background = ExpoTHREE.createARBackgroundTexture(arSession, renderer);

    // Edit the box dimensions here and see changes immediately!
    const geometry = new THREE.BoxGeometry(0.07, 0.07, 0.07);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.z = -0.4;
    scene.add(cube);

    const animate = () => {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.07;
      cube.rotation.y += 0.04;

      renderer.render(scene, camera);
      gl.endFrameEXP();
    }
    animate();
  }
}
`

Answer 1

(1) ref 用于保存对组件的引用，因此可以从其他组件访问。

作为一个简化的例子，考虑一个登录页面。当用户在输入电子邮件后按回车键时，他/她可能希望继续输入密码。为此，您需要一个对密码 TextInput 组件的引用

          <TextInput
            autoFocus
            keyboardType="email-address"
            autoCapitalize="none"
            returnKeyType="next"
            onChangeText={t => this.setState({ email: t })}
            onSubmitEditing={(event) => {
              this.passwordTextInput.focus();
            }}
          />

          <TextInput
            secureTextEntry
            autoCapitalize="none"
            returnKeyType="done"
            onChangeText={t => this.setState({ password: t })}
            ref={(c) => { this.passwordTextInput = c; }}
            onSubmitEditing={(event) => {
              this.signIn();
            }}
          />

所以基本上如果你不需要访问组件，那么就不需要指定 ref。

(2)构造函数，顾名思义，就是组件对象的对象构造函数。它用于初始化状态。请参考the doc of react.js； react native 也是一样。

希望对你有帮助。