state
جديدة أو props
جديدة ، فإنه يعيد نفسه وجميع أبنائه. هذا عادة ما يرام. لكن React يوفر طريقة دورة حياة يمكنك الاتصال بها عندما تتلقى مكونات state
الطفل أو props
الجديدة ، وتعلن تحديدًا إذا كان يجب تحديث المكونات أم لا. هذه الطريقة هي shouldComponentUpdate()
، وتستغرق nextProps
و nextState
كمعلمات. هذه الطريقة هي طريقة مفيدة لتحسين الأداء. على سبيل المثال ، السلوك الافتراضي هو أن المكون الخاص بك re-renders عندما يتلقى props
الجديدة ، حتى إذا لم يتم تغيير props
. يمكنك استخدام shouldComponentUpdate()
لمنع هذا عن طريق مقارنة props
. يجب أن تقوم الطريقة بإرجاع قيمة boolean
تخبر رد ما إذا كان سيتم تحديث المكون أم لا. يمكنك مقارنة الدعائم الحالية ( this.props
) this.props
التالية ( nextProps
) لتحديد ما إذا كنت بحاجة إلى التحديث أم لا ، وإرجاع true
أو false
وفقًا لذلك. shouldComponentUpdate()
في مكون يسمى OnlyEvens
. حاليًا ، يعود هذا الأسلوب إلى true
لذا تعيد OnlyEvens
الظهور في كل مرة تتلقى فيها props
الجديدة. قم بتعديل الطريقة بحيث لا يتم تحديث OnlyEvens
إلا إذا كانت value
الدعائم الجديدة حتى. انقر فوق الزر Add
وشاهد ترتيب الأحداث في وحدة تحكم المستعرض الخاص بك أثناء تشغيل hooks دورة الحياة الأخرى. Controller
OnlyEvens
مكون OnlyEvens
كطفل.
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find("Controller").length === 1 && mockedComponent.find("OnlyEvens").length === 1; })(), "The Controller
component should render the OnlyEvens
component as a child.");'
- text: ''
testString: 'assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,""); return child !== "undefined"; })(), "The shouldComponentUpdate
method should be defined on the OnlyEvens
component.");'
- text: ''
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find("h1").html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find("h1").html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === "OnlyEvens
component should return an h1
tag which renders the value of this.props.value
."); }; '
- text: ''
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === "8" && secondValue === "8" && thirdValue === "42", "OnlyEvens
should re-render only when nextProps.value
is even."); }; '
```