浅析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)}`
})
}

最后

以上就是动人夏天为你收集整理的React类组件里面的各种问题浅析浅析React类组件的全部内容，希望文章能够帮你解决React类组件里面的各种问题浅析浅析React类组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。