原文: https://github.com/dekujs/deku/blob/master/docs/guides/components.md
Components 是 UI 当中重用的部分.
可以把 component 认为是 select
元素那样可以复合的自定义元素.
每个生命周期的钩子可以定义一个函数, 用来操作 state, 会偶尔返回需要的数据.
component 只不过是对象, 对象上有函数和属性.
其中不存储任何的 state, 也没有到处用的 this
.
js
export let Button = { render (component) { let {props,state} = component return
{props.children}} }
使用模块只需要引用一下, 然后挂载:
js
import {Button} from './button.js' import {element,tree,render} from 'deku' let app = tree( ) render(app, document.body)
首先, 引入 button 对象, 然后, 用 deku
的函数创建应用.
然后, 把元素挂在到应用上. 然后, 用 render
函数渲染到 DOM 当中.
所有可用的 component 属性包括:
定义 component 名称用于调试
js
export let name = 'My Component'
initialState
获取 component 初始状态
js
export function initialState (props) { return { open: true } }
defaultProps
默认 props 定义好以后在所有的实例当中都有效
js
export let defaultProps = { style: 'round' }
beforeMount
这个钩子在客户端和服务端都会调用
Client: Yes
Server: Yes
js
export function beforeMount (component) { let {props, state, id} = component }
shouldUpdate
每次 update 都会调用, 用于跳过渲染提高 component 性能
Client: Yes
Server: No
js
export function shouldUpdate (component, nextProps, nextState) { let {props, state, id} = component return true }
beforeRender
每次渲染前都会调用, 客户端和服务端都会
- 根据下一个 props 更新 stream/emitter
Client: Yes
Server: Yes
js
export function beforeRender (component) { let {props, state, id} = component }
beforeUpdate
初次渲染不会调用, 只是在更新时调用
用例:
- 根据下一个 props 更新 stream/emitter
Client: Yes
Server: No
js
export function beforeUpdate (component, nextProps, nextState) { let {props, state, id} = component }
render
渲染 component. 传进一个 setState 可用在 sub-component 里调用
注意未来可能会改
Client: Yes
Server: Yes
js
export function render (component, setState) { let {props, state, id} = component return }
afterRender
每次渲染后调用, 包括第一次
它在初次渲染时也调用, 这比 afterUpdate 要好
这让我们按照每次渲染去考虑问题, 而不是生命周期
在这里不允许更新 state, 因为很可能导致你根据 DOM 来修改状态
用例:
- 基于最新的 state 更新 DOM, 比如, 动画, 事件处理
Client: Yes
Server: No
js
export function afterRender (component, el) { let {props, state, id} = component }
afterUpdate
不在初次渲染是调用, 在其他每次渲染时调用
用例:
- 根据上一个 state 的 transition 修改 state
- state 被修改之后调用
Client: Yes
Server: No
js
export function afterUpdate (component, prevProps, prevState, setState) { let {props, state, id} = component }
afterMount
只在 component 初次渲染后调用, 只会调用一次
用例:
- 统计追踪
- 加载初始数据
- 马上更新需要的状态, 比如, open/close
- 在 window/document 上添加 DOM 事件处理器
- 移动 DOM 当中的元素, 比如, dislog 移动到根节点
- 聚焦到元素
Client: Yes
Server: No
js
export function afterMount (component, el, setState) { let {props, state, id} = component }
beforeUnmount
只会在元素被移除时调用一次, 用于 component 卸载之后的清除
用例:
- 解绑 window/document 的事件处理器
- 在 component 卸载后对 DOM 做任何修改
- 解绑事件 emitters
- Disconnect streams
Client: Yes
Server: No
js
export function beforeUnmount (component, el) { let {props, state, id} = component }