react+mobx+g2(v3)初使用常见问题

　　开始做react项目总会有些地方使用不熟悉,以下为本次项目后常见的问题总结.

• 生命周期
• 组件间参数与事件
• mobx使用
• 图表g2在react中的使用

　　开始

　　生命周期

　　在我们开始开发项目时,在组件中用的最多的生命周期函数大概是----组件挂载完成时触发的函数：componentDidMount

　　一般在这个函数中放第一次进入页面时需要执行的事件或动作.

　　那么如果组件的参数改变,需要重新触发新的生命周期,则使用shouldComponentUpdate.

　　下面是例子:

    componentDidMount(){
        let { startDate } = this.props
        this.getData({star:startDate})
    }
    shouldComponentUpdate(nextProps,nextState){
        if(this.props.startDate != nextProps.startDate){
            this.getData({start:nextProps.startDate})
            return true
        }else{
            return false
        }
    }

 

　　注意:使用shouldComponentUpdate时，需要返回boolean值，在此处只判断了参数startDate变化时才会触发页面数据的重新渲染。如果重新给state里某个变量重新赋值，将不会触发页面的渲染。可加上判断nextState以达到state中值变化时需要触发的重新渲染数据。

　　更多生命周期函数的详细介绍请参考react官网或react的生命周期函数（超详细）

 

• 组件间参数与事件

　　父组件引入，传入参数

import React from 'react';
import Test from './test'

export default class Index extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            id:1
        }
    }
    
    clickLog(text){
        console.log(text)
    }

    render(){
        let { id } = this.state
        return (
            <div>
                <Test id={id} clickLog={this.clickLog} />
            </div>
        )
    }
}

 

 　　子组件，触发父组件事件

  render(){
        return (
            <div>
                <div>{this.props.id}</div>
                <div onClick={this.props.clickLog('555')}>123</div>
            </div>
        )
    }

• mobx使用

 　　这次开发项目时,使用的状态管理是mobx，跟之前使用过的redux比较，个人感觉mobx使用起来更简单。使用步骤如下

　　1.安装(未使用git)

　　　　1)npm run eject      //弹出项目设置

　　　　2)npm install --save-dev babel-plugin-transform-decorators-legacy      //安装装饰器所需依赖

　　　　3)npm install @babel/plugin-proposal-decorators      // 安装应用配置

　　　　4)npm install mobx mobx-react  --save

　　　　5)配置package.json

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose":true
        }
      ] 
    ]
  }

　　2.mobx使用

　　state.js

import { observable,action } from 'mobx'

class Store {
    @observable count= 0

    @action add = () =>{
        this.count ++
    }
}

export default new Store();

　　index.js

import React from 'react';
import { observer } from 'mobx-react'
import { Button  } from "antd";
import _store__ from './state'
import './App.css';

@observer

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = { }
  }
  render(){
    return (
      <div className="App">
        <div>{_store__.count}</div>
        <Button onClick={_store__.add}>add</Button>
      </div>
    );
  }
}
export default App　

　　@observer作用是，count变化时重新渲染新的值。可以在任何需要的地方引入这个文件，这样就可以全局使用这个变量。

 

• antv g2在react中的使用

　　g2在react中使用时，条形图可如下面方式使用，官网例子：https://g2-v3.antv.vision/zh/examples/gallery/bar

import React from 'react'
import G2 from '@antv/g2'
import DataSet from 'antv/data-set'
import { Divider } from 'antd'

export default class BasicBar extends React.Component{
    constructor(props){
        super(props)
        this.state = { }
        this.id = props.param.id
    }

    componentDidMount(){
        if(this.props.dataSource.length>0){
            this.initBasicBar(this.props.dataSource)
        }
    }

    shouldComponentUpdate(nextProps,nextState){
        if(this.props.dataSource !== nextProps.dataSource){
            this.initBasicBar(nextProps.dataSource)
            return true
        }else{
            return false
        }
    }

    initBasicBar(data=[]){
        const chart = new G2.Chart({
            container: this.id,
            forceFit: true,
            height: 500,
            padding: [ 20, 40, 50, 124 ]
          });
          chart.source(data, {
            value: {
              max: 1300,
              min: 0,
              nice: false,
              alias: '销量（百万）'
            }
          });
          chart.axis('type', {
            label: {
              textStyle: {
                fill: '#8d8d8d',
                fontSize: 12
              }
            },
            tickLine: {
              alignWithLabel: false,
              length: 0
            },
            line: {
              lineWidth: 0
            }
          });
          chart.axis('value', {
            label: null,
            title: {
              offset: 30,
              textStyle: {
                fontSize: 12,
                fontWeight: 300
              }
            }
          });
          chart.legend(false);
          chart.coord().transpose();
          chart.interval().position('type*value').size(26)
            .opacity(1)
            .label('value', {
              textStyle: {
                fill: '#8d8d8d'
              },
              offset: 10
            });
          chart.render();
    }
    render(){
        return (
            <div>
                <div id={this.id}></div>
            </div>
        )
    }
}

　　在g2上面看到的例子就可以直接在怼进去了。