列表渲染

当我们有一个场景需要展示一个订单列表，用户可以选择过滤掉某些订单便于快速操作，我们可以通过内联 map 和 filter 来完成这个功能。

import { FC } from 'gyron'

const App = FC(({ orders }) => {
  return (
    <ul>
      {orders
        .filter((order) => order.price > 2000)
        .map((order) => (
          <li>{order.name}</li>
        ))}
    </ul>
  )
})

我们通过 filter 先筛选出价格大于 2000 的订单然后通过 map 渲染它们。这是一个比较常见的用法，也可以在 map 中使用条件判断来完成这些事情。

import { FC } from 'gyron'

const App = FC(({ orders }) => {
  return (
    <ul>
      {orders.map((order) => {
        if (order.price > 2000) {
          return <li style={{ color: 'red' }}>{order.name}</li>
        }
        return <li>{order.name}</li>
      })}
    </ul>
  )
})

我们可以通过条件判断，让订单金额大于 2000 的文字更醒目。上面代码还可以简化成这样

import { FC } from 'gyron'

const App = FC(({ orders }) => {
  return (
    <ul>
      {orders.map((order) => (
        <li style={{ color: order.price > 2000 ? 'red' : 'inherit' }}>
          {order.name}
        </li>
      ))}
    </ul>
  )
})

Key

在循环渲染中如果存在 key 值，那么循环中将会使用 key 作为比对标准，最小化的更新 dom 节点。

import { FC } from 'gyron'

const App = FC(({ orders }) => {
  return (
    <ul>
      {orders.map((order) => (

        <li key={order.id}>{order.name}</li>

      ))}
    </ul>
  )
})

当 orders 发生变更，我们会根据传递的 id 进行对比，如果发现只是顺序变更，那么 Gyron.js 只会去更新它们在 DOM 树中的顺序，而不是重新去渲染。

memo 参数

在一些循环渲染的例子中可以极大的提高渲染速度和响应速度，在基准测试中使用 memo 可以将更新操作和选中操作提高 5 到 15 倍。如果你只是一般的逻辑渲染完全不需要使用此参数进行优化。

import { FC, useValue } from 'gyron'

const Table = FC(() => {
  const rows = useValue([])
  return (
    <table>
      <tbody>
        {rows.value.map(({ id, label }) => {
          return (

            <tr
              key={id}
              class={id === selected.value ? 'danger' : null}
              memo={[id === selected.value, label]}
            ></tr>

          )
        })}
      </tbody>
    </table>
  )
})

memo 属性会告诉 Gyron.js 当属性中的值发生变更才继续渲染子节点，否则将跳过子节点的渲染，在循环中尤其有用。更新信息可以参见基准测试结果 https://krausest.github.io/js-framework-benchmark/current.html