为什么 reactjs 中的箭头函数有时被视为组件？

Question

我目前正在学习 reactJS，我发现很难理解为什么 reactjs 中的箭头函数有时被视为组件，有时被视为普通箭头函数。

在这个例子中：

    class CommentListContainer extends React.Component {

      state = { comments : [] };

      componentDidMount() {

        fetchSomeComments(s => // 1- here fetchSomeComments is treated as a normal arrow function

          this.setState({ comments: s }));

      }

      render() {

        return <CommentList comments={this.state.comments} />; // 2- here CommentList is treated as a component

      }

    }

    // 1

    const fetchSomeComments = cb =>

      cb([

        { author: "Chan", body: "You look nice today." },

        { author: "You", body: "I know, right?!" }

      ]);

    // 2

    const CommentList = comments =>

      <ul>

        {

          comments.comments.map(

            (c, index) => (

            <li key = {index}>{c.body}—{c.author}</li>

            )

          )

        }

      </ul>

我想理解这一点，如果 CommentList 是一个组件，它怎么能写成一个带有构造函数（props）的类？

Answer 1

ReactJS 中的箭头函数被认为是一个函数组件或只是一个箭头函数，具体取决于它们返回的内容。const CommentList = comments =>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; comments.comments.map(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (c, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key = {index}>{c.body}—{c.author}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </ul>&nbsp;上述组件称为无状态组件。它除了渲染道具什么都不做。没有状态，钩子等。但是可以有状态的组件是通过react hooks实现的。也就是说，功能组件可以做类组件所做的一切。它可以渲染状态执行操作，而不仅仅是返回 JSX（就像一个无状态组件）要详细了解这一点，请查看React Function Component要使 CommentList 成为类组件，可以执行以下操作：class CommentList extends React.Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;super(props);&nbsp; &nbsp; }&nbsp; &nbsp; render () {&nbsp; &nbsp; &nbsp; /* destructuring props so that we can use "comments" prop directly instead of&nbsp; &nbsp; &nbsp; using this.props.comments */&nbsp; &nbsp; &nbsp; const {comments}=this.props;&nbsp;&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {comments.comments.map((c, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {c.body}—{c.author}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}TLDR；普通箭头函数和函数式组件的区别在于返回类型，即函数式组件返回 JSX。

Answer 2

class CommentList extends React.Component {&nbsp; construct(props) {&nbsp; &nbsp; super(props);&nbsp; }&nbsp; render() {&nbsp; &nbsp; let list_items = [];&nbsp; &nbsp; for(let c of this.props.comments) {&nbsp; &nbsp; &nbsp; &nbsp; list_items.push(<li key = {index}>{c.body}—{c.author}</li>);&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <ul>{list_items}</ul>&nbsp; &nbsp; );&nbsp; }}function CommentList(props) {&nbsp; &nbsp; let list_items = [];&nbsp; &nbsp; for(let c of props.comments) {&nbsp; &nbsp; &nbsp; &nbsp; list_items.push(<li key = {index}>{c.body}—{c.author}</li>);&nbsp; &nbsp; }&nbsp; &nbsp; return (<ul>{list_items}</ul>);}在 React 中它们是一样的，第二个称为“函数组件”。&nbsp;