React 의 가 변 값 을 자세히 설명 합 니 다.

가 변 치 는 무엇 입 니까?
함수 식 프로 그래 밍 이란 프로그램 안의 함수 와 표현 식 이 모두 수학 중의 함수 처럼 입력 값 을 정 하고 출력 이 확실 하 다 는 것 을 말한다.예 를 들 면

let a = 1;
let b = a + 1;
=> a = 1  b = 2;

변수 b 가 나타 납 니 다.변수 a 의 값 을 사 용 했 지만 a 의 값 을 수정 하지 않 았 습 니 다.
우리 가 잘 아 는 react 의 코드 를 다시 보 세 요.this.state={count:1}을 초기 화 하면

componentDidMount() {
    const newState = { ...state, count: 2 }; // { count: 2 }
    this.setState(newState);
}

this.state 를 사 용 했 지만 this.state 의 인용 주 소 를 수정 하지 않 았 고 count 의 값 을 직접 수정 하지 않 았 습 니 다.this.props 에 대해 서도 마찬가지 입 니 다.
가 변 값 을 왜 사용 합 니까?
React 홈 페이지 에서 세 가지 좋 은 점 을 드 립 니 다.
복잡 한 기능 을 간소화 하 다.
불변성 은 복잡 한 특성 을 더욱 쉽게 실현 시킨다.
추적 데이터 의 변화
데 이 터 를 직접 수정 하면 데이터 의 변 화 를 추적 하기 어렵다.데이터 의 변 화 를 추적 하려 면 가 변 대상 이 이전 버 전과 비교 할 수 있어 야 합 니 다.그러면 전체 대상 트 리 가 한 번 씩 옮 겨 다 녀 야 합 니 다.
가 변 적 이지 않 은 데이터 의 변 화 를 추적 하 는 것 은 상대 적 으로 훨씬 쉽다.대상 이 새로운 대상 이 된 것 을 발견 하면 대상 이 바 뀌 었 다 고 할 수 있다.

React 에서 언제 다시 렌 더 링 할 지 확인 합 니 다

불가 변성 의 가장 큰 장점 은 React 에서 Pure components 를 만 드 는 데 도움 을 줄 수 있다 는 것 이다.우 리 는 가 변 적 이지 않 은 데이터 가 바 뀌 었 는 지 쉽게 확인 하고 구성 요 소 를 언제 다시 렌 더 링 할 지 확인 할 수 있 습 니 다.
React 성능 최적화 불가 변수

우선,우 리 는 모두 알 고 있 습 니 다.shouldComponent Update 갈고리 함 수 는 기본적으로 true 로 돌아 갑 니 다.즉,부모 구성 요소 가 업데이트 되면 하위 구성 요 소 는 반드시 업 데 이 트 됩 니 다

shouldComponentudpate 에 서 는 두 개의 인 자 를 받 을 수 있 습 니 다.nextProps 와 nextState.만약 에 우리 가 this.props.xxx 와 nextProps.xxx 가 같 고 this.state.xxx 가 nextState.xxx 와 같다 고 판단 하면 반환 값 을 false 로 설정 할 수 있 습 니 다.이것 은 이번에 하위 구성 요 소 를 업데이트 할 필요 가 없다 는 것 을 설명 합 니 다

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

React v 15.3 은 PureComponent 류 를 새로 추 가 했 습 니 다.props 와 state 를 얕 게 비교 하여 render 함수 의 실행 횟수 를 줄 이 고 불필요 한 구성 요소 렌 더 링 을 피 하 며 성능 상의 최적화 를 실현 할 수 있 습 니 다

퓨 어 컴 포 넌 트 는 어떤 원리 일 까JS 의 변수 유형 은 기본 형식(number,string,boolean,undefined,null,symbol)과 참조 형식(function,object,function)으로 나 뉘 어 있 으 며,기본 형식의 값 은 스 택 메모리 에 저장 되 어 있 으 며,참조 형식의 값 은 스 택 메모리 에 저장 되 어 있 으 며,스 택 메모리 에는 가리 키 는 메모리 참조 만 저장 되 어 있 음 을 알 고 있 습 니 다.얕 은 비 교 는 창고 메모리 의 데이터 만 비교 하 는 것 이다.

