Know the technical implementation details of V (React V)

Know the technical implementation details of V (React V)

Purpose: Analyze the possible technologies for segmenting V functions. For example, the current popular render props technology V computing function segmentation technology is immature, because we lack understanding of the separability principle of logical computing behavior

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

  handleMouseMove(event) {//3
      x: event.clientX,
      y: event.clientY

  render() {//5
    return (//6
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>//7
        <h1> !</h1>
        <p>  ({this.state.x}, {this.state.y})</p>//8
  • A premise of React technology is that it is to make VV, not V that directly relies on DOM, like Backbone's old generation SPA framework;
  • 2. React's API tools for making VV vary according to the customization and making of different types of V. There are three categories:

    1. manually make R variables or VV instances (the other two make templates for VV instances), such as const staticView = this a static view</SPAN>; 2. provide a certain abstract R function component; you can use the parameter props Carry out instance derivation; 3. provide abstract R class components of state properties; parameter props for instance, and provide state intelligence and flexible form customization functions;

  • 3. the process of making VV is to use the VV instance returned by the API tool to render to the ReactDOM library;
  • 4. functions and class components are both abstract VV templates. These abstract VV instance (R component) templates need to be instantiated into VV instances by parameters (props);
  • Fifth, in order to meet engineering needs, abstract VV templates must abstract some formal data (props are data) and behaviors (props are callback functions), but also need to abstract the formal part (props are the VV itself);

The MouseTracker above is to use the third API, class production; start code explanation:

1   R  
2   JS Class  handleMouseMove  
3  V 
5 render  R   return  VV JSX 
7 JSX