Gyron.js 文档

内置属性

这篇文档将介绍 Gyron 中有哪些内置属性，这些属性有什么作用，用户应该怎么去使用。有些内置属性是为了优化渲染速度，有些内置属性是为了快捷渲染。

ref

ref 可以应用在组件或者元素节点上。具体用法可以参考Ref 的用法。用在组件上时 ref 是组件暴露的对象，用在元素节点上时 ref 是真实的元素。

import { createRef, onAfterMount, exposeComponent, FC } from 'gyron'

const Child = FC(() => {
  exposeComponent({
    msg: 'Gyron',
  })
  return //...
})

const App = FC(() => {
  const ref = createRef()

  onAfterMount(() => {
    console.log(ref.current)
    // {
    //   msg: 'Gyron',
    // }
  })

  return <Child ref={createRef}></Child>
})

key

在循环渲染中用于比对节点的唯一的值，它们不应该是数组的下标。

当用户定义了 key 之后则处于 keyed 模式下，在这种模式下很多内部操作都将变得更快，因为算法会自动在同层数据中找到没有变更的节点并复用。当用户没有定义 key 时渲染则处于 Non keyed 模式下，在这种模式下可能有些行为速度会变慢，比如更新一条记录。

举一个 keyed 例子。

import { FC } from 'gyron'

const App = FC(({ orders }) => {
  return (
    <ul>
      {orders.map((order) => (
        <li key={order.id}>{order.name}</li>
      ))}
    </ul>
  )
})

memo

memo 通常在循环渲染中使用，在使用之后会弥补只传入 key 时算法的不足。它和 keepComponent 不同，keepComponent 是保证组件的状态一直不变，而 memo 是用于节点的更新。

传递 memo 之后，在渲染的时候会比对 memo 中的值是否发生更改，如果没有则直接跳过，如果有变更再走 diff 算法进行更新。

更详细的解释可以参考如何正确的使用 memo

html

html 属性是为了解决服务端渲染时插入动态的子节点，在客户端渲染时也可以使用。

import { FC } from 'gyron'

const App = FC(({ orders }) => {
  return <div html="<h1>Gyron</h1>"></div>
})

如果使用了 html 属性的同时还使用了 children，那么现在以 children 属性为准，并且控制台将会报告此警告。

import { FC } from 'gyron'

const App = FC(({ orders }) => {
  return <div html="<h1>Hello Gyron</h1>">Welcome Gyron</div>
})
// <div>Welcome Gyron</div>

static

在编写一个复杂的组件的时候，往往在更新时会消耗大量的浏览器性能。

此属性只作用于组件更新时，也就是说 gyron 的节点中如果包含此属性，那么 gyron 在下次更新时将完全跳过设置了 static 的节点以及子节点。

它与 memo 不同，因为 memo 的值是一个 boolean 的数组，里面的值是用来告诉 gyron 是否需要更新。换句话说就是 memo 的值是动态可变的，只有在上一次和这一次发生变更后才会更新。而 static 不同，static 只接受 boolean 类型的值，并且后续将支持编译器自动设置。

import { FC } from 'gyron'

const App = FC(({ orders }) => {
  return <div static>Hello Gyron</div>
})

children

在编写组件时不应该显示的传递 children 属性，应该使用 jsx 语法糖的能力自动生成 children。

isSSR

isSSR 是编写服务端渲染时用到的属性，很多情况下可以使用 isSSR 来区分当前组件所处的环境，如果为 true 代表当前正在服务端渲染环境中，不能访问 window 或者 document 对象，反之则处于浏览器环境中，可以正常使用浏览器环境的 API。

具体例子可以访问isSSR 的用法

页面导航栏