React组件从有状态到无状态（差异）

我正在尝试解决React有状态组件和无状态组件之间的区别。React组件从有状态到无状态（差异）

纠正我，如果我错了：

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

import React from "react"; 

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

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

     ); 
    } 
}

和无状态组件是如何将上面的有什么不同？

来源

2017-04-04 JakeBrown777

你有什么考虑得出结论，这是一个有状态组件？正如我现在看到的那样，它不是有状态的，也不是无状态的。它只是静态的。 – Leandro

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

可能的重复：https://stackoverflow.com/questions/34512696/reactjs-difference-between-stateful-and-stateless –

反应状态满组件通常具有类语法并扩展了反应组件基类。这使您可以访问反应生命周期方法，如渲染，componentDidMount等。

另一方面，无状态功能组件仅仅是返回jsx的函数。您不处于反应生命周期中，无法访问组件基类方法。

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

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

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

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

，但在简单地通过访问this.props.whatever

来源

2017-04-04 20:04:27

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

我认为你所说的话是完全正确的，但是我认为，我可能错了，在反应区域中，无国籍功能组件被理解为是一种功能而不是一个班级，因为在一个班级中你可以有状态，而在你不能的功能中。 –

同样，你说无国籍**功能**组件。当然，它必须使用一个函数来实现（因此是* functional *形容词）。当然，它必须是无状态的，因为你不能在一个功能组件中访问状态。你可以说功能组件，而无状态是隐含的。然而，在一个类中，你可以决定是否使用状态，这是决定类组件是有状态的还是无状态的。 – Leandro

反应类，你必须的道具，你现在所拥有的是什么类成分： https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

的功能组件可以从字面上写一个函数：

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

一类组分是类似于编写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()可以在组件级管理的状态。希望这可以帮助您更好地了解差异！

来源

2017-04-04 20:30:24 rockchalkwushock

React组件从有状态到无状态（差异）

回答

相关问题