原文: 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 名称用于调试
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 }
原文地址:https://www.jb51.cc/react/307888.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。