React JS

🖥 Работа с коллекциями в JSX



⏩В работе с коллекциями элементов в JSX по большей части нет ничего особенного.

С другой стороны, задача обработки списков элементов настолько частая, что будет не лишним её обсудить отдельно.



⏩На скрине приведён типичный код, в котором коллекция генерируется прямо в том месте, куда и подставляется. Здесь можно снова увидеть, что внутрь JSX через {} вложено выражение, внутри которого опять появляется JSX-код. Как правило, рекурсия на этом заканчивается. Если нужна более сложная обработка, то имеет смысл вынести генерацию коллекции в метод компонента и вызывать его внутри render. Например, ниже выделена функция renderList(), которая формирует список для отрисовки:

class List extends React.Component {

  renderList = (data) => {

    return data.map(item => <li>{item.name}</li>);

  }



  render() {

    const { data } = this.props;



    return (

      <ul>

        {this.renderList(data)}

      </ul>

    );

  }

}

⏩Проп key

Для повышения эффективности, React настоятельно рекомендует идентифицировать каждую генерируемую строку коллекции. Связано это с механизмом, который производит изменения в DOM.

Генерируя коллекцию элементов в JSX, нужно обязательно проставлять уникальный проп key, который не меняется при повторной генерации коллекции.



⏩Чаще всего с этой задачей не возникает проблем, так как у любой сущности, с которой мы работаем, есть свой идентификатор (например, primary key из базы данных).

class List extends React.Component {

  render() {

    const { data } = this.props;



    return (

      <ul>

        {data.map((item) => <li key={item.id}>{item.name}</li>)}

      </ul>

    );

  }

}



const items = [

  { name: 'first', id: 1 },

  { name: 'second', id: 2 }

];



const mountNode = document.getElementById('react-root');

const root = ReactDOM.createRoot(mountNode);

root.render(<List data={items} />);

📎 Читать подробнее



@react_tg