class App extends PureComponent {
  state = {
    items: [1, 2, 3]
  }
  handleClick = () => {
    const { items } = this.state;
    items.pop();
    this.setState({ items });
  }
  render() {
    return (
        <div>
            <ul>
                {this.state.items.map(i => <li key={i}>{i}</li>)}
            </ul>
            <button onClick={this.handleClick}>delete</button>
        </div>
    )
  }
}

위의 예 는 PureComponent 를 사 용 했 고 배열 items 의 값 만 바 꾸 었 을 뿐 items 의 참조 주 소 를 바 꾸 지 않 았 기 때문에 items 는 변화 가 없 으 며 render 함 수 를 촉발 하지 않 으 며 구성 요소 의 렌 더 링 을 촉발 하지 않 는 다 고 생각 합 니 다.
구성 요소 업 데 이 트 를 실현 하려 면 다음 과 같은 방식 으로 새 배열 을 만 들 고 새 배열 의 주 소 를 items 에 부여 할 수 있 습 니 다.

handleClick = () => {
    const { items } = this.state;
    items.pop();
    var newItem = [...items];
    this.setState({ item: newItem });
}

Pure Component 는 얕 은 층 의 비 교 를 도와 주 었 기 때문에 state 에 주의 할 때 가능 한 한 합 리 적 이 어야 합 니 다.새 겨 진 인용 데이터 구 조 를 참조 하려 면 Immutable.js 에 맞 출 수 있 습 니 다

Immutable 이 무엇 입 니까?
(1)Immutable 은 만 들 면 변경 할 수 없 는 데이터 입 니 다.(2)Immutable 대상 에 대한 수정 이나 삭제 작업 을 추가 하면 새로운 Immutable 대상 을 되 돌려 줍 니 다.(3)Immutable 이 실현 하 는 원 리 는 Persistent Data Structure(지속 적 인 데이터 구조)이다.즉,영구적 인 데이터 가 새로운 데 이 터 를 만 들 때 오래된 데 이 터 를 동시에 사용 할 수 있 고 변 하지 않도록 해 야 한다.(4)또한 deepCopy 가 모든 노드 를 한 번 복사 해서 가 져 오 는 성능 손실 을 피하 기 위해 Immutable 은 Structural Sharing(구조 공유)을 사용 했다.즉,대상 트 리 의 노드 가 변화 하면 이 노드 와 그 영향 을 받 은 부모 노드 만 수정 하고 다른 노드 는 공유 하 는 것 이다.

마지막 으로 구성 요소 차원 에서 얕 은 비 교 를 하려 면 React.memo()함 수 를 사용 할 수 있 습 니 다.
총결산
사실은 홈 페이지 에서 말 하 는 불가 변성 의 세 번 째 장점 이자 가장 중요 한 장점 이다.바로 불가 변성 은 우리 가 React 에서 Pure Component 를 사용 하 는 데 도움 을 줄 수 있다 는 것 이다.데이터 가 바 뀌 었 는 지,구성 요소 가 언제 다시 렌 더 링 되 어야 하 는 지 쉽게 확인 할 수 있 습 니 다.
state 값 을 변경 하면 shouldComponentUpdate 에서 현재 state 와 nextState 를 가 져 오 거나 props 와 nextprops 가 비교 한 값 이 똑 같 으 면 false 로 돌아 갑 니 다.우리 가 setState 작업 을 하 더 라 도 UI 는 업데이트 되 지 않 습 니 다.
Pure Component 는 Immutable.js 와 함께 사용 하여 성능 최적화 의 목적 을 달성 하 는 것 이 좋 습 니 다.
React.memo 를 결합 하여 불필요 한 구성 요소 의 업데이트 렌 더 링 을 피 합 니 다.
이상 은 React 의 가 변 적 이지 않 은 값 에 대한 상세 한 내용 입 니 다.React 의 가 변 적 이지 않 은 값 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 십시오!