类组件

Question

我知道反应应用程序中stateless和statefull components之间的区别。我想知道将stateless和statefull components一起使用的有效方法是什么。在任何特定情况下使用一个是否有任何性能优势

Answer 1

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

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

理论上，使用无状态组件可能会带来性能优势，因为它们是纯函数（或者应该是纯函数），但我没有任何硬数据。

Answer 2

类组件

当您想在组件中存储一些本地数据时，可以使用类组件（具有状态）。例如 -

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>
    );
  }
}

这些组件也称为智能容器或组件，因为它们具有基于状态（Redux模式）修改UI的所有逻辑。

功能组件或无状态组件

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

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

功能组件有各自的优点，如：

它们很容易测试。
它们很容易理解。
效果
不用担心this关键字。

如果还有其他问题，请参阅this文章。

何时使用无状态组件进行反应

2 个答案:

类组件

功能组件或无状态组件