حياة مكونات ReactJS

في هذا الفصل، سنناقش طرق حياة المكونات.

طرق الحياة

• componentWillMount تم تنفيذ هذا على الخادم والجهاز الكlient قبل التجميع.

• componentDidMountيتم تنفيذ هذا فقط بعد تنفيذ التجميع الأول على الجهاز الكlient. هذا هو المكان الذي يجب فيه إجراء طلبات AJAX وتحديث DOM أو الحالة. يتم استخدام هذا الأسلوب أيضًا للتفاعل مع إطارات عمل JavaScript الأخرى وأي وظيفة تنفيذ مسبق (مثلsetTimeoutأو)دمجsetIntervalنحن نستخدمه لتحديث الحالة، حتى نتمكن من إثارة طرق الحياة الأخرى.

• componentWillReceivePropsتتم دعوة هذه الدالة بعد تحديث الخاصيات، ثم يتم دعوة وحدة الترقية الأخرى. نحن منsetNewNumberعند تحديث الحالة.

• shouldComponentUpdateيجب العودةtrueأوfalseالقيمة. سيحدد هذا ما إذا كان المكون سيتم تحديثه.trueيتم تعيينه افتراضياً. إذا كنت متأكداً من أن المكون لا يحتاج إلى تحديث بعد الترقيةstateأوpropsيتم عرض التحديث بعد الترقية، يمكن العودةfalseالقيمة.

• componentWillUpdate تتم دعوة هذه الدالة قبل الترقية.

• componentDidUpdate تتم دعوة هذه الدالة على الفور بعد الترقية.

• componentWillUnmountتتم دعوة هذه الدالة بعد إزالة المكون من DOM. نحن في عملية إزالة المكونmain.js.

في المثال التالي، سنقومstateفي الكونструктор يتم تعيين القيمة الافتراضية. سيتمsetNewnumberللتحديثstateجميع طرق الحياة في داخلة مكون Content.

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　constructor(props) {
　　　　　　super(props);
　　　　　　
　　　　　　this.state = {
　　　　　　　　　data: 0
　　　　　　}
　　　　　　this.setNewNumber = this.setNewNumber.bind(this)
　　　};
　　　setNewNumber() {
　　　　　　this.setState({data: this.state.data + 1})
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<button onClick = {this.setNewNumber}>زيادة</button>
　　　　　　　　　　　　<Content myNumber = {this.state.data}></Content>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component {
　　　componentWillMount() {
　　　　　　console.log('ال�件 سيتم إدراجه!')
　　　}
　　　componentDidMount() {
　　　　　　console.log('ال�件 تم إدراجه!')
　　　}
　　　componentWillReceiveProps(newProps) {　　　　
　　　　　　console.log('ال�件 سيستلم الخاصيات!')
　　　}
　　　shouldComponentUpdate(newProps,　newState)　{
　　　　　　return　true;
　　　}
　　　componentWillUpdate(nextProps,　nextState)　{
　　　　　　console.log('Component　WILL　UPDATE!');
　　　}
　　　componentDidUpdate(prevProps,　prevState)　{
　　　　　　console.log('Component　DID　UPDATE!')
　　　}
　　　componentWillUnmount()　{
　　　　　　console.log('Component　WILL　UNMOUNT!')
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h3>{this.props.myNumber}</h3>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/>,　document.getElementById('app'));
setTimeout(()　=>　{
　　　ReactDOM.unmountComponentAtNode(document.getElementById('app'));},　10000);

بعد إكمال التجميع الأولي، سنحصل على الشاشة التالية.