React类组件里面的各种问题浅析

浅析React类组件

React类组件（组件名首字母大写）

//创建类组件		组件名首字母大写
class  MyCom extends React.Component {
     
    render(){
     
        return (
            <div>类组件</div>
        )
    }
}
let com=<MyCom/>
ReactDOM.render(com,document.getElementById('app'));

react类组件的构造方法 constructor()：

constructor(props){
     
    super(props);               
    this.state = {
     
    }
}

• constructor必须用super()初始化this，可以绑定事件到this

• 如果你在constructor中要使用this.props，就必须给super加参数，super(props)；

  • constructor(){
             
        super();               
        this.state = {
             
            xxx:this.props.xxx//构造函数里面用到了props
        };
    }//这里如果在construct()和super()中不传入props参数，则会报错
    //因为这里使用super()是重写了父类的构造函数（父类的构造函数本来是super(props,context)）
    

• 无论有没有constructor()，重写的构造函数中参数有没有props，render()中都可以使用this.props， 默认自带

• 如果组件没有声明constructor,react会默认添加一个空的constructor。

  • class News extends React.Component {
             
        render() {
             
            return (
                <div>
                    new组件:{
             this.props.text}
                    <p>{
             this.state.text}</p>
                </div>
    		)
    	}
    }
    //如果在继承时，子类中如果没有声明constructor，js会自动生成添加constructor并且调用父类的构造函数
    //这里是父类的构造函数是super(props,context)，并不是super()如果写super()则是不完全使用父类构造函数方法。
    

• ES6采用的是先创建父类的实例this（故要先调用 super( )方法），完后再用子类的构造函数修改this

constructor( )-----super( )的基本含义

constructor( )——构造方法

这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。
并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。

super( ) ——继承

在class方法中，继承是使用 extends 关键字来实现的。
子类必须在 constructor( )调用 super( )方法，否则新建实例时会报错。
(如果子类没有显示定义构造方法，js则会默认加上构造方法并且里面用super自动调用父类的构造方法)
即：
class son extends father{
	constructor(){
		super()
	}
}
如果父类构造方法里面含参数，子类没有显示定义构造方法，js也会默认向子类构造方法中加上参数调用父类的构造方法，例如：
class son extends father{
	constructor(name,age){
		super(name,age)
	}
}


 报错的原因是：子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，
 然后对其进行加工，而super( )就是将父类中的this对象继承给子类的。
 没有 super，子类就得不到 this 对象。

下面我们来举个很好的栗子，说明这一切：

下面是子类显示定义了构造方法，但是并没有向子类构造方法传入父类构造方法本应该传入的形参：

class father {
     
    constructor(name, age) {
     
        this.name = name
        this.age = age
    }
    pick() {
     
        console.log(`年龄：${
       this.name}`, `年龄：${
       this.age}`)
    }
}
class son extends father {
     
    //显示定义了构造方法，但是没有向其中传入父类该有的形参
    constructor(name){
     //这里我们只传入第一个参数
        super(name)
    }
    pull() {
     
        console.log("jhhh ")
    }
}
Father = new father("baba", 40)
Father.pick()//年龄：baba 年龄：40
Son = new son("erzi", 20)
Son.pick()//年龄：erzi 年龄：undefined

//可以看到此时子类虽然使用super继承使用了父类的构造方法，但是只会使用了父类的一个形参

class father {
     
    constructor(name, age) {
     
        this.name = name
        this.age = age
    }
    pick() {
     
        console.log(`年龄：${
       this.name}`, `年龄：${
       this.age}`)
    }
}
class son extends father {
     
    //此时子类直接继承父类，并没有显示定义构造方法
    pull() {
     
        console.log("jhhh ")
    }
}
Father = new father("baba", 40)
Father.pick()//年龄：baba 年龄：40
Son = new son("erzi", 20)
Son.pick()//年龄：erzi 年龄：20

//此时我们可以知道如果子类没有显示定义构造方法，
//则会默认补上父类的构造方法，而且构造方法的参数和父类都是一致的。

总结：通过这个我们知道如果在react类组件中写出构造函数而且需要在构造函数中使用props属性，必须补上第一个形参作为补位，才能使用得到props的值。

而这里需要注意的是：react类组件在render()函数中无论构造函数有没有传入props形参，render()函数都可以使用到this.props的值

注意：

类组件需要注意js内置事件回调函数的this指向问题。

1. 类组件有自己的状态
2. 继承React.Component-会有生命周期和this
3. 内部需要一个render函数（类组件会默认调用render方法，但不会默认添加，需要手动填写render函数，并return一个能渲染的值。）
4. 类组件的基本架构
5. constructor里边添加自己的属性和状态、方法
  a. 写了constructor就要写super
  b. 如果c里边没内容只有super，name可以不写
