反應本機引用和構造函數

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組件的引用

          <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的文檔 ； 對於本機反應也是如此。

希望能幫助到你。