Cách sử dụng phương thức vòng đời getDerivingStateFromProps trái ngược với thành phầnWillReceiveProps

Có vẻ như componentWillReceivePropssẽ được loại bỏ hoàn toàn trong các phiên bản sắp tới, ủng hộ một phương pháp vòng đời mới getDerivedStateFromProps: static getDerivingStateFromProps () .

Khi kiểm tra, có vẻ như bạn hiện không thể so sánh trực tiếp giữa this.propsvà nextProps, giống như bạn có thể tham gia componentWillReceiveProps. Có cách nào để khắc phục điều này?

Ngoài ra, bây giờ nó trả về một đối tượng. Tôi có đúng không khi cho rằng giá trị trả về cơ bản là this.setState?

Dưới đây là một ví dụ tôi tìm thấy trực tuyến: Trạng thái bắt nguồn từ đạo cụ / trạng thái .

Trước

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

Sau

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

Về việc loại bỏ componentWillReceiveProps: bạn sẽ có thể xử lý việc sử dụng nó với sự kết hợp của getDerivedStateFromPropsvà componentDidUpdate, xem bài đăng trên blog React để biết ví dụ về việc di chuyển. Và đúng vậy, đối tượng được trả về bằng cách getDerivedStateFromPropscập nhật trạng thái tương tự như một đối tượng được truyền cho setState.

Trong trường hợp bạn thực sự cần giá trị cũ của một chỗ dựa, bạn luôn có thể lưu trữ nó trong trạng thái của mình bằng một cái gì đó như thế này:

state = {
  cachedSomeProp: null
  // ... rest of initial state
};

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    // ... other derived state properties
  };
}

Bất cứ điều gì không ảnh hưởng đến nhà nước đều có thể được đưa vào componentDidUpdate, và thậm chí còn có một thứ getSnapshotBeforeUpdaterất thấp.

CẬP NHẬT: Để cảm nhận về các phương pháp vòng đời mới (và cũ), gói phản ứng vòng đời phản ứng có thể hữu ích.

Như chúng tôi đã đăng gần đây trên blog React , trong phần lớn các trường hợp bạn không cần getDerivedStateFromPropsgì cả .

Nếu bạn chỉ muốn tính toán một số dữ liệu dẫn xuất, một trong hai:

1. Làm ngay bên trong render
2. Hoặc, nếu tính lại nó là tốn kém, hãy sử dụng một trình trợ giúp ghi nhớ như thế nào memoize-one.

Đây là ví dụ "sau" đơn giản nhất:

import memoize from "memoize-one";

class ExampleComponent extends React.Component {
  getDerivedData = memoize(computeDerivedState);

  render() {
    const derivedData = this.getDerivedData(this.props.someValue);
    // ...
  }
}

Kiểm tra phần này của bài viết trên blog để tìm hiểu thêm.

Như Dan Abramov đã đề cập

Làm điều đó ngay bên trong kết xuất

Chúng tôi thực sự sử dụng cách tiếp cận đó với một trong những loại đạo cụ ủy quyền để tính toán trạng thái.

Mã của chúng tôi trông như thế này

// ./decorators/memoized.js  
import memoizeOne from 'memoize-one';

export function memoized(target, key, descriptor) {
  descriptor.value = memoizeOne(descriptor.value);
  return descriptor;
}

// ./components/exampleComponent.js
import React from 'react';
import { memoized } from 'src/decorators';

class ExampleComponent extends React.Component {
  buildValuesFromProps() {
    const {
      watchedProp1,
      watchedProp2,
      watchedProp3,
      watchedProp4,
      watchedProp5,
    } = this.props
    return {
      value1: buildValue1(watchedProp1, watchedProp2),
      value2: buildValue2(watchedProp1, watchedProp3, watchedProp5),
      value3: buildValue3(watchedProp3, watchedProp4, watchedProp5),
    }
  }

  @memoized
  buildValue1(watchedProp1, watchedProp2) {
    return ...;
  }

  @memoized
  buildValue2(watchedProp1, watchedProp3, watchedProp5) {
    return ...;
  }

  @memoized
  buildValue3(watchedProp3, watchedProp4, watchedProp5) {
    return ...;
  }

  render() {
    const {
      value1,
      value2,
      value3
    } = this.buildValuesFromProps();

    return (
      <div>
        <Component1 value={value1}>
        <Component2 value={value2}>
        <Component3 value={value3}>
      </div>
    );
  }
}

Lợi ích của nó là bạn không cần mã hàng tấn so sánh bên trong getDerivedStateFromPropshoặc componentWillReceivePropsbạn có thể bỏ qua việc khởi tạo sao chép-dán bên trong một hàm tạo.

GHI CHÚ:

Cách tiếp cận này chỉ được sử dụng để ủy quyền cho các đạo cụ ở trạng thái, trong trường hợp bạn có một số logic trạng thái bên trong, nó vẫn cần được xử lý trong các vòng đời thành phần.