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

【问题标题】：Why are arrow functions in reactjs sometimes treated as components?为什么 reactjs 中的箭头函数有时被视为组件？
【发布时间】：2020-08-13 03:42:22
【问题描述】：

我目前正在学习 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）的类？

【问题讨论】：

React 有 2 种类型的组件，Class 组件和 Functional 组件。所以箭头函数属于功能组件。
箭头函数是一种 javascript 语法，React 允许函数式组件这一事实意味着您可以使用箭头函数语法来定义它们。
是的，我明白了，现在我发现很难将它转换为类组件，因为我不知道如何使用构造函数（props）解析 cmets，你能推荐我有什么要真正理解它是如何工作的，谢谢。

标签： javascript reactjs ecmascript-6 arrow-functions

【解决方案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。

【讨论】：

谢谢你，这对我了解如何使用道具有很大帮助。

【解决方案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 中是一样的，第二个叫做“函数组件”。 React doc

【讨论】：