React의 PureComponent 소개

이 글에서는 주로 React의 PureComponent 도입에 대해 소개했는데, 이제는 누구나 참고할 수 있게 공유합니다.

React는 반복 렌더링을 방지합니다#🎜🎜 #

React는 렌더링된 UI 내에서 구성 요소에서 반환된 React 요소를 포함하는 내부 구현을 설정하고 유지합니다. 이 구현을 통해 React는 불필요한 DOM 노드 생성 및 연결을 피할 수 있습니다. 그렇게 하면 JavaScript 객체를 직접 조작하는 것보다 속도가 느려질 수 있기 때문입니다. 이를 "가상 DOM"이라고 합니다.

컴포넌트의 props나 상태가 변경되면 React는 새로 반환된 요소를 이전에 렌더링된 요소와 비교하여 실제 DOM을 업데이트해야 하는지 여부를 결정합니다. 동일하지 않으면 React는 DOM을 업데이트합니다.

어떤 경우에는 다시 렌더링 프로세스가 시작되기 전에 트리거되는 이 수명 주기 함수 shouldComponentUpdate를 재정의하여 구성 요소의 속도를 향상시킬 수 있습니다. 이 함수는 기본적으로 true를 반환하므로 React가 업데이트를 수행할 수 있습니다.

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

예:

구성 요소를 props.color에만 두려는 경우 code> 또는 <code> state.count 값이 변경되면 다시 렌더링합니다. 다음과 같이 shouldComponentUpdate를 설정할 수 있습니다.

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> this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

props.color或者state.count的值变化时重新渲染，你可以像下面这样设定shouldComponentUpdate：

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

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

在以上代码中，shouldComponentUpdate只检查props.color和state.count的变化。如果这些值没有变化，组件就不会更新。当你的组件变得更加复杂时，你可以使用类似的模式来做一个“浅比较”，用来比较属性和值以判定是否需要更新组件。这种模式十分常见，因此React提供了一个辅助对象来实现这个逻辑 - 继承自React.PureComponent。以下代码可以更简单的实现相同的操作：

if (this._compositeType === CompositeTypes.PureClass) {
    shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);
}

PureComponent

原理

当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较：

class ListOfWords extends React.PureComponent {
  render() {
    return <p>{this.props.words.join(',')}</p>;
  }
}

class WordAdder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      words: ['marklar']
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This section is bad style and causes a bug
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }

  render() {
    return (
      <p>
        <button></button>
        <listofwords></listofwords>
      </p>
    );
  }
}

而 shallowEqual 又做了什么呢？会比较 Object.keys(state | props) 的长度是否一致，每一个 key 是否两者都有，并且是否是一个引用，也就是只比较了第一层的值，确实很浅，所以深层的嵌套数据是对比不出来的。

问题

大部分情况下，你可以使用React.PureComponent而不必写你自己的shouldComponentUpdate，它只做一个浅比较。但是由于浅比较会忽略属性或状态突变的情况，此时你不能使用它。

handleClick() {
  this.setState(prevState => ({
    words: prevState.words.concat(['marklar'])
  }));
}

或者

handleClick() {
  this.setState(prevState => ({
    words: [...prevState.words, 'marklar'],
  }));
};

或者针对对象结构：

function updateColorMap(oldObj) {
  return Object.assign({}, oldObj, {key: new value});
}

在ListOfWords中，this.props.words是WordAdder中传入的其state的一个引用。虽然在WordAdder的handelClick方法中被改变了，但是对于ListOfWords来说，其引用是不变的，从而导致并没有被更新。

解决方法

在上面的问题中可以发现，当一个数据是不变数据时，可以使用一个引用。但是对于一个易变数据来说，不能使用引用的方式给到PureComponent。简单来说，就是我们在PureComponent外层来修改其使用的数据时，应该给其赋值一个新的对象或者引用，从而才能确保其能够进行重新渲染。例如上面例子中的handleClick可以通过以下几种来进行修改从而确认正确的渲染：

// 常见的js处理
const x = { foo: 'bar' };
const y = x;
y.foo = 'baz';
x === y; // true

// 使用 immutable.js

const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
x === y; // false

immutable.js

Immutable.js是解决这个问题的另一种方法。它通过结构共享提供不可突变的，持久的集合：

• 不可突变:一旦创建，集合就不能在另一个时间点改变。

• 持久性:可以使用原始集合和一个突变来创建新的集合。原始集合在新集合创建后仍然可用。

• 结构共享:新集合尽可能多的使用原始集合的结构来创建，以便将复制操作降至最少从而提升性能。

rrreee

总结

