从有状态到无状态的反应组件（差异）

Question

import React from "react";

export class Mycomponent extends React.Component {
    render() {
        return (

            <div>
                <p>My Component</p>
            </div>

        );
    }
}

Answer 1

react状态完整组件通常具有类语法并扩展react组件基类。这使您能够访问react生命周期方法，如render、componentDidMount等。

另一方面，无状态函数组件只不过是返回JSX的函数。您不在react生命周期中，并且没有访问组件基类方法的权限。

下面是一些无状态功能组件的示例代码。

export default function example() {
    return (
        <h1>This is where the jsx goes</h1>
    )
}

export default function example(props) {
    return (
        <h1>{props.person.firstName}</h1>
    )
}