Question

我正在尝试找出React Stateful组件和无状态组件之间的区别。

如果我错了，请纠正我：

所以，这是一个有状态的组件：

import React from "react";

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

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

        );
    }
}

以及无状态组件与上一组件有何不同？

Answer 1

react state-full组件通常具有类语法并扩展react组件基类。这使您可以访问反应生命周期方法，例如render，componentDidMount等。

另一方面，无状态功能组件只不过是一个返回jsx的函数。您不在反应生命周期中，并且无法访问组件基类方法。

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

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

我还应该指出，在无状态功能组件中，您可以通过将props参数传递给函数来访问props，就像这样。

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

但是在反应类中，只需访问this.props.whatever

即可获得道具

Answer 2

您现在拥有的是Class组件： https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

功能组件可以按字面编写为函数：

export default () => <h1>Hello World!</h1>;

Class组件类似于编写OOP：

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      loading: true
    }
  }
  componentDidMount() {
    const { data, status } = fetch(apiendpoint); // res.data
    if (status !== 200) {
      this.setState({ error: true });
      this._renderError();
    }
    this.setState({ loading: false });
  }
  _renderError() {
   return <h1>Error!</h1>;
  }
  render() {
    const component = loading ?
      <Loading /> :
      <h1>Hello {this.props.data}</h1>;
      return component;
  }
}

您可以通过构造函数在类组件中创建状态，并且通过使用setState()可以在组件级别管理状态。希望这有助于您更好地了解差异！

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

2 个答案: