Phản ứng thành phần khởi tạo trạng thái từ đạo cụ

Trong React, có sự khác biệt thực sự nào giữa hai triển khai này không? Một số người bạn nói với tôi rằng FirstComponent là mẫu, nhưng tôi không hiểu tại sao. SecondComponent có vẻ đơn giản hơn vì kết xuất chỉ được gọi một lần.

Đầu tiên:

import React, { PropTypes } from 'react'

class FirstComponent extends React.Component {

  state = {
    description: ''
  }

  componentDidMount() {
    const { description} = this.props;
    this.setState({ description });
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} /> 
    );
  }
}

export default FirstComponent;

Thứ hai:

import React, { PropTypes } from 'react'

class SecondComponent extends React.Component {

  state = {
    description: ''
  }

  constructor (props) => {
    const { description } = props;
    this.state = {description};
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} />   
    );
  }
}

export default SecondComponent;

Cập nhật: Tôi đã thay đổi setState () thành this.state = {} (cảm ơn joews), tuy nhiên, tôi vẫn không thấy sự khác biệt. Là một trong những tốt hơn so với khác?

Cần lưu ý rằng đó là một mô hình chống sao chép các thuộc tính không bao giờ thay đổi sang trạng thái (chỉ cần truy cập trực tiếp .props trong trường hợp đó). Nếu cuối cùng bạn có một biến trạng thái sẽ thay đổi nhưng bắt đầu bằng một giá trị từ .props, bạn thậm chí không cần một lệnh gọi hàm tạo - các biến cục bộ này được khởi tạo sau một lệnh gọi đến hàm tạo của cha mẹ:

class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
    // You can even call functions and class methods:
    y: this.someMethod(this.props.initialY),
  };
}

Đây là một tốc ký tương đương với câu trả lời từ @joews bên dưới. Nó dường như chỉ hoạt động trên các phiên bản mới hơn của bộ chuyển đổi es6, tôi đã gặp vấn đề với nó trên một số thiết lập webpack. Nếu điều này không phù hợp với bạn, bạn có thể thử thêm plugin babel babel-plugin-transform-class-propertieshoặc bạn có thể sử dụng phiên bản không viết tắt của @joews bên dưới.

Bạn không cần phải gọi setStatetrong Thành phần constructor- thật đơn giản để đặt this.statetrực tiếp:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      x: props.initialX
    };
  }
  // ...
}

Xem tài liệu React - Thêm trạng thái cục bộ vào một lớp .

Không có lợi thế cho phương pháp đầu tiên bạn mô tả. Nó sẽ dẫn đến một bản cập nhật thứ hai ngay lập tức trước khi gắn thành phần lần đầu tiên.

Cập nhật cho React 16.3 alpha được giới thiệu static getDerivedStateFromProps(nextProps, prevState)( tài liệu ) thay thế cho componentWillReceiveProps.

getDerivingStateFromProps được gọi sau khi một thành phần được khởi tạo cũng như khi nó nhận được các đạo cụ mới. Nó sẽ trả về một đối tượng để cập nhật trạng thái hoặc null để chỉ ra rằng các đạo cụ mới không yêu cầu bất kỳ cập nhật trạng thái nào.

Lưu ý rằng nếu một thành phần cha mẹ khiến thành phần của bạn hiển thị lại, phương thức này sẽ được gọi ngay cả khi đạo cụ không thay đổi. Bạn có thể muốn so sánh các giá trị mới và trước đây nếu bạn chỉ muốn xử lý các thay đổi.

https://reactjs.org/docs/react-component.html#static-getderivingstatefromprops

Nó là tĩnh, do đó nó không có quyền truy cập trực tiếp this(tuy nhiên nó có quyền truy cập prevState, có thể lưu trữ những thứ thường được gắn vào thisví dụ refs)

được chỉnh sửa để phản ánh sự điều chỉnh của @ nerfologist trong các bình luận

Bạn có thể sử dụng biểu mẫu ngắn như dưới đây nếu bạn muốn thêm tất cả đạo cụ vào trạng thái và giữ nguyên tên.

constructor(props) {
    super(props);
    this.state = {
       ...props
    }
    //...
}

thiết lập dữ liệu trạng thái bên trong hàm tạo như thế này

constructor(props) {
    super(props);
    this.state = {
      productdatail: this.props.productdetailProps
    };
  }

nó sẽ không hoạt động nếu bạn đặt phương thức side thành phầnDidMount () thông qua các đạo cụ.

Nếu bạn trực tiếp khởi tạo trạng thái từ các đạo cụ, nó sẽ hiển thị cảnh báo trong React 16.5 (ngày 5 tháng 9 năm 2018)

bạn có thể sử dụng keygiá trị để đặt lại trạng thái khi cần, chuyển các đạo cụ để nói rằng đó không phải là một cách thực hành tốt, bởi vì bạn có thành phần không được kiểm soát và kiểm soát ở một nơi. Dữ liệu nên được xử lý ở một nơi, hãy đọc https://reactjs.org/blog/2018/06/07/you-probossible-dont-need-derured-state.html#recommendation-fully-uncontrolled-component-with-a -Chìa khóa

Bạn có thể sử dụng thành phầnWillReceiveProps.

constructor(props) {
    super(props);
    this.state = {
      productdatail: ''
    };
  }

    componentWillReceiveProps(nextProps){
        this.setState({ productdatail: nextProps.productdetailProps })
    }

BẠN PHẢI CẨN THẬN khi bạn khởi tạo statetừ propstrong constructor. Ngay cả khi propsthay đổi thành trạng thái mới, trạng thái sẽ không bị thay đổi vì việc gắn kết không bao giờ xảy ra nữa. Vì vậy, getDerivedStateFromPropstồn tại cho điều đó.

class FirstComponent extends React.Component {
    state = {
        description: ""
    };

    static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.description !== nextProps.description) {
          return { description: nextProps.description };
        }

        return null;
    }

    render() {
        const {state: {description}} = this;    

        return (
            <input type="text" value={description} /> 
        );
    }
}