Component와 PureComponent의 차이점에 대한 자세한 설명

이번에는 Component와 PureComponent 사용의 차이점에 대해 자세히 설명하겠습니다. Component와 PureComponent 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

저는 Component의 성능이 더 뛰어난 버전인 PureCompoent를 사용하기 시작했습니다. 이는 사실로 밝혀졌지만 이러한 성능 향상에는 몇 가지 주의 사항이 있습니다. PureComponent를 더 자세히 살펴보고 이를 사용해야 하는 이유를 이해해 보겠습니다. PureCompoent是因为它是一个更具性能的Component的版本。虽然事实证明这是正确的，但是这种性能的提高还伴随着一些附加的条件。让我们深挖一下PureComponent，并理解为什么我们应该使用它。

Component和PureComponent有一个不同点

除了为你提供了一个具有浅比较的shouldComponentUpdate方法，PureComponent和Component基本上完全相同。当props或者state改变时，PureComponent将对props和state进行浅比较。另一方面，Component不会比较当前和下个状态的props和state。因此，每当shouldComponentUpdate被调用时，组件默认的会重新渲染。

浅比较101

当把之前和下一个的props和state作比较，浅比较将检查原始值是否有相同的值（例如：1 == 1或者ture==true）,数组和对象引用是否相同。

从不改变

您可能已经听说过，不要在props和state中改变对象和数组，如果你在你的父组件中改变对象，你的“pure”子组件不将更新。虽然值已经被改变，但是子组件比较的是之前props的引用是否相同，而不会进行深度比较。

与此相反，你可以通过使用es6的assign方法或者数组的扩展运算符或者使用第三方库达到不可变性，来返回一个新的对象。

存在性能问题？

比较原始值值和对象引用是低消费操作。如果你有一列子对象并且其中一个子对象更新，对它们的props和state进行检查要比重新渲染每一个子节点要快的多

其它解决办法

不要在render的函数中绑定值

假设你有一个项目列表，每个项目都传递一个唯一的参数到父方法。为了绑定参数，你可能会这么做：

<CommentItem likeComment={() => this.likeComment(user.id)} />

这个问题会导致每次父组件render方法被调用时，一个新的函数被创建，已将其传入likeComment。这会有一个改变每个子组件props的副作用，它将会造成他们全部重新渲染，即使数据本身没有发生变化。

为了解决这个问题，只需要将父组件的原型方法的引用传递给子组件。子组件的likeComment属性将总是有相同的引用，这样就不会造成不必要的重新渲染。

<CommentItem likeComment={this.likeComment} userID={user.id} />

然后再子组件中创建一个引用了传入属性的类方法：

class CommentItem extends PureComponent {
  ...
  handleLike() {
    this.props.likeComment(this.props.userID)
  }
  ...
}

不要在render方法里派生数据

考虑一下你的配置组件将从一系列文章中展示用户最喜欢的十篇文章。

render() {
  const { posts } = this.props
  const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  return //...
}

每次组件重新渲染时topTen都将有一个新的引用，即使posts没有改变并且派生数据也是相同的。这将造成列表不必要的重新渲染。

你可以通过缓存你的派生数据来解决这个问题。例如，设置派生数据在你的组件state

Component와 PureComponent에는 한 가지 차이점이 있습니다.

얕은 비교가 가능한 shouldComponentUpdate 메서드를 제공하는 것 외에도 PureComponent 와 <code>Component는 기본적으로 동일합니다. props 또는 state가 변경되면 PureComponent는 props 및 state를 얕게 변경합니다. . 반면에 Component는 현재 상태와 다음 상태의 props와 state를 비교하지 않습니다. 따라서 shouldComponentUpdate가 호출될 때마다 기본적으로 구성 요소가 다시 렌더링됩니다.

얕은 비교 101

이전과 다음 props 및 state를 비교할 때 얕은 비교는 원래 값이 동일한 값(예: 1 == 1 또는 ture==true), 배열 및 객체

참고하세요

똑같죠?

변경하지 않음

props 및 state 개체 및 배열의 경우 상위 구성 요소의 개체를 변경하면 "순수한" 하위 구성 요소가 업데이트되지 않습니다. 값이 변경되었더라도 하위 구성 요소는 심층적인 비교를 수행하지 않고 이전 props 참조가 동일한지 비교합니다.

반대로 es6 할당 방법이나 배열 확장 operator을 사용하거나 타사를 사용할 수 있습니다 라이브러리는 새 객체를 반환하기 위해 불변성을 달성합니다.

성능 문제가 있나요?

기본값과 객체 참조를 비교하는 것은 비용이 적게 드는 작업입니다. 하위 개체 목록이 있고 그 중 하나가 업데이트되는 경우 props 및 state를 확인하는 것이 각 하위 노드를 다시 렌더링하는 것보다 훨씬 빠릅니다.

기타 솔루션

렌더링 함수에 값을 바인딩하지 마세요 항목 목록이 있고 각 항목에 고유한 매개변수가 상위 메서드에 전달된다고 가정해 보세요. 매개변수를 바인딩하려면 다음을 수행할 수 있습니다.

componentWillMount() {
  this.setTopTenPosts(this.props.posts)
}
componentWillReceiveProps(nextProps) {
  if (this.props.posts !== nextProps.posts) {
    this.setTopTenPosts(nextProps)
  }
}
setTopTenPosts(posts) {
  this.setState({
    topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  })
}

🎜이 문제로 인해 상위 구성 요소의 렌더링 메서드가 호출될 때마다 새 함수가 생성되어 likeComment에 전달됩니다. 이는 각 하위 구성요소의 props를 변경하는 부작용이 있으며, 이로 인해 데이터 자체가 변경되지 않은 경우에도 하위 구성요소가 모두 다시 렌더링됩니다. 🎜🎜이 문제를 해결하려면 상위 구성 요소의 프로토타입 메서드 참조를 하위 구성 요소에 전달하면 됩니다. 하위 구성 요소의 likeComment 속성은 항상 동일한 참조를 가지므로 불필요한 다시 렌더링이 발생하지 않습니다. 🎜rrreee🎜그런 다음 수신 속성을 참조하는 하위 구성 요소에 클래스 메서드를 만듭니다. 🎜rrreee

렌더링 메서드에서 데이터를 파생하지 마세요

🎜 구성 구성 요소는 일련의 기사 중에서 사용자가 가장 좋아하는 10개의 기사를 표시합니다. 🎜rrreee🎜topTen은 posts가 변경되지 않았고 파생된 데이터가 동일하더라도 구성 요소가 다시 렌더링될 때마다 새로운 참조를 갖게 됩니다. 이로 인해 목록이 불필요하게 다시 렌더링됩니다. 🎜🎜파생된 데이터를 캐싱하여 이 문제를 해결할 수 있습니다. 예를 들어, 게시물이 업데이트될 때만 업데이트되도록 구성 요소의 state에서 파생 데이터를 설정합니다. 🎜rrreee🎜 Redux를 사용하는 경우 reselect를 사용하여 파생된 데이터를 결합하고 캐시하는 "선택기"를 만드는 것을 고려해 보세요. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜React의 라이프사이클 사용에 대한 자세한 설명🎜🎜🎜🎜React의 컴포넌트 통신 사용에 대한 자세한 설명🎜🎜

위 내용은 Component와 PureComponent의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!