基于 React.Component 的类

Question

New, new, new to React. Downloaded the following sample of setState method in classes that extend React.Component. It works fine, but I'm not understanding why no object needs to be instantiated for App, since each user could be in a different location...

I somehow thought index.js would need:

const app = new App()

Is there a reason for this?

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')
);

App.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

Actually you do instanciate objects everytime you use a React component. You can translate const app = new App() by using <App/> in your code. In your case, one instance is in the ReactDOM.render function.