数组 & Keys

Keys & 渲染元素数组

Keys 在每次渲染时帮助 React 识别有哪些元素被修改，新增或删除。我们应该为数组中的 React 元素提供 Key，从而为元素提供稳定的标识：

RES
let numbers = [1, 2, 3, 4, 5];

let items = Belt.Array.map(numbers, (number) => {
  <li key={Belt.Int.toString(number)}> {React.int(number)} </li>
})

Key 最好是能够在所有同级的列表项中唯一标识一个列表项的字符串。通常你会将数据的 ID 作为 Key：

RES
type todo = {id: string, text: string}

let todos = [
  {id: "todo1", text: "Todo 1"},
  {id: "todo2", text: "Todo 2"}
]

let items = Belt.Array.map(todos, todo => {
  <li key={todo.id}> {React.string(todo.text)} </li>
})

如果需要渲染的列表项没有稳定的 ID，最后的手段是将列表项的索引用作 Key：

RES
let items = Belt.Array.mapWithIndex(todos, (i, todo) => {
  // Only do this if items have no stable id
  <li key={Belt.Int.toString(i)}>
    {todo.text}
  </li>
});

Keys 需要在同级的项目中唯一

数组中使用的 Keys 在其同级中应该是唯一的。但是它们不需要是全局唯一的。当我们生成两个不同的数组时，可以使用相同的 Keys：

RES
type post = {id: string, title: string, content: string}

module Blog = {
  @react.component
  let make = (~posts: array<post>) => {
    let sidebar =
      <ul>
        {
          Belt.Array.map(posts, (post) => {
            <li key={post.id}>
              {React.string(post.title)}
            </li>
          })->React.array
        }
      </ul>

    let content = Belt.Array.map(posts, (post) => {
        <div key={post.id}>
          <h3>{React.string(post.title)}</h3>
          <p>{React.string(post.content)}</p>
        </div>
    });
      
      <div>
      {sidebar}
      <hr />
      {React.array(content)}
    </div>
  }
}

let posts = [
  {id: "1", title: "Hello World", content: "Welcome to learning ReScript & React!"},
  {id: "2", title: "Installation", content: "You can install reason-react from npm."}
]

let blog = <Blog posts/>

渲染 list

如果你想要渲染 list，你可以这样做：

RES
type todo = {id: string, text: string}

@react.component
let make = () => {
  let todoList = list{
    {id: "todo1", text: "Todo 1"},
    {id: "todo2", text: "Todo 2"},
  }

  let items =
    todoList
    ->Belt.List.toArray
    ->Belt.Array.map(todo => {
      <li key={todo.id}> {React.string(todo.text)} </li>
    })

  <div> {React.array(items)} </div>
}

创建 array<React.element> 之前，使用 Belt.List.toArray 将列表转换到数组。请注意，由于有额外的转换开销，使用 list 会影响性能。

99%的情况下你会使用数组（与 JS 无缝互操作，生成更快的 JS 代码），但是在某些情况下，可以使用 list 来利用模式匹配等特性。