구성 요소에 반응하기 위해 어떤 성능 최적화가 이루어졌습니까?-JS 튜토리얼-php.cn

React의 구성 요소 성능 최적화에는 다음이 포함됩니다. 1. 구성 요소를 빌드하기 위해 가능한 한 많은 상태 비저장 기능을 사용합니다. 2. 구성 요소를 하위 구성 요소로 분할하여 구성 요소를 보다 세밀하게 제어합니다. 3. PureRender를 사용하여 변경 사항 렌더링을 최소화합니다. . 불변을 사용하십시오.

구성 요소에 반응하기 위해 어떤 성능 최적화가 이루어졌습니까?

React의 구성 요소 성능 최적화에는 다음이 포함됩니다.

1 구성 요소를 구축하려면 가능한 한 많은 상태 비저장 함수를 사용하세요.

상태 비저장 구성 요소에는 props와 context라는 두 가지 매개 변수만 있습니다. 상태 및 수명 주기 방법이 없습니다. 구성 요소 자체는 상태 저장 구성 요소 구성 방법의 렌더링 방법입니다.

상태 비저장 구성 요소는 적절한 곳에 사용해야 합니다. 상태 비저장 구성 요소는 React.createClass 및 ES6 클래스와 같이 호출 시 새 인스턴스를 생성하지 않으며 생성 시 항상 인스턴스를 유지하여 불필요한 검사 및 메모리 할당을 방지하고 내부 최적화를 달성합니다.

2. 구성 요소를 하위 구성 요소로 분할하고 구성 요소를 더욱 세밀하게 제어할 수 있습니다.

관련 중요 개념: 순수 함수

순수 함수의 세 가지 주요 원칙:

동일한 입력이 주어지면 항상 동일한 출력을 반환합니다. 예를 들어 반례에는 Math.random(), New Date()가 포함됩니다

프로세스에는 부작용이 없습니다. 즉, 외부 상태를 변경할 수 없습니다.

추가 상태 종속성이 없습니다. , 메서드 내부의 상태는 메서드의 수명 주기 동안에만 사용할 수 있습니다. 메모리가 저장됩니다. 즉, 공유 변수는 메서드 내에서 사용할 수 없습니다.

순수 함수는 메서드 수준 테스트 및 리팩토링에 매우 편리하며 프로그램의 확장성과 적응성을 높일 수 있습니다. 순수 함수는 함수 표현의 기초입니다.

React 구성 요소 자체는 순수한 함수입니다. 즉, 특정 Virtual DOM을 얻기 위해 지정된 prop을 전달하며 전체 프로세스를 예측할 수 있습니다.

특정 방법

구성 요소를 하위 구성 요소로 분할하여 구성 요소를 더욱 세밀하게 제어할 수 있습니다. 순수한 상태를 유지하면 메서드나 구성 요소를 더 집중적이고, 더 작고, 더 독립적이고, 더 재사용 가능하고 테스트 가능하게 만들 수 있습니다.

3. PureRender를 사용하여 변경 사항 렌더링 최소화

관련 중요 개념: PureRenderPureRender

PureRender的Pure即是指满足纯函数的条件，即组件被相同的props和state渲染会得到相同的结果。

在React中实现PureRender需要重新实现shouldComponentUpdate生命周期方法。shouldComponentUpdate是一个特别的方法，它接收需要更新的props和state，其本质是用来进行正确的组件渲染。当其返回false的时候，不再向下执行生命周期方法；当其返回true时，继续向下执行。

组件在初始化过程中会渲染一个树状结构，当父节点props改变的时候，在理想情况下只需渲染一条链路上有关props改变的节点即可；但是，在默认情况下shouldComponentUpdate方法返回true,React会重新渲染所有的节点。

有一些官方插件实现了对shouldComponentUpdate的重写，然后自己也可以做一些代码的优化来运用PureRender。

具体办法

(1) 运用PureRender

使用官方插件react-addons-pure-render-mixin实现对shouldComponentUpdate的重写

import React from &#39;react&#39;;
import PureRenderMixin from &#39;react-addons-pure-render-mixin&#39;;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  render() {
    return <div className={this.props.className}>foo</div>
  }
}

로그인 후 복사

它的原理是对object(包括props和state)做浅比较，即引用比较，非值比较。比如只用关注props中每一个是否全等(如果是prop是一个对象那就是只比较了地址，地址一样就算是一样了)，而不用深入比较。

(2)优化PureRender

避免无论如何都会触发shouldComponentUpdate返回true的代码写法。

避免直接为prop设置字面量的数组和对象

就算每次传入的数组或对象的值没有变，但它们的地址也发生了变化。

如以下写法每次渲染时style都是新对象都会触发shouldComponentUpdate为true:

