React是否有类似Knockout JS的声明式标记绑定语法？

React 原生没有提供类似 Knockout 的 data-bind 指令式声明绑定语法，这是因为 JSX 本质是 JavaScript 的语法扩展，而非独立的模板语言，所有渲染逻辑默认都通过原生 JS 语法实现。

你可以通过两种方式优化写法，降低代码冗余： #

1. 简化原生 JSX 写法 #

原生的 map 写法可以通过简化箭头函数语法，省略多余的大括号和 return 关键字，调整后结构已经非常清晰：

<table>
  <tbody>
    {/* 箭头函数单返回值用圆括号包裹即可省略 return */}
    {articles.map(a => (
      <tr key={a.id}> {/* React 要求列表项必须添加唯一 key 属性 */}
        <td>{a.property1}</td>
        <td>{a.property2}</td>
      </tr>
    ))}
  </tbody>
</table>

2. 自定义组件实现声明式循环 #

如果偏好把循环逻辑放在标签上的风格，可以自行封装一个通用的循环组件，封装后可以实现接近 Knockout 的使用体验：

<table>
  <tbody>
    <For each={articles} item="a">
      <tr>
        <td>{a.property1}</td>
        <td>{a.property2}</td>
      </tr>
    </For>
  </tbody>
</table>

对应的 For 组件简易实现参考：

const For = ({ each, item, children }) => {
  return each.map((elem, index) => 
    React.cloneElement(children, {
      [item]: elem,
      // 优先用元素自身的唯一属性作为 key，没有的话兜底用索引
      key: elem.id ?? index
    })
  )
}

也可以直接使用社区开源的相关工具组件，不需要自行实现。 #

注意事项 #

自定义循环组件的灵活性不如原生 map 写法，如果需要对列表做过滤、排序等额外处理，直接在 map 前链式调用 filter、sort 等方法会更方便，同时原生写法的 TypeScript 类型提示也会更友好。

内容的提问来源于stack exchange，提问作者Joshua Frank