Simple instructions

Purpose: fully decouple with business code support components into/out of data buried point (synchronous/asynchronous), internal method buried point (synchronous/asynchronous) Note: the first version of this, is for experimental purposes, directly provide middleware source code, there is a need to combine their own business, fork source code, modify can be

After getting the code, you can according to their own business, need to modify the buried data data and the createTrackData method in the source code, mainly used to replace the null value in data with state

The introduction of

CNPM install react-decorator-track –save

Supports buried point types

  • TrackPage: Handles buried points in lifecycle functions
  • Track: Responsible for processing method events buried point

TrackPage

  • In type :componentWillMount, record the time to enter the page, and its own data (data)
@TrackPage({
  in: {
    data: { evt: 'in'.test: '1'}}})export default class xxxx extends React.Component {}
Copy the code
  • Out type :componentWillUnmount, record the time when leaving the page, and its own data (data)
@TrackPage({
  out: {
    data: { evt: 'out'.test: '2', productCount: ' '}}})export default class xxxx extends React.Component {}
Copy the code
  • InOut type :componentWillMount and componentWillUnmount, record the time to enter the page, the time to leave the page and the time to stay on the page, and its own data (data)
@TrackPage({
  mounted: {
    data: { evt: 'in-out'.test: '3', productCount: ' '}}})export default class xxxx extends React.Component {}
Copy the code
  • Mounted type :ccomponentDidMount: records buried data (synchronous or asynchronous initialization data)
@TrackPage({
  mounted: {
    data: { evt: 'mount'.test: '5', userCount: ' ', orderCount: ' '}}})export default class xxxx extends React.Component {}
Copy the code

Description: Data is buried data to be used, including data with fixed values and data returned by asynchronous requests. The data returned by asynchronous requests should be included in state, so that correct data values can be obtained within TrackPage and Track. The combination of state and data is traversed to replace the value set as empty in data.

  • In: data is fixed, componentWillMount handles state meaningless
  • Out – In the above example, data contains productCount null, and it is also a property in state. The purpose of this is to replace buried data productCount with the corresponding data in state, and the same/asynchronous data problem can be solved internally
  • InOut – same as above
  • Mounted – same as above

You can also use a combination of these four types, like this

@TrackPage({
  inOut: {
    data: { evt: 'in-out'.test: '3', productCount: ' ' }
  },
  mounted: {
    data: { evt: 'mount'.test: '5', userCount: ' ', orderCount: ' '}}})Copy the code

Track

@Track({
    data: {  evt: 'func1'.test: 'a', userCount: ' ' },
    // execute: 'before'
})
async submit() {
    console.log('submit')
    const data = await new Promise(resolve => setTimeout(() => resolve('555'), 1000))
    this.setState({ userCount: data })
}
Copy the code

Execute the default value after is used to distinguish between performing buried operations before the operation is completed (synchronous) and after the operation is completed (asynchronous).

To see a demo

import React from 'react'
import './index.scss'
import { TrackPage, Track } from 'react-decorator-track'

@TrackPage({
  in: {
    data: { evt: 'in'.test: '1' }
  },
  out: {
    data: { evt: 'out'.test: '2', productCount: ' '}},inOut: {
    data: { evt: 'in-out'.test: '3', productCount: ' ' }
  },
  mounted: {
    data: { evt: 'mount'.test: '5', userCount: ' ', orderCount: ' '}}})export default class Home extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      userCount: The '-',
      productCount: The '-',
      orderCount: The '-'}} // Can be added or not addedcomponentWillMount() {
    // console.log('will')}getHomeCount() {
    const data = {
      userCount: '666',
      productCount: '333',
      orderCount: '999'
    }

    return new Promise(resolve => setTimeout(() => resolve(data), 1000))
  }

  async componentDidMount() {
    // let data = await statiService.getHomeCount()
    let data = await this.getHomeCount()
    this.setState(data)
  }
  
  
  @Track({
    data: {  evt: 'func1'.test: 'a', userCount: ' ' },
    // execute: 'before'
  })
  async submit() {
    console.log('submit')
    const data = await new Promise(resolve => setTimeout(() => resolve('555'), 1000)) this.setState({userCount: data})}componentWillUnmount() {
    console.log('Ready to leave')}render() {
    let { userCount, productCount, orderCount } = this.state
    return (
      <div className="page-wrapper">
        <PageTitle title="Home page" />
        <div className="row">
          <div className="col-md-4">
            <Link to="/user" className="color-box brown">
              <p className="count">{userCount}</p>
              <p className="desc">
                <i className="fa fa-user-o"> < / I > < span > total number of user < / span > < / p > < / Link > < / div > < div className ="col-md-4">
            <Link to="/product" className="color-box green">
              <p className="count">{productCount}</p>
              <p className="desc">
                <i className="fa fa-user-o"> < / I > < span > total goods < / span > < / p > < / Link > < / div > < div className ="col-md-4">
            <Link to="/order" className="color-box blue">
              <p className="count">{orderCount}</p>
              <p className="desc">
                <i className="fa fa-user-o"Total order > < / I > < span > < / span > < / p > < / Link > < / div > < / div > < div className ="row">
          <button className="btn"The onClick = {() = > this. Submit ()} > submit test < / button > < / div > < / div >)}}Copy the code

When entering the page, execute in and mounted points

Leave the page

Click Submit. If the default value of execute is after, the embedding will be performed after the action is completed, that is, the embedding will be performed after the asynchronous submission is completed

If execute is set to before, buries before the action starts,

How to write a buried plug-in for your business

2. Use decorator methods to get the instance of the component or method being called, and the internal state and parameters 3. Delegating a method or lifecycle to a decorator method can be understood as a proxy

conclusion

The above demo and source code, we can take to use at will, transformed into suitable for their own company business buried point scheme, technology without barriers, welcome everyone to exchange and study together

Little crazy making