ส่วนประกอบทำปฏิกิริยาเริ่มต้นสถานะจากอุปกรณ์ประกอบฉาก

ใน React มีความแตกต่างที่แท้จริงระหว่างการใช้งานทั้งสองนี้หรือไม่ เพื่อนบางคนบอกฉันว่า FirstComponent เป็นรูปแบบ แต่ฉันไม่เห็นว่าทำไม SecondComponent ดูง่ายขึ้นเพราะการเรนเดอร์ถูกเรียกเพียงครั้งเดียว

ครั้งแรก:

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;

ประการที่สอง:

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;

อัปเดต: ฉันเปลี่ยน setState () เป็น this.state = {} (ขอขอบคุณ joews) อย่างไรก็ตามฉันยังไม่เห็นความแตกต่าง ดีกว่าอีกไหม?

ควรสังเกตว่ามันเป็นรูปแบบการต่อต้านในการคัดลอกคุณสมบัติที่ไม่เคยเปลี่ยนเป็นสถานะ (เพียงเข้าถึง. props โดยตรงในกรณีนั้น) หากคุณมีตัวแปรสถานะที่จะเปลี่ยนในที่สุด แต่เริ่มต้นด้วยค่าจาก. โปรแกรมคุณไม่จำเป็นต้องมีการเรียกตัวสร้าง - ตัวแปรท้องถิ่นเหล่านี้จะเริ่มต้นหลังจากการเรียกไปยังตัวสร้างของผู้ปกครอง:

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

นี่เทียบเท่ากับคำตอบจาก @joews ด้านล่าง ดูเหมือนว่าจะทำงานเฉพาะกับ transpilers รุ่นล่าสุดของ ES6 ฉันมีปัญหากับการตั้งค่า webpack บางอย่าง หากวิธีนี้ไม่ได้ผลสำหรับคุณคุณสามารถลองเพิ่มปลั๊กอินของ babel babel-plugin-transform-class-propertiesหรือคุณสามารถใช้เวอร์ชันที่ไม่ใช่แบบย่อโดย @joews ด้านล่าง

คุณไม่จำเป็นต้องโทรหาsetStateตัวแทนconstructor- มันเป็นเรื่องง่ายที่จะตั้งค่าthis.stateโดยตรง:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

ดูปฏิกิริยาเอกสาร - เพิ่มรัฐท้องถิ่นชั้น

ไม่มีประโยชน์สำหรับวิธีแรกที่คุณอธิบาย มันจะส่งผลให้มีการอัพเดตครั้งที่สองทันทีก่อนที่จะประกอบชิ้นส่วนเป็นครั้งแรก

การปรับปรุงสำหรับตอบสนอง 16.3อัลฟาแนะนำstatic getDerivedStateFromProps(nextProps, prevState)( เอกสาร ) componentWillReceivePropsแทนสำหรับ

getDerivedStateFromProps ถูกเรียกใช้หลังจากที่คอมโพเนนต์ถูกสร้างอินสแตนซ์และเมื่อได้รับอุปกรณ์ประกอบฉากใหม่ มันควรจะคืนค่าออบเจกต์เพื่ออัพเดทสถานะหรือโมฆะเพื่อระบุว่าอุปกรณ์ประกอบฉากใหม่ไม่ต้องการการอัพเดทสถานะใด ๆ

โปรดทราบว่าหากองค์ประกอบหลักทำให้องค์ประกอบของคุณแสดงผลอีกครั้งวิธีนี้จะถูกเรียกใช้แม้ว่าอุปกรณ์ประกอบฉากจะไม่เปลี่ยนแปลง คุณอาจต้องการเปรียบเทียบค่าใหม่และค่าก่อนหน้าหากคุณต้องการจัดการการเปลี่ยนแปลงเท่านั้น

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

มันเป็นแบบคงที่ดังนั้นจึงไม่สามารถเข้าถึงได้โดยตรงthis(แต่มันมีการเข้าถึงprevStateซึ่งสามารถจัดเก็บสิ่งต่าง ๆ ที่แนบมาตามปกติthisเช่นrefs)

แก้ไขเพื่อสะท้อนการแก้ไขของ @ nerfologist ในความคิดเห็น

คุณสามารถใช้แบบฟอร์มสั้น ๆ ด้านล่างหากคุณต้องการเพิ่มอุปกรณ์ประกอบฉากทั้งหมดเพื่อระบุและรักษาชื่อเดิมไว้

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

ตั้งค่าข้อมูลสถานะภายในตัวสร้างเช่นนี้

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

มันจะไม่ทำงานหากคุณตั้งค่าใน componentDidMount () ด้านวิธีการผ่านอุปกรณ์ประกอบฉาก

หากคุณเริ่มต้นสถานะโดยตรงจากอุปกรณ์ประกอบฉากมันจะแสดงคำเตือนในการตอบสนอง 16.5 (5 กันยายน 2018)

คุณสามารถใช้keyค่าเพื่อรีเซ็ตสถานะเมื่อต้องการส่งผ่านอุปกรณ์ประกอบฉากเพื่อระบุว่าไม่ใช่วิธีปฏิบัติที่ดีเพราะคุณมีส่วนประกอบที่ไม่สามารถควบคุมและควบคุมได้ในที่เดียว ข้อมูลที่ควรจะอยู่ในสถานที่แห่งหนึ่งสถานการณ์รูปอ่าน https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -สำคัญ

คุณสามารถใช้ componentWillReceiveProps

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

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

คุณต้องระวังเมื่อคุณเริ่มต้นstateจากpropsในตัวสร้าง แม้ว่าจะpropsเปลี่ยนเป็นใหม่ แต่รัฐก็จะไม่เปลี่ยนเพราะการเมาท์จะไม่เกิดขึ้นอีก ดังนั้นgetDerivedStateFromPropsอยู่ที่

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} /> 
        );
    }
}