React Native refs 和构造函数

Question

我是本地反应的新手，想问一些问题。首先，如果他们是哑巴，请对不起。:(

我一直在观看并尝试通过一些视频课程学习本地反应，我发现这 https://blog.expo.io/introducing-expo-ar-mobile-augmented-reality-with-javascript-powered-by-arkit-b0d5a02ff23当我冲浪时导游。我复制并粘贴了代码，并试图通过删除一些行来学习它，以弄清楚它们在做什么。当我删除"ref"行相机不起作用时。我其实不明白为什么会这样。所以决定在这里问一下。在问这个问题时，我认为问其他问题会很好。所以这里有一些问题：

什么是 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 用于保存对组件的引用，以便可以从其他组件访问它。

作为简化的示例，请考虑登录页面。当用户在键入电子邮件后按 Enter 时，他/她可能希望继续键入密码。为此，您需要对密码文本输入组件进行引用

          <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）构造函数，顾名思义，是组件对象的对象构造函数。它用于初始化状态。请参考 react.js 的文档;对于 React Native 来说也是如此。

希望对您有所帮助。