React 的 Class 组件

Posted 2020-12-14 lovevin

写在前面

在 React 中，定义组件的方式有两种，一个是 class 类组件，一个是函数组件。class 类组件的实现相比于函数组件要复杂。

1. return React 元素

React 组件必须是返回 React 元素的物件，因此无论是函数组件还是类组件都必须有 return React元素。

在 class 类组件的返回 React 元素的位置是在 render() 函数中，也就是说，类组件中必须有一个 render() 函数，在 render() 函数中必须有 return 的值，这个值必须是虚拟 DOM（React 元素）。

class xxx extends React.Component{
      render(){
            return (React组件)
      }
}

无论是函数组件还是类组件，return 的 React 元素的语法必须是由一个标签包裹起来的所有虚拟 DOM 内容，返回多个独立的标签是错误的，如下：

render(){
      return(
            <div> first </div>
            <div> second </div>
      )   //会报错
}

解决此种错误的方式有两种，一种是使用一个 div 标签将其包裹起来，另外一种方式就是使用 React 提供的 <React.Fragment> 将其包裹起来，但是其渲染到页面时是不会有 <React.Fragment>的，如下：

render(){
      return(
            <React.Fragment>
                  <div> first </div>
                  <div> second </div>
            </React.Fragment>
      )   
}

上述的 <React.Fragment> 还有一种简写方式 <>，如下：

render(){
      return(
            <>
                  <div> first </div>
                  <div> second </div>
            </>
      )   
}

2. 两种创建 class 组件的方式

在 React 中有两种创建 class 组件的方式，区分这两种方式的原因是 js 语法版本的不同。在 ES5 时代，没有 class 这个概念，因此 React 就提供了创建 class 类组件的函数接口，如下：

import React from ‘react‘
const A = React.createClass({
      render(){
            return(
                  <div>Hello Word</div>
            )
      }
})
export default A

在新的 ES6 语法出来后，支持了 class。因此，用 ES6 语法定义的类组件的语法如下：

import React from ‘react‘
class A extends React.Component{
      constructor(props){
            super(props);
      }
      render(){
            return (
                  <div>Hello Word</div>
            )
      }
}
export default A

目前大部分浏览器都支持了 ES6 语法，因此都在使用 class 语法定义 React 的类组件，对于一些不支持 ES6 语法的浏览器，可以使用 webpack + babel 将 ES6 语法转为 ES5 语法。

3. props 外部数据

3.1 外部传入 props

外部数据是怎么传入到组件的？首先，无论是 React 还是 Vue ，组件的使用都是作为自定义 xml 标签的方式使用的，如 <Person/>，那么在使用组件时向组件传递数据信息就是通过 xml 中的标签内的属性值传递的，如 <Person name="test" age="{18}">hi</Person>，那么 {name:‘test‘, age: 18, children:‘hi‘} 就会作为 Person 组件的外部数据对象 props 传递给 Person 组件。也就是说 <Person> 组件的 props 对象为：

props = {
      name: ‘test‘,
      age: 18,
      children: ‘hi‘  //React 中的 props 默认有一个 children 属性，用于接收组件中间的内容
}

3.2 类内初始化 props

props 在类组件内的初始化是在 constructor 函数中进行的，如下：

constructor(props){
      super(props); // 会将 props 挂在 this 上
}

如果 class 组件中的 constructor 函数中只有上述初始化 props 的三行的形式时，可以省略不写 constructor，上述三行是默认的。但如果在 constructor 函数中有其他语句时，上述三行就必须写完整。

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

3.3 读取 props

在 props 初始化完成后，this.props 变量就保存了 props 外部数据对象的地址，在 class 类组件内部就可以通过 this.props 变量访问外部数据。如下：

render(){
      return(
            <div>
                  姓名是：{this.props.name}
                  年龄为：{this.props.age}
                  <div>
                        {this.props.children}
                  </div>
            </div>
      )
}

3.4 写 props

组件的 props 外部数据一般是由其父组件的 state 内部数据传递过去的，因此在组件内不允许修改 props，想要修改必须通知创建该数据的父元素进行修改。

4. state 内部数据

5. 生命周期钩子