Reactjs 학습 요약 2
used to create encapsulations with embedded state
var myClass=React.creatClass({
render:function(){
...
}
});
호출 후 최소한render 방법을 포함하는 대상을 되돌려줍니다.이 대상은component (구성 요소) 라고 불린다.
createElement에서 매개 변수로 들어오면react에서 자동으로 이 대상을 호출해서 요소를 만듭니다.
var element=React.createElement(myComponent);
or using JSX :
render:
var component = ReactDOM.render(element, document.getElementById('example'));
(반환값도component 대상이기 때문에 등급 호출을 실현할 수 있습니다)
되돌아오는 component 상태는 ReactDOM을 한 번 더 호출해도 저장됩니다.render(element, document.getElementById('example')); 얻은 대상은 이전의 대상과 같다.
var componentA = ReactDOM.render(
var componentB = ReactDOM.render(
componentA === componentB;//true
This is why you shouldn't construct your own instance. Instead, ReactElement is a virtual ReactComponent before it gets constructed. An old and new ReactElement can be compared to see if a new ReactComponent instance is created or if the existing one is reused.
The render method of a ReactComponent is expected to return another ReactElement. This allows these components to be composed. Ultimately the render resolves into ReactElement with a string tag which instantiates a DOM Element instance and inserts it into the document.
매개 변수 인터페이스
엔트리 점(Entry Point)
React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;노드 및 요소(Nodes and Elements)
type ReactNode = ReactElement | ReactFragment | ReactText; type ReactElement = ReactComponentElement | ReactDOMElement; type ReactDOMElement = { type : string, props : { children : ReactNodeList, className : string, etc. }, key : string | boolean | number | null, ref : string | null }; type ReactComponentElement<TProps> = { type : ReactClass<TProps>, props : TProps, key : string | boolean | number | null, ref : string | null }; type ReactFragment = Array<ReactNode | ReactEmpty>; type ReactNodeList = ReactNode | ReactEmpty; type ReactText = string | number; type ReactEmpty = null | undefined | boolean;클래스 및 구성 요소(Classes and Components)
type ReactClass<TProps> = (TProps) => ReactComponent<TProps>; type ReactComponent<TProps> = { props : TProps, render : () => ReactElement };
props
이렇게 사용:
var Photo = React.createClass({
render: function() {
return (
{this.props.caption}
)
}
});
React.render(
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Angular의 DI는 구성 요소를 더 스마트하게 만들 수 있습니다.Angular에 내장된 종속성 주입은 매우 강력하며 오늘 우리는 이를 사용하여 구성 요소를 스마트하게 만드는 방법을 살펴보겠습니다. 버튼 구성요소에 대해 알아보겠습니다. 여기에서 버튼 구성 요소가 다양한 구성 옵션을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
