Component 와 Pure Component 의 차이;demo 를 복사 하여 육안 으로 구별 할 수 있 습 니 다.
React.PureComponent 현재 props 와 state 의 얕 은 비교 로 덮어 썼 습 니 다. shouldComponentUpdate() 실현쉽게 말 하면 PureComponent 가 shouldComponent Update () 의 기능 을 간단하게 실현 한 것 입 니 다. 물론 데이터 구조 가 복잡 하면 안 됩 니 다.일단 첫 번 째 코드 를 볼 게 요.
1 import React from 'react'
2
3 class Child extends React.Component {
4
5 render() {
6 console.log('child render')
7 return child;
8 }
9 }
10
11 class App extends React.Component {
12 state = {
13 a: 1,
14 };
15
16 render() {
17 console.log('render');
18 return (
19 <>
20 <button
21 onClick={() => {
22 this.setState({ a: 2 });
23 }}
24 >
25 Click me
26
27 부모 구성 요소 의 상 태 를 업데이트 하려 면 단 추 를 누 르 면 하위 구성 요소 도 다시 render 됩 니 다. 이 럴 때 출력 하 는 것 은:
parent renderchild render
구성 요소 render 를 최적화 하고 싶 을 때 shouldComponent Update () 를 사용 합 니 다.그럼 저 는 지금 위의 Child 구성 요 소 를 다음 과 같이 바 꿉 니 다.
1 class Child extends React.Component {
2
3 shouldComponentUpdate(nextProps, nextState) {
4 if (this.props.color !== nextProps.color) {
5 return true
6 }
7 }
8
9 render() {
10 console.log('child render')
11 return child;
12 }
13 }이때, 우리 가 단 추 를 누 르 면 부모 구성 요소 의 상 태 를 업데이트 할 때, 하위 구성 요 소 는 render 가 되 지 않 습 니 다. 입력 한 것 은:
parent render
마지막 으로, 우 리 는 child 구성 요 소 를 다음 과 같이 바 꾸 고 있 습 니 다.
1 class Child extends React.PureComponent {
2 render() {
3 console.log('child render')
4 return child;
5 }
6 }위 그림 의 Child 구성 요소 와 같은 효 과 를 발견 할 수 있 습 니 다. 같은 출력 만 할 수 있 습 니 다.
parent render
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
