为什么 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 =>

      <ul>

        {

          comments.comments.map(

            (c, index) => (

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

            )

          )

        }

      </ul> 

上述组件称为无状态组件。它除了渲染道具什么都不做。没有状态，钩子等。

但是可以有状态的组件是通过react hooks实现的。也就是说，功能组件可以做类组件所做的一切。它可以渲染状态执行操作，而不仅仅是返回 JSX（就像一个无状态组件）

要详细了解这一点，请查看React Function Component

要使 CommentList 成为类组件，可以执行以下操作：

class CommentList extends React.Component {

    constructor(props) {

         super(props);

    }

    render () {

      /* destructuring props so that we can use "comments" prop directly instead of

      using this.props.comments */

      const {comments}=this.props; 

      return (

        <ul>

          {comments.comments.map((c, index) => (

            <li key={index}>

              {c.body}—{c.author}

            </li>

          ))}

        </ul>

      );

    }

}

TLDR；普通箭头函数和函数式组件的区别在于返回类型，即函数式组件返回 JSX。

Answer 2

class CommentList extends React.Component {

  construct(props) {

    super(props);

  }

  render() {

    let list_items = [];

    for(let c of this.props.comments) {

        list_items.push(<li key = {index}>{c.body}—{c.author}</li>);

    }

    return (

      <ul>{list_items}</ul>

    );

  }

}

function CommentList(props) {

    let list_items = [];

    for(let c of props.comments) {

        list_items.push(<li key = {index}>{c.body}—{c.author}</li>);

    }

    return (<ul>{list_items}</ul>);

}

在 React 中它们是一样的，第二个称为“函数组件”。