6. 添加状态this.state = {
     }; es7写法state = {
     }。非双向绑定
7. setState接收对象的情况、批量更新
8. setState接收函数的情况、state与penddingState
9. class里方法的写法
  a. 方法里边this的指向undefined的情况
  class Person {
     
    fn(){
     
      console.log(this);
    }
  }
  var person = new Person();
  var fn1 = person.fn;(这里是将值赋给fn1)
  fn1(); //undefined（fn1()当前的指向位置this指向undefined）
  b. bind改变this指向
  c. 箭头函数继承this指向
  d. 匿名函数传参
10. TodoList实战
11. 类组件注意：
注意绑定事件时，"on"后边事件名的首字母大写，如"change"要写成"Change"注意回调函数内部this的指向默认为undefined，要改变this指向
不能直接改变state的值、需要用函数setState来修改state的值

类组件内部没有render函数报错：

因为看到class组件会默认调用render方法
如果看到函数组件，会自动在函数内部添加一个render方法，把函数的return返回值放到render中运行。
所以类组件内部必须有render函数，并return返回一个可渲染的值。不会进行自动添加。

React中自定义事件this指向问题：

this是基于函数的执行环境（也就是上下文）绑定的，React组件生命周期函数中this的上下文就是组件实例。（而js的变量是通过词法作用域来绑定的）

• 可以看关于this的一篇文章总结的很到位。
  • 1.函数在调用时，JavaScript会默认给this绑定一个值；
  • 2.this的绑定和定义的位置（编写的位置）没有关系；
  • 3.this的绑定和调用方式以及调用的位置有关系；
  • 4.this是在运行时被绑定的；

你必须谨慎对待 JSX回调函数中的this，类的自定义方法默认是不会绑定 this 的。首先调用 constructor()函数， this.state 的this上下文就是该实例对象；同理，render() 函数中this也是该实例。

在浏览器中回调函数中的this默认是指向window的，因为本质上是在函数内callback,并没有.前的对象调用，在**nodejs中的回调函数中的this默认是undefined**。（回调函数可以参看我之前的总结）

class Bar extends React.Component {
     
	constructor (){
     
		super();
		this.state = {
     
			value: 'react'
		}
	}
	changeValue (){
     
		console.log(this)  // undefined
	}
	render (){
     
		console.log(this) // 该组件实例
		return (
			<div>
				<p>{
     this.state.value}</p>
				<button onClick={
     this.changeValue}>click me !</button>
			</div>
		)
	}
}

当我们直接绑定this.changeValue调用时，会发现他的this是undefined；你应该为和这个方法绑定this。

解决方式：

①：使用 bind() 函数改变this的上下文(这里只能用bind，不能用call和apply，因为call和apply会立即执行，而bind不会)

call，apply，bind的用法以及区别

这里还是举个栗子来看一下区别：

 var obj = {
     
            message: 'My name is: '
        }

        function getName(firstName, lastName) {
     
            console.log(this.message + firstName + ' ' + lastName)
        }
	    getName.bind(obj, ['Dot', 'Dolby'])//不会执行打印函数，而是返回一个改变了执行上下文this指向之后的函数
        getName.bind(obj, ['Dot', 'Dolby'])()// My name is: Dot Dolby
		getName.apply(obj, ['Dot', 'Dolby'])// My name is: Dot Dolby
		getName.call(obj, 'Dot', 'Dolby')// My name is: Dot Dolby

在这里就可以使用bind来改变回调函数上下文this的指向，并不需要让它马上执行

class Bar extends React.Component {
     
	constructor (){
     
		super();
		this.state = {
     
			value:'react'
		}
	}
	changeValue (e){
     
		console.log(e) // 默认event
		this.setState({
     
			value:`react ${
       parseInt(Math.random()*100)}`
		})
	}
	render (){
     
		return (
			<div>
				<p>{
     this.state.value}</p>
				<button onClick={
     this.changeValue.bind(this)}>click me !</button>
			</div>
		)
	}
}

也可以在constructor()中：this.changeValue = this.changeValue.bind(this)

②：es6的箭头函数
利用箭头函数将函数的this绑定到其定义时所在的上下文

<div>
	<p>{
     this.state.value}</p>
	<button onClick={
     (event) => this.changeValue(event)}>click me !</button>
</div>

或者

changeValue = (e) => {
     
	console.log(e) // 默认event
	this.setState({
     
		value:`react ${
       parseInt(Math.random()*100)}`
	})
}