本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本文主要内容：逐步演示如何将一个function component转换为class component并保持功能正常，从而了解什么是class component

在上advanced react的过程中，出现了class component以及一些生命周期的内容，让我意识到自己好像又跳关了，为了让知识更连贯，决定先进行class component的学习再继续之前的课程。

在看到的许多文章中，都建议如果已经写了function组件，不出于特殊的需求，就不要变换为class组件了。不过我们现在出于学习的目的，来实现一下function component向class component的转换

项目预览与分析

可以看到是一个非常简单的计数器，点左边的"-"，数字逐一减小；点右边的"+"，数字逐一增大。

这个用function component来写，我们已经非常熟练了，如下

import React from "react"

export default function App() {
    const [count, setCount] = React.useState(0)
    
    function add() {
        setCount(prevCount => prevCount + 1)
    }
    
    function subtract() {
        setCount(prevCount => prevCount - 1)
    }
    
    return (
        <div className="counter">
            <button className="counter--minus" onClick={subtract}>–</button>
            <div className="counter--count">
                <h1>{count}</h1>
            </div>
            <button className="counter--plus" onClick={add}>+</button>
        </div>
    )
}

数字count作为state，两个函数修改state，接下来我们要做的就是将它转换为class component

改变基础格式

首先要在名称上做出改变，function App()修改为以下框架

class App extends React.Component {
    render() {
    }
}

从React.Component中继承为App组件，render()用于渲染组件中的内容

改变state

改成class component后会报很多错，一个一个来解决

const [count, setCount] = React.useState(0)不能再直接使用了，

可以使用以下声明

state = {
    count: 0
}

改变函数

function函数也会报错，要使用箭头函数来保证程序正常运行，以add为例，

add = () => {
    setCount(prevCount => prevCount + 1)
}

这样就能不报错了

将return放入render

既然已经不是function了，那么我们最终结果也应该不是return

所以将所有return的内容一并放入render中，如下

render() {
    return (
        <div className="counter">
            <button className="counter--minus" onClick={subtract}>–</button>
            <div className="counter--count">
                <h1>{count}</h1>
            </div>
            <button className="counter--plus" onClick={add}>+</button>
        </div>
    )
}

这样程序明面上就不报错了，但是当我们运行时，还是报了错误，所以还是逐个来解决

使用setState

可以看到报错都是'xxx' is not defined

这是因为class component必须借助this来查找自己组件内的东西，所以我们可以将setCount直接按照如下修改

add = () => {
    this.setState(prevState => {
        return {
            count: prevState +1
        }
    })
}

使用this来定位setState，告诉函数是修改本组件的状态，然后修改结果通过函数返回，将count+1

这样能够实现我们想要的功能，不过还有更简便的写法如下，箭头函数后面直接跟着括号包裹的返回值

add = () => {
    this.setState(prevState => ({count: prevState.count + 1}))
}

在render中使用this

同样的，在render()中也是需要this来定位需要的值和函数，

所以作以下更改

{subtract} -> {this.substract}
{count} -> {this.state.count}
{add} -> {this.add}

到了这一步我们的程序就能成功完美地运行了。

补充：constructor method

In React, constructors are mainly used for two purposes:

It used for initializing the local state of the component by assigning an object to this.state.

It used for binding event handler methods that occur in your component.

constructor 的作用一是初始化组件的state，二是绑定组件的函数

所以当你不能直接使用state字段，或是不能使用箭头函数时，constructor 来替代它们

那么就来演示一下要如何使用，

首先我们要知道的是 constructor 的基本语法如下

Constructor(props){  
    super(props);  
}

然后是将state在constructor中初始化，如下使用this对state进行定位

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

最后是将箭头函数改为普通的函数需要使用bind，方法如下

this.add = this.add.bind(this)

于是我们就能直接将add = () => 改为add()

这样我们就实现了function component向class component的转换

【React】如何将function component转换为class component

前言