简单组件&复杂组件定义
如果这个组件包含state状态,则为复杂组件,反之则为简单组件。
有状态组件的基础语法:
放在构造函数constructor里面,加一个状态state属性。
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
关于this指向理解
其实,在函数式组件里面,this也是undefined。在class类中的render函数中this是指向的是组件实例。在类外面定义的函数,this指向的是undefined。
问题:class类中这样定义方法的时候,方法中的this指向什么?---答案是undefined
为什么?因为抛开react的所有概念,在ES6中的类中定义方法的时候,如果这个方法是通过实例调用,此时方法中的this指向这个类的实例对象,否则则为undefined,同时类中的方法也是定义在类的原型对象上,且开启了局部的严格模式(use strict)
再举个普通的类的例子来进一步了解这个this的指向,如下图:
React如何解决类中定义直接定义方法的this指向问题?
首先明确一个概念:构造器中的this本身就是指向实例对象的。通过bind函数绑定了this,然后返回一个新的函数changeWeather,将这个新的函数作为一个值,赋值到了实例对象中的changeWeather属性中。