react函数组件与类组件的一点区别

今天是有人问我,我就写一下这个。

主要问题就是this它是会变的,而react本身不会改变它的props与state

直接看代码:

# 把fetch写到render函数中,并且要用简头函数,这个也是this指向问题
import React, { Component } from 'react';
import {connect} from 'dva';
import {Button} from "antd";
export class Index extends Component {
  constructor(props) {
    super(props);
    //this.fetch = this.fetch.bind(this);
  }
  
  render() {
    const {index} = this.props;
    fetch=()=>{
      this.props.dispatch({
        type:'index/list'
      })
    }
    return (
      <div>
        page/index
        <Button onClick={fetch}>加载数据</Button>
      </div>
    )
  }
}

export default connect(
({ index })=>({ index })
)(Index)


第二种类组件

#fetch写到类中 不过使用的时候需要用 .bind(this) 来绑定this 
import React, { Component } from 'react';
import {connect} from 'dva';
import {Button} from "antd";
export class Index extends Component {
  constructor(props) {
    super(props);
    //this.fetch = this.fetch.bind(this);
  }
  fetch=(id:number)=>{
      console.log(id)
      this.props.dispatch({
        type:'index/list'
      })
    }
  render() {
    const {index} = this.props;
    
    return (
      <div>
        page/index
        <Button onClick={this.fetch.bind(this,2)}>加载数据</Button>
      </div>
    )
  }
}

export default connect(
({ index })=>({ index })
)(Index)

第三种类组件

#fetch写到类中 可以在构造函数中先绑定this 
import React, { Component } from 'react';
import {connect} from 'dva';
import {Button} from "antd";
export class Index extends Component {
  constructor(props) {
    super(props);
    this.fetch = this.fetch.bind(this);
  }
  fetch=(id:number)=>{
      console.log(id)
      this.props.dispatch({
        type:'index/list'
      })
    }
  render() {
    const {index} = this.props;
    
    return (
      <div>
        page/index
        <Button onClick={()=>this.fetch(2)}>加载数据</Button>
      </div>
    )
  }
}

export default connect(
({ index })=>({ index })
)(Index)


类组件要麻烦些,函数方式简单些可以少写很多代码


Tags js,javascript

留言(0)

评论