xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

https://jsfiddle.net/reactjs/69z2wepo/

// import React from "react";
// import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { render } from 'react-dom';

// class MouseTracker extends React.Component {
class MouseTracker extends Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        <h1>移动鼠标!</h1>
        <p>当前的鼠标位置是 ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

export default MouseTracker;

// ReactDOM.render(<MouseTracker />, document.getElementById('app'));
render(<MouseTracker />, document.getElementById('app'));

https://cdnjs.com/

https://github.com/cdnjs/new-website

https://github.com/cdnjs/cdnjs

https://github.com/xgqfrms/cdn

***

# React Component Lifecycle


https://reactjs.org/docs/react-component.html

https://reactjs.org/docs/state-and-lifecycle.html

***

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx