ループの反応でループを使用する方法.JS ?


この記事はもともとhttps://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to-use-loop-in-react-js年に出版された
if/else文のように、JavaScriptやTypesScriptロジックでループを行いたい場合は、特別なルールを気にする必要はありません.
それはいつものようにJSループだけです、そして、我々はループのすべてのタイプを使用することができます(もちろん、それらのすべてはすべてのケースにとってよいです、しかし、それは可能です).
とにかく、我々は、我々は反応のためのアプリケーションを開発するときは、反復法に焦点を当てる必要があります特別な理由がある.js
要素をレンダリングする反復メソッドを使用します.たとえば、反復を使用して、製品配列から製品の一覧を表示できます.
これを行うには、いくつかのメソッドを使用することができますが、最も人気の一つはマップメソッドですが、別のセクションでマップをカバーします.
ループのためのループ(ほとんどの場合最速のもの)のために、in、またはfor要素を反復するためにループを使用することは非常に人気があります.
このメソッドは、別の関数を使用してコンポーネントの一部をレンダリングするときに便利です.
この例に含まれている2つ目のメソッドは、配列のメソッドです.forech ()
このメソッドは、forループとmapメソッドと比較して、最も遅いものであり、マップのような値を返さないので、特別なケースを使用する必要があります.
コード例を2つのループとforeachメソッドで見てみましょう.
// First one with For of loop
function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];

  const list = []

  for (const [i, product] of products.entries()) {
    list.push(<li>{product}</li>)
  }

  return (
    <div>
      {list}
    </div>
  )
}

function Parent(props) {
  return renderProducts();
}

// Second with forEach method
function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];

  const list = []

  products.forEach((product) => {
    list.push(<li>{product}</li>)
  })

  return (
    <div>
      {list}
    </div>
  )
}

function Parent(props) {
  return renderProducts();
}

読んでくれてありがとう.
DuomlyからのRadek