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

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

 1 // import React from "react";
 2 // import ReactDOM from 'react-dom';
 3 import React, { Component } from 'react';
 4 import { render } from 'react-dom';
 5 
 6 // class MouseTracker extends React.Component {
 7 class MouseTracker extends Component {
 8   constructor(props) {
 9     super(props);
10     this.handleMouseMove = this.handleMouseMove.bind(this);
11     this.state = { x: 0, y: 0 };
12   }
13 
14   handleMouseMove(event) {
15     this.setState({
16       x: event.clientX,
17       y: event.clientY
18     });
19   }
20 
21   render() {
22     return (
23       <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
24         <h1>移动鼠标!</h1>
25         <p>当前的鼠标位置是 ({this.state.x}, {this.state.y})</p>
26       </div>
27     );
28   }
29 }
30 
31 export default MouseTracker;
32 
33 // ReactDOM.render(<MouseTracker />, document.getElementById('app'));
34 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://img2018.cnblogs.com/blog/740516/201908/740516-20190830182612541-498728622.png)

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

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

***

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx