我可以使这个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

当然可以。只需将您的映射功能移到该功能之外。如果你愿意的话，你也可以把它放在里面，但这不是最好的做法，因为它会在每个渲染器上重新创建（我认为是）。

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 2

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

当然你也可以简化：

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 3

只要你的组件没有的状态，不使用阵营lifecycle methods或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; 

欲了解更多信息，你可以检查这篇文章约Presentational and Container Components by Dan Abramov。