我可以使这个 React 组件无状态吗?

Question

我没有声明，但它确实有逻辑。 一个简单的映射。 使其无状态的过程是什么？

import React from 'react';
import BMFave from './BMFave.jsx';
class BMTag extends React.Component {
  constructor(props) {
    super(props);
  }
  render () {
    const bookmarks = this.props.bookmarks.map((bookmark) =>
      <BMFave bookmark={bookmark} key={bookmark.id} />
    );
    return (
      <div className="bookmark_page" id="{this.props.tag}" >
        <div className="bookmark_tag_title">
          <p className="bookmark_tag_title_p">
            {this.props.tag}
          </p>
        </div>
        {bookmarks}
      </div>
    )
  }
}
export default BMTag;

Answer 1

无状态并不意味着没有逻辑，它意味着没有状态。所以你已经在那里了。

当然，您可以简化：

export default ({bookmarks, tag})=> (
  <div className="bookmark_page" id={tag} >
    <div className="bookmark_tag_title">
      <p className="bookmark_tag_title_p">
        {tag}
      </p>
    </div>
    {
      bookmarks.map(bm=> <BMFave bookmark={bm} key={bm.id} />)
    }
  </div>
)

Answer 2

当然。只需将映射函数移到函数之外即可。如果你愿意，你也可以把它留在里面，但这不是最佳实践，因为它会在每次渲染时重新创建（我认为）。

import React from 'react';
import BMFave from './BMFave.jsx';
const constructBookmarks = (bookmarks) => {
  return bookmarks.map((bookmark) =>
    <BMFave bookmark={bookmark} key={bookmark.id} />
  );
};
export default (props) => {
  return (
    <div className="bookmark_page" id={props.tag} >
      <div className="bookmark_tag_title">
        <p className="bookmark_tag_title_p">
          {props.tag}
        </p>
      </div>
      {constructBookmarks(props.bookmarks)}
    </div>
  );
};

Answer 3

只要你的组件没有状态，也不使用 React 生命周期方法或 refs，它就可以是一个无状态的组件。

 const BMTag = props => {
    const bookmarks = props.bookmarks.map((bookmark) =>
       <BMFave bookmark={bookmark} key={bookmark.id} />);
    return (
      <div className="bookmark_page" id="{props.tag}" >
        <div className="bookmark_tag_title">
          <p className="bookmark_tag_title_p">
            {props.tag}
          </p>
        </div>
        {bookmarks}
      </div>
    )
  }
export default BMTag;

有关更多信息，您可以查看 Dan Abramov 撰写的这篇关于表示和容器组件的文章。