React.js 학습 노트의 구성 요소 생명주기
10068 단어 react.js
React.js 학습 노트의 구성 요소 생명주기
@ (React 학습)
구성 요소 소개
React에서는 코드를 구성 요소 (component) 로 봉인한 다음 일반 HTML 탭을 삽입하는 것처럼 웹 페이지에 이 구성 요소를 삽입할 수 있습니다.
어셈블리 클래스에는 최상위 레이블이 하나만 포함될 수 있으며 그렇지 않으면 오류가 보고됩니다.var HelloXiaowang = React.createClass({
render: function() {
return Hello {this.props.name};
}
});
ReactDOM.render(
,
document.getElementById('shuaige')
);
위 코드에서 변수 HelloXiaowang은 구성 요소 클래스입니다.템플릿이 HelloXiaowang/> 에 삽입되면 HelloXiaowang의 실례가 자동으로 생성됩니다. (아래의 '구성 요소' 는 구성 요소 클래스의 실례를 가리킵니다.)
render
모든 구성 요소 클래스에는 구성 요소 ReactElement render()를 출력하는 데 사용되는 고유한render 방법이 있어야 합니다.
호출할 때this를 검사합니다.props와this.state, 단일 서브 구성 요소를 되돌려줍니다.이 하위 구성 요소는 가상 로컬 DOM 구성 요소(예를 들어 div/> 또는 React.DOM.div) 또는 사용자 정의 복합 구성 요소일 수 있습니다.var HelloXiaowang = React.createClass({
render: function() {
return Hello {this.props.name};
}
});
render () 함수는 순수해야 합니다. 즉, 이 함수는 구성 요소 s를 수정하지 않습니다.
tate, 호출할 때마다 같은 결과를 되돌려줍니다. DOM 정보를 읽거나 쓰지 않으며 브라우저와 상호작용하지 않습니다. (예를 들어 set Timeout을 사용합니다.)브라우저와 상호작용이 필요하다면,componentDidMount () 이나 다른 생명주기 방법에서 이 일을 하십시오.render () 를 순수하게 유지하면 서버 측의 렌더링을 더욱 확실하고 쉽게 할 수 있으며, 구성 요소도 쉽게 이해할 수 있습니다.
라이프 사이클
구성 요소는 본질적으로 상태기로서 입력이 확정되고 출력이 반드시 확정된다
상태기는 본질적으로 상태와 이동의 결합이다.상태가 변환될 때 서로 다른 갈고리 함수를 촉발하여 개발자에게 상응하는 기회를 준다.어셈블리의 선언 주기는 다음 세 가지 상태로 구성됩니다.
var HelloXiaowang = React.createClass({
render: function() {
return Hello {this.props.name};
}
});
ReactDOM.render(
,
document.getElementById('shuaige')
);
var HelloXiaowang = React.createClass({
render: function() {
return Hello {this.props.name};
}
});
초기화 단계 Mounting
클래스 생성이 완료되면 실례화할 수 있습니다.
초기화 단계에서 사용할 수 있는 함수:
render 이전에 마지막으로 상태를 수정할 기회입니다.이 방법setState을 사용하면 render() 업데이트 후state를 감지하고 한 번만 실행됩니다. state가 바뀌었음에도 불구하고.호출 순서
클라이언트에서 구성 요소가 인스턴스화되고 처음 생성될 때 다음 메서드가 호출됩니다.
구성 요소가 서버에서 실례화되고 처음 생성될 때 다음과 같은 방법이 호출됩니다.
componentDidMount는 서버가 렌더링되는 동안 호출되지 않습니다.
인스턴스
getDefaultProps 방법은 구성 요소를 만들 때 호출하는 것이 아니라createClass에서 호출합니다.
var count = 0;
var HelloWorld = React.createClass({
getDefaultProps:function(){
return {name:"dada"}；
}，
getInitialState:function(){
return {
myCount:count++,
ready:false
}；
}，
componentWillMount:function(){
this.setState({ready:true})；
}，
render：function(){
return Hello,{this.props.name？this.props.name:"World"}
{''+this.props.ready}{this.state.myCount}
;
},
componentDidMount:function(){
$(ReactDOM.findDOMNode(this)).append("bianke");
}
})；
ReactDOM.render(,document.getElementById('shuage')) 완 선생님의 예:
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
Hello {this.props.name}
);
}
});
ReactDOM.render(
,
document.body
); 위 코드는 Hello 구성 요소를 불러온 후componentDidMount 방법을 통해 타이머를 설정하고 100밀리초 간격으로 구성 요소의 투명도를 다시 설정하여 다시 렌더링합니다.
또한 구성 요소의 스타일 속성 설정 방식은
style={{opacity: this.state.opacity}}로 작성해야 합니다React.findDOMNode()
만약 이 구성 요소가 DOM에 초기화되었다면, 이 방법은 해당하는 원본 브라우저의DOM 요소를 되돌려줍니다.이 방법은 폼의 값과 DOM의 값을 읽는 데 사용됩니다.대부분의 경우
ref 속성과 DOM 노드를 추가하여 사용을 피한다findDOMNode.rendernull이나false를 되돌릴 때findDOMNode도null을 되돌려줍니다.참고:
findDOMNode는 밑바닥 DOM 노드에 접근하는 출구이다.대부분의 경우, 출구 사용을 장려하지 않는다. 왜냐하면 그는 부품의 층을 통과했기 때문이다. findDOMNode는 초기화 단계의 구성 요소에만 작용한다(구성 요소가 DOM 구조에 이미 존재하기 때문이다).초기화 단계의 구성 요소에서 이 방법을 사용하려고 시도하면 (render () 함수에서 구성 요소가 생성되지 않았을 때 이 방법을 사용합니다.) 이상이 발생합니다.findDOMNode는 상태가 없는 구성 요소에 사용할 수 없습니다.getDOMNode는 유행이 지나 사용을 권장하지 않습니다.실행 중 단계 Updating
이 때 구성 요소가 잘 렌더링되었고 사용자는 마우스 클릭, 손가락 누르기, 또는 기타 이벤트와 상호작용을 할 수 있습니다. 예를 들어 응용 상태의 변화를 초래합니다.
실행 중 단계에서 사용할 수 있는 함수
componentWillReceiveProps
구성 요소가 새 프롬프트를 받았을 때 호출합니다.렌더링을 초기화할 때 이 방법은 호출되지 않습니다.이 함수는react가prop에 전송된 후
render() 렌더링하기 전에state를 업데이트할 수 있는 기회로 사용할 수 있습니다.오래된 프로젝터는 this.props를 통해 얻을 수 있다.이 함수 호출 this.setState() 에서는 두 번째 렌더링을 일으키지 않습니다.componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}state에 대해 비슷한 방법이 없습니다:
componentWillReceiveState.전송될 프로프는 state 변화를 일으킬 수 있지만, 그렇지 않을 수도 있습니다.state가 바뀔 때 몇 가지 작업을 수행해야 한다면 componentWillUpdate하십시오.shouldComponentUpdate
새 props나state를 받으면 렌더링하기 전에 호출합니다.이 방법은 렌더링을 초기화할 때 호출되지 않으며,forceUpdate 방법을 사용할 때도 호출되지 않습니다.새 props와state가 구성 요소를 업데이트하지 않을 것을 확인하면false를 되돌려야 합니다.
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}shouldComponentUpdatefalse로 되돌아오면 render()다음 state가 바뀔 때까지 실행하지 않습니다.만약 성능이 병목이라면 특히 몇 십 개, 심지어 백 개의 구성 요소가 있을 때
shouldComponentUpdate를 사용하면 응용의 성능을 향상시킬 수 있다.기본적으로
shouldComponentUpdate 은true로 되돌아옵니다.state가 바뀔 때 미세한 버그를 피하지만, 항상 조심스럽게 state를 변할 수 없는 것으로 간주한다면, render() 에서props와state에서만 값을 읽을 수 있습니다. 이때 shouldComponentUpdate 방법을 덮어쓰고, 신구 props와state의 비교 논리를 실현할 수 있습니다.componentWillUpdate
새 props나state를 받기 전에 바로 호출합니다.렌더링을 초기화할 때 이 방법은 호출되지 않습니다.이 방법을 사용해서 갱신 전의 준비를 하세요.
너는 이 방법에서 사용할 수 없다
this.setState().prop의 변화에 응답하기 위해 state를 업데이트해야 한다면 componentWillReceiveProps 을 사용하십시오.componentDidUpdate
구성 요소 업데이트가 DOM에 동기화되면 즉시 호출됩니다.이 방법은 렌더링을 초기화할 때 호출되지 않습니다.이 방법을 사용하면 어셈블리가 업데이트된 후에 DOM 요소를 조작할 수 있습니다.
호출 순서
state를 수정할 때마다 구성 요소가 다시 렌더링되고 인스턴스화된 후 state를 통해 구성 요소가 업데이트되면 다음과 같은 메서드가 호출됩니다.
하지만 직접 수정은 하지 마세요.state,this를 통과해야 합니다.setState 메서드를 사용하여 수정합니다.
인스턴스
정확한 용법
var HelloXianrou = React.createClass({
componentWillReceiveProps:function(newProps){
console.log(newProps);
},
render:function () {
console.log(4);
return Hello {this.props.name||"World"}
},
componentDidUpdate:function () {
$(ReactD.findDOMNode(this)).append("
")
}
});
var HelloDada = React.createClass({
getInitialState:function () {
return {name:''};
},
handleChange:function (e) {
this.setState({name:e.target.value});
},
render:function () {
return
}
});
ReactDOM.render(,document.getElementById('reactDemo')) 제거 단계 Unmounting
제거 단계에서 사용할 수 있는 함수
componentWillUnmount: 구성 요소를 삭제하기 전에 타이머와 이벤트 감청기를 청소합니다.또는 componentDidMount에서 만든 DOM 요소를 지웁니다.ReactDOM.unmountComponentAtNode
DOM을 초기화한 React 구성 요소를 제거하고 작업 및 상태를 정리합니다.만약 이 구성 요소에서 초기화된 구성 요소가 없다면, 이 방법은 아무런 작용이 없습니다.이 구성 요소가 삭제되면true로 돌아가고, 반대로false로 돌아갑니다
인스턴스
var HelloXianrou = React.createClass({
render:function () {
console.log(4);
return Hello {this.props.name||"World"}
},
componentWillUnmount:function () {
console.log("Booooooooooom!!")
}
});
var HelloDada = React.createClass({
getInitialState:function () {
return {name:''};
},
handleChange:function (e) {
/* if (e.target.value == "123") {
React.unmountComponentAtNode(document.getElementById('reactDemo')[0]);
return;
} */
this.setState({name:e.target.value});
},
render:function () {
/* if(this.state.name == "123"){
return 123
} */
return
}
});
ReactDOM.render(,document.getElementById('reactDemo')) 소결
본고는 주로 구성 요소의 생명 주기를 소개하였다.많은 방법들이 구성 요소의 생명 주기 중 어느 정해진 시간에 실행된다.
대단히 감사합니다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[React.js] React Queryfetching : 데이터 요청 상태 네트워크에서 데이터를 fetch 하고 A 라는 query key 로 캐싱함 만일 cacheTime 이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount 되면, fetch 가 실행...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
