基于 React.Component 的类

Question

React 的新的、新的、新的。 在扩展 React.Component 的类中下载了以下 setState 方法示例。 它工作正常，但我不明白为什么不需要为 App 实例化 object，因为每个用户可能位于不同的位置......

我以某种方式认为 index.js 需要：

const app = new App()

是否有一个原因？

index.js

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

应用程序.js

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';


class App extends React.Component {
    constructor ( props ) {
        super ( props );
        this.state={ latitude: null};

        window.navigator.geolocation.getCurrentPosition (
            ( postion ) => {
                this.setState( {latitude: postion.coords.latitude })
            },
            ( error ) => console.log ( error )
        );
    }

    render () {


        return (
            <div className="App">
                <header className="App-header">
                    <p>
                        LATITUDE: {this.state.latitude}
                    </p>
                </header>
            </div>
        );
    }
}

export default App;

Answer 1

实际上，每次使用 React 组件时都会实例化对象。 您可以在代码中使用<App/>来翻译const app = new App() 。 在您的情况下，一个实例位于 ReactDOM.render function 中。