<Account style={{color: &#39;black&#39;}} />

로그인 후 복사

改进办法：将字面量设置为一个引用:

const defaultStyle = {};
<Account style={this.props.style || defaultStyle} />

로그인 후 복사

避免每次都绑定事件

如果这样绑定事件的话每次都要生成一个新的onChange属性的值:

render() {
  return <input onChange={this.handleChange.bind(this)} />
}

로그인 후 복사

应该尽量在构造函数内进行绑定，如果绑定需要传参那么应该考虑抽象子组件或改变现有数据结构:

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}
handleChange() {
  ...
}
render() {
  return <input onChange={this.handleChange} />
}

로그인 후 복사

在设置子组件的时候要在父组件级别重写shouldComponentUpdate

4.运用immutable

JavaScript中对象一般是可变的，因为使用引用赋值，新的对象的改变将影响原始对象。为了解决这个问题是使用深拷贝或者浅拷贝，但这样做又造成了CPU和内存的浪费。

Immutable data

PureRender에서 Pure는 순수 기능의 조건을 충족하는 것을 의미합니다. 즉, 구성 요소가 동일하게 사용됩니다. 소품과 상태 렌더링은 동일한 결과를 얻습니다. 🎜🎜 React에서 PureRender를 구현하려면 shouldComponentUpdate 수명 주기 메서드를 다시 구현해야 합니다. shouldComponentUpdate는 업데이트가 필요한 props와 state를 수신하는 특별한 메소드입니다. 그 본질은 올바른 컴포넌트 렌더링을 수행하는 것입니다. false를 반환하면 라이프 사이클 메서드는 더 이상 아래쪽으로 실행되지 않습니다. true를 반환하면 실행이 아래쪽으로 계속됩니다. 🎜🎜구성 요소는 초기화 프로세스 중에 트리 구조를 렌더링합니다. 상위 노드 props가 변경되면 이상적으로는 하나의 링크에서 props 변경과 관련된 노드만 렌더링하면 됩니다. 그러나 기본적으로 shouldComponentUpdate 메서드는 true를 반환합니다. 모든 노드를 다시 렌더링합니다. 🎜🎜shouldComponentUpdate의 재작성을 구현하는 공식 플러그인이 있으며, PureRender를 사용하기 위해 일부 코드 최적화를 수행할 수도 있습니다. 🎜🎜특정 방법🎜🎜(1) PureRender 사용🎜🎜공식 플러그인 React-addons-pure-render-mixin을 사용하여 shouldComponentUpdate를 다시 작성하세요🎜rrreee🎜It The 원칙은 객체(props 및 state 포함)의 얕은 비교, 즉 참조 비교, 비값 비교를 수행하는 것입니다. 예를 들어, 심층적인 비교 없이 각각의 props가 합동인지(prop가 객체인 경우 주소만 비교하면 주소가 같음) 여부에만 주의하면 됩니다. 🎜🎜(2) PureRender를 최적화🎜🎜무슨 일이 있어도 true를 반환하도록 shouldComponentUpdate를 트리거하는 코드를 작성하지 마세요. 🎜🎜prop에 리터럴 배열과 객체를 직접 설정하지 마세요🎜🎜전달된 배열이나 객체의 값이 매번 변경되지 않더라도 해당 주소도 변경되었습니다. 🎜🎜스타일이 렌더링될 때마다 새 개체인 경우 shouldComponentUpdate가 true로 트리거됩니다.🎜rrreee🎜개선 방법: 리터럴을 참조로 설정:🎜rrreee🎜매번 이벤트 바인딩 방지🎜🎜바인딩하는 경우 이벤트의 경우 매번 onChange 속성의 새 값을 생성해야 합니다. 🎜rrreee🎜 생성자 내에서 바인딩을 시도해야 합니다. 바인딩에 매개 변수 전달이 필요한 경우 하위 구성 요소를 추상화하거나 변경하는 것을 고려해야 합니다. 현재 상태는 다음과 같습니다.🎜rrreee🎜하위 구성 요소를 설정할 때 상위 구성 요소 수준에서 shouldComponentUpdate를 다시 작성하세요🎜🎜🎜4. JavaScript의 개체는 일반적으로 변경 가능하므로 불변을 사용하세요. 참조 할당을 사용하면 새 개체에 대한 변경 사항이 원본 개체에 영향을 미칩니다. 이를 해결하기 위해 Deep Copy나 Shallow Copy를 사용하는데 이는 CPU와 메모리의 낭비를 초래합니다. 🎜🎜불변 데이터는 이 문제를 매우 잘 해결합니다. 🎜

불변 데이터는 한번 생성되면 변경할 수 없는 데이터입니다. Immutable 객체를 수정, 추가 또는 삭제하면 새로운 Immutable 객체가 반환됩니다. 불변 구현의 원칙은 지속적인 데이터 구조입니다. 즉, 기존 데이터를 사용하여 새 데이터를 생성할 때 이전 데이터와 새 데이터를 동시에 사용할 수 있고 변경되지 않음이 보장됩니다. 동시에, 깊은 복사로 인한 성능 손실을 피하기 위해 Immutable은 구조적 공유를 사용합니다. 즉, 객체 트리의 노드가 변경되면 이 노드와 이에 영향을 받는 상위 노드만 수정되고 다른 노드는 수정됩니다. 공유됩니다.