Почему функции стрелок в reactjs иногда рассматриваются как компоненты? - PullRequest
Новая
       103

Почему функции стрелок в reactjs иногда рассматриваются как компоненты?

2 голосов
/ 29 апреля 2020

Сейчас я изучаю 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)?

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Функция стрелки в ReactJS считается либо функциональным компонентом , либо просто функцией стрелки в зависимости от того, что они возвращают. 

const CommentList = comments =>
      <ul>
        {
          comments.comments.map(
            (c, index) => (
            <li key = {index}>{c.body}—{c.author}</li>
            )
          )
        }
      </ul>

Вышеуказанный компонент называется компонентом без состояния . Он ничего не делает, но делает реквизит. Нет состояний, крючков и т.п. c.

Но компоненты, которые могут иметь состояние, становятся возможными с помощью реагирующих крюков . То есть функциональный компонент может просто делать все, что делает компонент класса. Он может отображать состояния выполнять операции, а не просто возвращать только JSX (как компонент без состояния)

Чтобы понять это подробно, взгляните на Компонент функции реагирования

Чтобы сделать 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.

1 голос
/ 29 апреля 2020 
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, второй называется «функциональными компонентами». Реакция до c

...