ตอบสนองตัวแทน API

ในส่วนนี้เราจะหารือเกี่ยวกับการตอบสนององค์ประกอบ API เราจะอธิบายต่อไปนี้เจ็ดวิธี:

• ตั้งสถานะ: setState
• เปลี่ยนสถานะ: replaceState
• การตั้งค่าคุณสมบัติ setProps
• แทนที่ replaceProps คุณสมบัติ
• ปรับปรุง: forceUpdate
• รับโหนด DOM: findDOMNode
• การวิเคราะห์องค์ประกอบของรัฐติด: isMounted

ตั้งสถานะ: setState

setState(object nextState[, function callback])

พารามิเตอร์คำอธิบาย

• nextState รัฐใหม่ที่จะตั้งค่าสถานะและรัฐผสานปัจจุบัน
• โทรกลับพารามิเตอร์ตัวเลือกฟังก์ชั่นการโทรกลับ ฟังก์ชั่นนี้จะถูกจัดให้อยู่ใน setState ประสบความสำเร็จเรียกว่าหลังจากการชุมนุมอีกครั้งในการแสดงผล

ผสาน nextState และรัฐในปัจจุบันและองค์ประกอบเรื่องการแสดงผล setState มีการตอบสนองวิธีการจัดการเหตุการณ์และขอ UI ที่สำคัญฟังก์ชั่นการปรับปรุงการเรียกกลับเรียก

เกี่ยวกับ setState

คุณไม่สามารถแก้ไขส่วนประกอบภายในโดยรัฐ this.state เพราะรัฐจะเข้ามาแทนที่ setState โทร () หลังจากที่

setState () ไม่เปลี่ยน this.state ทันที แต่เร็ว ๆ นี้จะสร้างการรักษารัฐ setState () ไม่จำเป็นต้องทำข้อมูลให้ตรงกันเพื่อเพิ่มประสิทธิภาพในการปฏิบัติงานจะตอบสนองรัฐดำเนินการชุดงานและการแสดงผล DOM

setState () เสมอก่อให้เกิดการชุมนุมวาดเว้นแต่จำนวนของเงื่อนไขที่จะบรรลุ shouldComponentUpdate () ในการแสดงผลตรรกะ

ตัวอย่าง

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

ลอง»

ตัวอย่างโดยการคลิกที่แท็ก H2 เพื่อให้เคาน์เตอร์ตีจะเพิ่มขึ้น

เปลี่ยนสถานะ: replaceState

replaceState(object nextState[, function callback])

• nextState, รัฐใหม่จะถูกกำหนดขึ้นซึ่งจะเปลี่ยนสถานะปัจจุบันของรัฐ
• โทรกลับพารามิเตอร์ตัวเลือกฟังก์ชั่นการโทรกลับ ฟังก์ชั่นนี้จะถูกจัดให้อยู่ใน replaceState ประสบความสำเร็จเรียกว่าหลังจากการชุมนุมอีกครั้งในการแสดงผล

replaceState () วิธี setState () จะคล้ายกัน แต่วิธีการที่เก็บไว้เพียงรัฐ nextState, สภาพเดิมไม่ได้สถานะ nextState จะถูกลบ

ตั้งค่าคุณสมบัติ: setProps

setProps(object nextProps[, function callback])

• nextProps สถานที่ให้บริการใหม่จะถูกตั้งค่าและสถานะปัจจุบันของประกอบฉากการควบรวมกิจการ
• โทรกลับพารามิเตอร์ตัวเลือกฟังก์ชั่นการโทรกลับ ฟังก์ชั่นนี้จะถูกจัดให้อยู่ใน setProps ประสบความสำเร็จเรียกว่าหลังจากการชุมนุมอีกครั้งในการแสดงผล

การตั้งค่าคุณสมบัติองค์ประกอบและ re-แสดงผลส่วนประกอบ

การไหลของข้อมูล props ส่วนประกอบเทียบเท่าก็จะถูกส่งผ่านลงมาจากแม่เพื่อทุกองค์ประกอบประกอบย่อย เมื่อมีการใช้ JavaScript ภายนอกและบูรณาการการประยุกต์ใช้เราอาจจำเป็นต้องส่งผ่านข้อมูลไปยังส่วนหรือทราบ React.render () ส่วนประกอบจำเป็นต้องทำให้คุณสามารถใช้ setProps ()

การปรับปรุงคอมโพเนนต์ React.render ฉันสามารถเรียกอีกครั้งบนโหนด () เพื่อเป็น () วิธีการเปลี่ยนคุณสมบัติองค์ประกอบโดย setProps ไกอีกครั้งการแสดงผลส่วนประกอบ

แทนที่แอตทริบิวต์: replaceProps

replaceProps(object nextProps[, function callback])

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

replaceProps () วิธีการคือ setProps ที่คล้ายกัน แต่มันจะลบเดิม

props

ปรับปรุง: forceUpdate

forceUpdate([function callback])

พารามิเตอร์คำอธิบาย

• โทรกลับพารามิเตอร์ตัวเลือกฟังก์ชั่นการโทรกลับ ฟังก์ชั่นนี้จะถูกเรียกว่าหลังจากองค์ประกอบแสดงผล () วิธีการโทร

forceUpdate () วิธีการที่ทำให้เกิดส่วนประกอบที่เรียกตัวเองทำให้ () วิธีการอีกครั้งทำให้องค์ประกอบย่อยประกอบส่วนประกอบจะเรียกคุณเองทำให้ () แต่เมื่อการชุมนุมอีกครั้งที่แสดงผลและยังคงอ่าน this.state this.props ถ้ารัฐไม่เปลี่ยนแล้ว React การปรับปรุงเพียง DOM

forceUpdate () วิธีนี้เหมาะสำหรับ this.props ภายนอกและวาดส่วนประกอบ this.state (เช่น: การเปลี่ยนแปลงหลังจาก this.state) แจ้งจากวิธีการตอบสนองเรียกแสดงผล ()

โดยทั่วไปแล้วคุณควรหลีกเลี่ยงการใช้ forceUpdate () และอ่านเท่านั้น this.props และ this.state รัฐเรียกโดยทำปฏิกิริยาทำให้สาย ()

รับโหนด DOM: findDOMNode

DOMElement findDOMNode()

• ราคาย้อนกลับ: DOM องค์ประกอบ DOMElement

หากองค์ประกอบที่ได้รับการติดตั้งกับ DOM วิธีการที่ผลตอบแทนที่สอดคล้องกับเบราว์เซอร์ท้องถิ่นองค์ประกอบ DOM เมื่อทำให้ผลตอบแทนโมฆะหรือเท็จเมื่อ this.findDOMNode () จะกลับ NULL อ่านจากมูลค่า DOM ที่วิธีการนี้จะเป็นประโยชน์เช่นได้รับค่าของเขตข้อมูลฟอร์มและทำจัดการ DOM บาง

การวิเคราะห์องค์ประกอบของรัฐติด: isMounted

bool isMounted()

• กลับค่า: จริงหรือเท็จระบุว่าส่วนประกอบติดตั้งเพื่อ DOM

isMounted () วิธีการที่ใช้ในการตรวจสอบว่าชิ้นส่วนที่มีการติดตั้งไป DOM คุณสามารถใช้วิธีนี้เพื่อให้มั่นใจว่าการเรียก setState () และ forceUpdate () ในสถานการณ์ตรงกันไม่สามารถไปอย่างผิดปกติ

นี้โดยอ้างอิง: http: //itbilu.com/javascript/react/EkACBdqKe.html