我知道stateless和statefull components在反应中的区别。我想知道使用stateless和statefull components的有效方式是什么。在任何特定情况下使用这个优点是否有任何性能优势何时在反应中使用无状态组件

来源

2017-05-03 Vikas Sardana

我会建议你阅读'无状态功能组件'的stackoverflow文档：http://stackoverflow.com/documentation/reactjs/6588/stateless-functional-components#t=201705031313055961133 –

除了@MayankShukla评论，这里是另一篇文章您可能会发现有趣的 - 我刚才写的一篇文章：http://stackoverflow.com/questions/37170809/react-createclass-vs-es6-arrow-function/37170998#37170998。 – Chris

@Chris，真的很棒，我认为你应该把它添加到DOC中，这样它就可以轻松获得:) –

您应该默认使用无状态组件。由于它们不使用状态，所以很容易判断何时应该重新渲染组件，因为如果它们的道具不变，它们将显示相同的内容。

当您需要使用setState或需要使用生命周期挂钩时，应该使用有状态组件。

从理论上讲，使用无状态组件可能会带来性能上的好处，因为它们是纯函数（或者应该是纯函数），但我没有任何硬编码。

来源

2017-05-03 13:13:39

警告：由于无状态组件本身可能是非纯的（例如：呈现当前时间），或者它们呈现非纯组件作为孩子，目前还没有办法表明无状态组件实际上是纯粹的，即使它们的道具没有改变，React也不得不重新渲染它们。理论上无状态组件甚至可能比常规组件慢，但我也没有任何硬数字。 – Brandon

规级料件

类组件（具有状态）可以当你想存储组件内的一些局部数据中。为例如 -

import React from 'react' 

function handleInc (state, props) { 
    return { 
    count: state.count + 1 
    } 
} 

class App extends React.Component { 
    state = { 
    count: 0 
    } 

    handleClick =() => { 
    this.setState(handleInc); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.handleClick}>Increase</button> 
     <p>{this.state.count}</p> 
     </div> 
    ); 
    } 
}

这些组件也称为智能容器或部件，因为它们容纳所有的逻辑用于修改基于状态（终极版图案）的UI。

功能组件或无状态组件

功能组件没有状态或任何本地数据。这些组件可用于通过传递父组件中的道具来更新某些UI。

<Child data={this.state.count} />

功能组件都有自己的优势，如：

他们很容易测试。
他们很容易理解。
性能
有关this关键字无后顾之忧。

如果还有什么，请参阅this文章。

来源

2017-05-03 16:44:26

何时在反应中使用无状态组件

回答

规级料件

功能组件或无状态组件

相关问题