React 组件从有状态到无状态（区别）

Posted 2023-02-23

【中文标题】React 组件从有状态到无状态（区别）

【英文标题】：React Component from Stateful to Stateless (Difference)

【发布时间】：2017-08-30 04:51:20

【问题描述】：

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

如果我错了，请纠正我：

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

import React from "react";

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

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

        );
    

无状态组件与上述组件有何不同？

【问题讨论】：

您认为这是一个有状态组件时考虑了哪些因素？正如我现在所看到的，它既不是有状态的也不是无状态的。它只是静态的。

据我了解，无状态组件仅从道具获取所有渲染数据。一旦你开始摆弄this.state，你就得到了一个有状态的组件。

可能重复：***.com/questions/34512696/…

【参考方案1】：

React 状态完整组件通常具有类语法并扩展 React 组件基类。这使您可以访问 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>
    )

但在 react 类中，您只需访问 this.props.whatever 即可获得道具

【讨论】：

纯功能组件是实现无状态组件的一种方式。你答案第一段的关键词是通常。将无状态组件实现为类（ES6 或React.createClass）是完全有效的。所以，如果你有一个功能组件，它就是一个无状态组件；但是您没有功能组件这一事实并不一定意味着所讨论的组件不是无状态的。

我认为从语义上讲你所说的是完全正确的，但是我认为，我可能错了，在反应领域，无状态功能组件被理解为一个函数而不是一个类，因为在一个类中你可以有状态，而在一个函数中你不能。

再一次，你说的是无状态的功能组件。当然，它必须使用函数来实现（因此是 functional 形容词）。当然，它必须是无状态的，因为您无法访问功能组件中的状态。您可以只说功能组件，并且隐含无状态。但是，在一个类中，您可以决定是否使用状态，这决定了类组件是有状态的还是无状态的。

【参考方案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() 可以在组件级别管理状态。希望这有助于您更好地了解差异！