Question

我正在关注本教程 this tutorial在他使用这种Component声明的地方，我觉得很奇怪（对于React中的新手）

const Story = ({ story, columns, onArchive }) => {
  const {
    title,
    url,
    author,
    comments,
    points,
    objectID,
  } = story;

  return (
    <div className="story">
      <span style={{ width: columns.title.width }}><a href={url}>{title}</a></span>
      <span style={{ width: columns.author.width }}>{author}</span>
      <span style={{ width: columns.comments.width }}>{comments}</span>
      <span style={{ width: columns.points.width }}>{points}</span>
      <span style={{ width: columns.archive.width }}>
        <ButtonInline onClick={() => onArchive(objectID)}>Archive</ButtonInline>
      </span>
    </div>
  );
}

基本上，他在一个没有渲染功能的函数中拥有该组件，只是直接返回。

出于好奇，我使用更熟悉的方法重新创建了它：

class Story extends React.Component {
  render() {
    const {
      title,
      url,
      author,
      comments,
      points,
      objectID,
    } = this.props.story;

    return(
      <div className="story">
      <span style={{ width: this.props.columns.title.width }}><a href={url}>{title}</a></span>
      <span style={{ width: this.props.columns.author.width }}>{author}</span>
      <span style={{ width: this.props.columns.comments.width }}>{comments}</span>
      <span style={{ width: this.props.columns.points.width }}>{points}</span>
      <span style={{ width: this.props.columns.archive.width }}>
        <ButtonInline onClick={() => this.props.onArchive(objectID)}>Archive</ButtonInline>
      </span>
    </div>);
  }
}

，并且呈现相同的效果。

现在，我想知道以下内容：

前一个实现接受状态吗？如果是这样，如何编码构造函数和状态声明？
它比后者更有效吗？它看起来确实更为简洁明了，但是这种编码风格的优缺点是什么？
它叫什么？我想了解更多有关此的信息。

谢谢！

Answer 1

1。前一种实现接受状态吗？如果是这样，如何编码构造函数和状态声明？

答案：不，以前的实现不会接受状态，因为它是无状态组件或（功能组件），它们不持有状态，当组件不需要保持状态时，我们会使用此类组件。

2。它比后者更有效吗？当然看起来更加简洁明了，但是这种编码风格的优缺点是什么？

答案：：始终建议在不需要管理状态的组件时使用状态状态较少的组件（管理状态的组件）或该组件没有需要保持状态的场景，我建议您使用功能组件。

为什么？，因为创建的状态组件越多，保持状态的组件就越多，因此需要确保当拥有状态的容器组件很少时，请妥善管理这些内容。在需要更新状态的位置就更少了。

如果要使用任何生命周期挂钩，则必须使用基于类的组件。

3。这叫什么？我想了解更多有关此的信息。

答案：

第一种方法称为：无状态组件或（功能组件）

const welcome = (props) = {
  //I am generally used where managing state is not required
  return <h1>Hello, {props.name}</h1>;
}
export default welcome;

第二种方法称为：完整状态组件或（容器组件）

class Welcome extends React.Component {
  //I can hold state
  //I have lifecycle hooks
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
export default Welcome;

签出Class based component VS Functional components

还有Stateful vs. Stateless Functional Components in React

如果您决定使用无状态功能组件，将会有很多好处，易于编写，理解和测试，并且可以避免使用this关键字。

从React v16开始，

使用无状态（功能组件）比类组件（有状态组件）没有性能优势。

Answer 2

第一个被称为功能组件。第二个称为类组件。

您可以通过{@ {3}}官方React Docs了解更多有关它们的信息。

现在，回答您的问题

是的。功能组件可以使用挂钩来具有状态。它们是在撰写v16.7中引入的alpha时。 Hooks不仅带来了对状态的支持，还带来了其他组件生命周期的扩展
最初使用功能组件来创建无状态组件。但是现在有了钩子，它也可以用于状态组件。功能组件包含功能编程。您可以在https://reactjs.org/docs/hooks-state.html
第一个称为功能组件，第二个称为类组件。

React Component的这两种实现之间有什么区别？

2 个答案: