React 组件的这两种实现有什么区别？ [复制]

Question

我正在学习本教程 this tutorial 他使用这种我觉得很奇怪的组件声明（对于 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>);
  }
}

它的渲染是一样的。

现在，我想知道以下几点：

1. 以前的实现是否接受状态？如果是这样，如何编写构造函数和状态声明？

2. 是不是比后者更有效率？它看起来确实更简洁明了，但是这种编码风格的优缺点是什么？

3. 它叫什么？我很想了解更多关于这方面的信息。

谢谢！

Answer 1

1.前一个实现是否接受状态？如果是这样，如何编写构造函数和状态声明？

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

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

回答：当您的组件没有必要管理状态时，始终建议使用具有较少状态的组件（管理您的状态的组件） 或者组件没​​有需要保持状态的场景，我建议您使用功能组件。

为什么？这是因为您创建的有状态组件越多，保存您的状态的组件就越多，您需要确保 妥善管理这些，当保存状态的容器组件很少时，您需要更新状态的地方就会减少。

如果你想使用任何生命周期钩子，那么你必须使用基于类的组件。

3.这叫什么？我很想了解更多关于这方面的信息。

回答：

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

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

第二种方法称为：Statefull组件 OR (Container components)

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

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

你可以通过@官方 React Docs @https://reactjs.org/docs/hooks-state.html了解更多信息

现在，回答你的问题

1. 是的。功能组件可以使用钩子来拥有状态。它们在撰写本文时是在 v16.7 中引入的 alpha 版本。 Hooks 不仅带来了对状态的支持，还带来了其他组件生命周期的扩展

2. 最初的功能组件用于创建无状态组件。但是现在有了钩子，它也可以用于有状态的组件。函数式组件包含函数式编程。您可以在https://reactjs.org/docs/hooks-intro.html

阅读类如何混淆人和机器部分

3. 第一个称为功能组件，第二个称为类组件。