[译] Deku Component Specs

原文: https://github.com/dekujs/deku/blob/master/docs/guides/components.md

Components 是 UI 当中重用的部分.
可以把 component 认为是 select 元素那样可以复合的自定义元素.

每个生命周期的钩子可以定义一个函数,用来操作 state,会偶尔返回需要的数据.

component 只不过是对象,对象上有函数和属性.
其中不存储任何的 state,也没有到处用的 this.

jsexport let Button = {
  render (component) {
    let {props,state} = component
    return <div>{props.children}</div>
  }
}

使用模块只需要引用一下,然后挂载:

jsimport {Button} from './button.js'
import {element,tree,render} from 'deku'

let app = tree(
  <Button>Hello!</Button>
)

render(app,document.body)

首先,引入 button 对象,然后,用 deku 的函数创建应用.
然后,把元素挂在到应用上. 然后,用 render 函数渲染到 DOM 当中.

所有可用的 component 属性包括:

定义 component 名称用于调试

jsexport let name = 'My Component'

initialState

获取 component 初始状态

jsexport function initialState (props) {
  return {
    open: true
  }
}

defaultProps

默认 props 定义好以后在所有的实例当中都有效

jsexport let defaultProps = {
  style: 'round' 
}

beforeMount

这个钩子在客户端和服务端都会调用
Client: Yes
Server: Yes

jsexport function beforeMount (component) {
  let {props,state,id} = component
}

shouldUpdate

每次 update 都会调用,用于跳过渲染提高 component 性能
Client: Yes
Server: No

jsexport function shouldUpdate (component,nextProps,nextState) {
  let {props,id} = component
  return true
}

beforeRender

每次渲染前都会调用,客户端和服务端都会
- 根据下一个 props 更新 stream/emitter

Client: Yes
Server: Yes

jsexport function beforeRender (component) {
  let {props,id} = component
}

beforeUpdate

初次渲染不会调用,只是在更新时调用
用例:
- 根据下一个 props 更新 stream/emitter

Client: Yes
Server: No

jsexport function beforeUpdate (component,id} = component
}

render

渲染 component. 传进一个 setState 可用在 sub-component 里调用
注意未来可能会改
Client: Yes
Server: Yes

jsexport function render (component,setState) {
  let {props,id} = component
  return <div></div>
}

afterRender

每次渲染后调用,包括第一次
它在初次渲染时也调用,这比 afterUpdate 要好
这让我们按照每次渲染去考虑问题,而不是生命周期
在这里不允许更新 state,因为很可能导致你根据 DOM 来修改状态
用例:
- 基于最新的 state 更新 DOM,比如,动画,事件处理

Client: Yes
Server: No

jsexport function afterRender (component,el) {
  let {props,id} = component
}

afterUpdate

不在初次渲染是调用,在其他每次渲染时调用
用例:
- 根据上一个 state 的 transition 修改 state
- state 被修改之后调用

Client: Yes
Server: No

jsexport function afterUpdate (component,prevProps,prevState,id} = component
}

afterMount

只在 component 初次渲染后调用,只会调用一次
用例:
- 统计追踪
- 加载初始数据
- 马上更新需要的状态,open/close
- 在 window/document 上添加 DOM 事件处理器
- 移动 DOM 当中的元素,dislog 移动到根节点
- 聚焦到元素

Client: Yes
Server: No

jsexport function afterMount (component,el,id} = component
}

beforeUnmount

只会在元素被移除时调用一次,用于 component 卸载之后的清除
用例:
- 解绑 window/document 的事件处理器
- 在 component 卸载后对 DOM 做任何修改
- 解绑事件 emitters
- Disconnect streams

Client: Yes
Server: No

jsexport function beforeUnmount (component,id} = component
}