Class组件详解

Class 组件详解

目录
一.class组件的创建方式
二.props和state
三.生命周期Lifecycle

创建 class 组件

两种方式
第1种.ES5方式(过时)
import React from 'react'
const A = React.createClass({
   
  render() {
   
    return ( <div>hi</div> )
  }
})
export default A
// 由于ES5不支持class,才会有这种方式

第2种.ES6方式(推荐)
import React from 'react';
class B extends React.Component {
   
  constructor(props) {
   
    super(props);
  }
  render() {
   
    return (
      <div>hi</div>
    )
  }
}
export default B;

浏览器不支持ES6怎么办？
用webpack+babel将ES6翻译成ES5即可

props

对组件来说组件内就是内部，组件外就是外部。
1.传入props给B组件

(1)外部数据一般都来自父元素的state，state是怎么作为props的？
把this.state.name作为B的外部属性。
(2)把外面的onClick函数传给onClick属性,这个onClick不是state，就是类的一个方法。传的是地址，对象只会拷贝地址。
(3)外部数据被包装为一个对象
name、onClick会变成对象{name:'frank',onClick:...,children:'hi'}
children就是hi,如果里面写了2个东西，就会变成一个数组放在children里。
(4)onClick就是回调

2.props如何初始化

class B extends React.Component {
   
  constructor(props) {
    //这个props是从外部父组件接收来的
    super(props); //super会把props放到this上
  //this.state={n:0} 初始化，如果写了初始化那必须写constructor
  }
  render(){
   }
}
要么不初始化，即不写constructor
要么初始化，且必须写全套(不写super直接报错)

效果
这么做了之后，this.props就是外部数据对象的地址了。

3.读取props

把外部传进来的函数 复制给div的onClick props
直接展示{this.props.name}

用对象的语法来读取并展示{this.props.children}
通过this.props.xxx读取

4.怎么写props？
永远不准对props进行任何的改写，不准写props!

//不要这样写
this.props={
    另一个对象}
this.props.xxx='hi'

相关钩子
componentWillReceiveProps钩子(被弃用)
当组件接收新的props时，会触发此钩子

面试题
Props的作用
1.接受外部数据
只能读不能写，外部数据由父组件传递
2.接收外部函数
在恰当的时机，调用该函数。比如说当某个div被点击时调用
该函数一般是父组件的函数

State(读) & setState(写)

1.初始化

class B extends React.Component{
   
  constructor(props) {
   
    super(props);
    this.state = {
    //初始化
      user: {
   name:'frank', age:18}
      }
  }
    render() {
     ...  }
  }
}

2.读写State
读用this.state

this.state.xxx.yyy.zzz

写用this.setState(???,fn)
第1个参数有2种情况:

1' this.setState(newState,fn)
⚠️注意:setState不会立即改变this.state,会在当前代码运行完后，再去更新this.state,从而触发UI更新

2' this