วิธีฟังการเปลี่ยนแปลงสถานะใน react.js อย่างไร

ฟังก์ชัน$ watchเชิงมุมของเทียบเท่าใน React.js คืออะไร

ฉันต้องการฟังการเปลี่ยนแปลงสถานะและเรียกใช้ฟังก์ชันเช่น getSearchResults ()

componentDidMount: function() {
    this.getSearchResults();
}

ฉันไม่ได้ใช้ Angular แต่อ่านลิงค์ด้านบนดูเหมือนว่าคุณกำลังพยายามเขียนโค้ดสำหรับสิ่งที่คุณไม่จำเป็นต้องจัดการ คุณทำการเปลี่ยนแปลงสถานะในลำดับชั้นของส่วนประกอบ React ของคุณ (ผ่าน this.setState ()) และ React จะทำให้คอมโพเนนต์ของคุณแสดงผลอีกครั้ง ('รับฟัง' เพื่อการเปลี่ยนแปลงอย่างมีประสิทธิภาพ) หากคุณต้องการ 'ฟัง' จากองค์ประกอบอื่นในลำดับชั้นของคุณคุณมีสองตัวเลือก:

1. ผ่านตัวจัดการลง (ผ่านอุปกรณ์ประกอบฉาก) จากพาเรนต์ทั่วไปและให้พวกเขาอัพเดตสถานะของพาเรนต์ทำให้ลำดับชั้นด้านล่างพาเรนต์ถูกแสดงอีกครั้ง
2. อีกทางหนึ่งเพื่อหลีกเลี่ยงการระเบิดของตัวจัดการเรียงซ้อนลงตามลำดับชั้นคุณควรดูรูปแบบฟลักซ์ซึ่งย้ายสถานะของคุณไปยังที่เก็บข้อมูลและอนุญาตให้ส่วนประกอบดูการเปลี่ยนแปลง ปลั๊กอิน Fluxxorเป็นประโยชน์อย่างมากสำหรับการจัดการนี้

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

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

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

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

ตั้งแต่ทำปฏิกิริยา 16.8 ในปี 2019 ด้วยuseStateและuseEffect Hooks ต่อไปนี้จะเทียบเท่ากัน (ในกรณีง่าย ๆ ):

AngularJS:

$scope.name = 'misko'
$scope.$watch('name', getSearchResults)

<input ng-model="name" />

ตอบสนอง:

const [name, setName] = useState('misko')
useEffect(getSearchResults, [name])

<input value={name} onChange={e => setName(e.target.value)} />

การใช้ useState กับ useEffect ตามที่อธิบายไว้ข้างต้นเป็นวิธีที่ถูกต้องอย่างแน่นอน แต่ถ้าฟังก์ชัน getSearchResults คืนค่าการสมัครสมาชิก useEffect ควรส่งคืนฟังก์ชันที่จะรับผิดชอบการยกเลิกการสมัครสมาชิก ฟังก์ชันที่ส่งคืนจาก useEffect จะทำงานก่อนการเปลี่ยนแปลงแต่ละครั้งเป็นการพึ่งพา (ชื่อในตัวพิมพ์ใหญ่) และการทำลายส่วนประกอบ

มันใช้เวลาสักครู่ แต่สำหรับการอ้างอิงในอนาคต: วิธีการ shouldComponentUpdate () สามารถใช้ได้

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

static getDerivedStateFromProps() 
shouldComponentUpdate() 
render()
getSnapshotBeforeUpdate() 
componentDidUpdate()

ref: https://reactjs.org/docs/react-component.html