[번역] 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 
{props.children}
  }
}

모듈을 사용하면 참조한 다음 마운트하기만 하면 됩니다.

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

let app = tree(
  Hello!
)

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

이 갈고리는 클라이언트와 서버에서 클라이언트: Yes Server: Yes

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

shouldUpdate

업데이트마다 호출됩니다. 렌더링을 건너뛰고 component 성능을 향상시키는 데 사용됩니다. Client: Yes Server: No

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

beforeRender

매번 렌더링하기 전에 호출되며 클라이언트와 서버는 다음 프롬프트에 따라stream/emitter를 업데이트합니다
Client: Yes Server: Yes

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

beforeUpdate

첫 번째 렌더링은 호출되지 않습니다. 다만 업데이트할 때 용례를 호출합니다. - 다음 props에 따라stream/emitter를 업데이트합니다.
Client: Yes Server: No

jsexport function beforeUpdate (component, nextProps, nextState) {
  let {props, state, id} = component
}

render

component를 렌더링합니다.setState를 보내면sub-component에서 호출할 수 있습니다. 미래에 클라이언트: Yes Server: Yes

jsexport function render (component, setState) {
  let {props, state, id} = component
  return 

}

afterRender

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

Client: Yes
Server: No

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

afterUpdate

첫 번째 렌더링이 아닌 것은 호출입니다. 다른 렌더링이 있을 때마다 용례를 호출합니다. - 지난state의transition에 따라 state - state가 수정된 후에 호출합니다.
Client: Yes Server: No

jsexport function afterUpdate (component, prevProps, prevState, setState) {
  let {props, state, id} = component
}

afterMount

component가 처음 렌더링된 후에만 호출됩니다. 한 번만 호출됩니다. - 통계 추적 - 초기 데이터 불러오기 - 즉시 업데이트에 필요한 상태입니다. 예를 들어 Open/close - window/document에 DOM 이벤트 프로세서 - DOM에 있는 요소를 추가합니다. 예를 들어 dislog를 루트 노드로 이동 - 요소에 초점을 맞추기
Client: Yes Server: No

jsexport function afterMount (component, el, setState) {
  let {props, state, id} = component
}

beforeUnmount

원소가 제거되었을 때 한 번만 호출됩니다. component 마운트 해제 후의 제거 용례입니다. - window/document 해제 이벤트 프로세서 - component 해제 후 DOM에 대한 수정 - 해제 이벤트emitters - Disconnect streams
Client: Yes Server: No

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