PureComponent 真正起作用的，只是在一些纯展示组件上，复杂组件使用的话shallowEqual 那一关基本就过不了。另外在使用的过程中为了确保能够正确的渲染，记得 props 和 state위 코드에서, shouldComponentUpdate code>props.color 및 state.count의 변경 사항만 확인합니다. 이 값이 변경되지 않으면 구성 요소가 업데이트되지 않습니다. 구성 요소가 더욱 복잡해지면 유사한 패턴을 사용하여 속성과 값을 "얕은 비교"하여 구성 요소를 업데이트해야 하는지 여부를 결정할 수 있습니다. 이 패턴은 매우 일반적이어서 React는 React.PureComponent에서 상속된 이 논리를 구현하기 위한 도우미 개체를 제공합니다. 다음 코드는 동일한 작업을 더 쉽게 수행할 수 있습니다.

rrreee

PureComponent

Principle

구성 요소가 업데이트될 때 구성 요소의 props 및 state가 둘 다 변경 사항이 없으면 렌더 메소드가 실행되지 않으므로 Virtual DOM의 생성 및 비교 프로세스가 제거되어 성능이 향상됩니다. 특히 React는 자동으로 얕은 비교를 수행합니다. rrreee 그리고shallowEqual은 무엇을 합니까? Object.keys(state | props)의 길이가 일치하는지, 각 키에 두 가지가 모두 있는지, 참조인지, 즉 첫 번째 수준의 값만 비교되는지, 실제로는 매우 얕습니다. 중첩이 너무 깊어 데이터를 비교할 수 없습니다.

Question

대부분의 경우 얕은 비교만 수행하는 자체 shouldComponentUpdate를 작성하지 않고도 React.PureComponent를 사용할 수 있습니다. 하지만 얕은 비교는 속성이나 상태 변화를 무시하므로 지금은 사용할 수 없습니다. rrreee
ListOfWords에서 this.props.words는 WordAdder에 전달된 상태에 대한 참조입니다. WordAdder의 handlerClick 메소드에서 변경되었음에도 불구하고 ListOfWords의 경우 해당 참조는 변경되지 않은 상태로 유지되어 업데이트되지 않습니다.

#🎜🎜#Solution#🎜🎜##🎜🎜#위의 문제에서 데이터가 불변 데이터인 경우 참조를 사용할 수 있음을 알 수 있습니다. 그러나 변경 가능한 데이터의 경우 참조로 PureComponent에 제공할 수 없습니다. 간단히 말해서, 외부 레이어에서 PureComponent가 사용하는 데이터를 수정할 때 다시 렌더링할 수 있도록 새 개체나 참조를 할당해야 합니다. 예를 들어, 위 예제의 handlerClick은 다음을 통해 수정되어 올바른 렌더링을 확인할 수 있습니다. #🎜🎜#rrreee#🎜🎜#immutable.js#🎜🎜##🎜🎜#Immutable.js는 이 문제를 해결하는 또 다른 방법입니다. . 구조 공유를 통해 불변적이고 내구성 있는 컬렉션을 제공합니다: #🎜🎜#

• #🎜🎜# 불변: 일단 생성되면 다른 시점에 컬렉션을 사용할 수 없습니다. #🎜🎜#
• #🎜🎜#Persistence: 원본 컬렉션과 변형을 사용하여 새 컬렉션을 만들 수 있습니다. 새 컬렉션이 생성된 후에도 원본 컬렉션을 계속 사용할 수 있습니다. #🎜🎜#
• #🎜🎜# 구조 공유: 새 컬렉션은 복사 작업을 최소화하고 성능을 향상시키기 위해 원래 컬렉션의 구조를 최대한 많이 사용하여 생성됩니다. #🎜🎜#

rrreee#🎜🎜#Summary#🎜🎜##🎜🎜#PureComponent 실제로 작동하는 것은 일부 순수 디스플레이 구성 요소에서만 작동하며, 복잡한 구성 요소가 사용되는 경우 shallowEqual을 사용하면 기본적으로 해당 레벨을 통과하는 것이 불가능합니다. 또한 사용 중 올바른 렌더링을 보장하려면 props와 state가 동일한 참조를 사용할 수 없다는 점을 기억하세요. #🎜🎜##🎜🎜#위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! #🎜🎜##🎜🎜#관련 추천: #🎜🎜##🎜🎜##🎜🎜#일반적으로 사용되는 AngularJ와 Angular의 명령어 작성 방법의 차이점#🎜🎜##🎜🎜##🎜🎜##🎜🎜# #🎜 🎜#ztree ajax를 통해 json을 가져오고 수표장을 확인하세요#🎜🎜##🎜🎜##🎜🎜#

위 내용은 React의 PureComponent 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!