reactjs - tutorial - react native




একটি প্রতিক্রিয়া উপাদান কেন পুনরায় উপস্থাপন করছে তা ট্রেস করুন (4)

@ jpdelatorre এর উত্তর সাধারণ কারণগুলিকে একটি প্রতিক্রিয়া উপাদান পুনরায় রেন্ডার করতে পারে তা হাইলাইট করার ক্ষেত্রে দুর্দান্ত।

আমি কেবল একটি উদাহরণের মধ্যে আরও গভীর ডুব দিতে চেয়েছিলাম: যখন প্রপস পরিবর্তন হয় । রিঅ্যাক্ট উপাদানকে পুনরায় রেন্ডার করতে সমস্যাজনিত সমস্যা সমাধান করা একটি সাধারণ সমস্যা এবং আমার অভিজ্ঞতায় অনেক সময় এই সমস্যাটি অনুসন্ধান করার সময় কোন প্রস পরিবর্তন হচ্ছে তা নির্ধারণের সাথে জড়িত

উপাদানগুলি পুনরায় রেন্ডার করুন প্রতিক্রিয়া করুন যখনই তারা নতুন প্রপস পান। তারা যেমন নতুন প্রসেস গ্রহণ করতে পারে:

<MyComponent prop1={currentPosition} prop2={myVariable} />

বা যদি MyComponent একটি MyComponent সাথে সংযুক্ত থাকে:

function mapStateToProps (state) {
  return {
    prop3: state.data.get('savedName'),
    prop4: state.data.get('userCount')
  }
}

যেকোনো সময় prop1 , prop2 , prop3 , বা prop4 পরিবর্তনগুলি MyComponent পুনরায় রেন্ডার করবে। 4 টি console.log(this.props) সাহায্যে render ব্লকের সেই শুরুতে কোন console.log(this.props) রেখে কোন console.log(this.props) পরিবর্তন হচ্ছে তা ট্র্যাক করা খুব কঠিন নয়। তবে আরও জটিল উপাদান এবং আরও বেশি প্রপসের সাথে এই পদ্ধতিটি অযোগ্য।

কোন প্রোপ পরিবর্তনগুলি কোনও উপাদানকে পুনরায় রেন্ডার lodash তা নির্ধারণ করতে এখানে একটি দরকারী পদ্ধতির (সুবিধার জন্য lodash ব্যবহার করে):

componentWillReceiveProps (nextProps) {
  const changedProps = _.reduce(this.props, function (result, value, key) {
    return _.isEqual(value, nextProps[key])
      ? result
      : result.concat(key)
  }, [])
  console.log('changedProps: ', changedProps)
}

আপনার উপাদানটিতে এই স্নিপেটটি যুক্ত করা পুনরায় রেন্ডারকারীদের উদ্বেগজনিত অপরাধীকে প্রকাশ করতে সহায়তা করতে পারে এবং অনেক সময় এটি অপ্রয়োজনীয় ডেটা উপাদানগুলিতে নষ্ট করার বিষয়ে আলোকপাত করতে সহায়তা করে।

রিব্যাক্টে কোনও উপাদানকে পুনরায় রেন্ডার করার কারণে ডিবাগ করার জন্য কি কোনও নিয়মতান্ত্রিক পন্থা রয়েছে? এটি কত সময় রেন্ডার করে তা দেখতে আমি একটি সাধারণ কনসোল.লগ () রেখেছি, তবে উপাদানটি আমার ক্ষেত্রে একাধিকবার (4 বার) রেন্ডার করছে কি তা নির্ধারণ করতে সমস্যা হচ্ছে। এমন কোনও সরঞ্জাম রয়েছে যা একটি টাইমলাইন এবং / অথবা সমস্ত উপাদান গাছের রেন্ডার এবং ক্রম দেখায়?


অদ্ভুত কেউই উত্তরটি দেয়নি তবে আমি এটি খুব দরকারী বলে মনে করি, বিশেষত যেহেতু প্রপস পরিবর্তনগুলি প্রায় সবসময় গভীরভাবে বাসা বেঁধে থাকে।

হুক ফ্যানবয়:

import deep_diff from "deep-diff";
const withPropsChecker = WrappedComponent => {
  return props => {
    const prevProps = useRef(props);
    useEffect(() => {
      const diff = deep_diff.diff(prevProps.current, props);
      if (diff) {
        console.log(diff);
      }
      prevProps.current = props;
    });
    return <WrappedComponent {...props} />;
  };
};

"পুরাতন" -স্কুলের ফ্যানবয়:

import deep_diff from "deep-diff";
componentDidUpdate(prevProps, prevState) {
      const diff = deep_diff.diff(prevProps, this.props);
      if (diff) {
        console.log(diff);
      }
}

পিএস আমি এখনও এইচওসি (উচ্চতর অর্ডার উপাদান) ব্যবহার করতে পছন্দ করি কারণ কখনও কখনও আপনি উপরের দিকে প্রপসগুলি তৈরি করে ফেলেছেন এবং জ্যাকবের সমাধানটি ভাল মানায় না

দাবি অস্বীকার: প্যাকেজ মালিকের সাথে কোনও সম্পর্ক নেই। গভীরভাবে নেস্টেড বস্তুর মধ্যে পার্থক্য চিহ্নিত করার চেষ্টা করার জন্য প্রায় দশবার বার ক্লিক করা একটি ব্যথা।


উপরের উত্তরগুলি খুব সহায়ক, কেবল যদি কেউ যদি রেন্ডারটির কারণ সনাক্ত করার জন্য কোনও বিশেষ পদ্ধতির সন্ধান করে তবে আমি এই লাইব্রেরি রিডেক্স-লগারকে খুব সহায়ক বলে মনে করেছি।

আপনি যা করতে পারেন তা হল লাইব্রেরি যুক্ত করা এবং রাষ্ট্রের মধ্যে পার্থক্য সক্ষম করা (এটি ডক্সে রয়েছে) যেমন:

const logger = createLogger({
    diff: true,
});

এবং দোকানে মিডলওয়্যার যুক্ত করুন।

তারপরে আপনি যে উপাদানটি পরীক্ষা করতে চান তার রেন্ডার ফাংশনে একটি console.log()

তারপরে আপনি আপনার অ্যাপটি চালাতে পারেন এবং কনসোল লগগুলি পরীক্ষা করতে পারেন W যেখানেই কোনও লগ রয়েছে তার আগে আপনাকে রাষ্ট্রের (nextProps and this.props) মধ্যে পার্থক্য দেখাবে এবং আপনি ঠিক করতে পারেন যে সেখানে রেন্ডারটি সত্যই প্রয়োজন কিনা।

এটি পৃথক কী সহ উপরের চিত্রের সাথেও মিলিত হবে।


এখানে কিছু উদাহরণ রয়েছে যা একটি প্রতিক্রিয়া উপাদান পুনরায় রেন্ডার করবে।

  • মূল উপাদান রেন্ডার
  • this.setState() মধ্যে this.setState() কল করা হচ্ছে। এটি নিম্নলিখিত উপাদানগুলির জীবনচক্র পদ্ধতিগুলিকে ট্রিগার করবে componentWillUpdate > shouldComponentUpdate > render > shouldComponentUpdate
  • উপাদানগুলির props পরিবর্তনগুলি। এটি componentWillReceiveProps shouldComponentUpdate ট্রিগার করবে> shouldComponentUpdate > componentWillUpdate shouldComponentUpdate > render > componentDidUpdate shouldComponentUpdate (যখন shouldComponentUpdate প্রযোজ্য পরিবর্তনগুলি রয়েছে তখন shouldComponentUpdate ট্রিগার করার পদ্ধতিটি connect )
  • this.forceUpdate কল this.forceUpdate যা this.forceUpdate অনুরূপ

আপনি আপনার কম্পোনেন্টস আপডেটের অভ্যন্তরে একটি চেক প্রয়োগ করে এবং যদি প্রয়োজন না হয় তবে false ফিরিয়ে দিয়ে আপনার shouldComponentUpdate রেন্ডার হ্রাস করতে পারেন।

আর একটি উপায় হ'ল React.PureComponent কম্পোনেন্ট বা React.PureComponent উপাদানগুলি। খাঁটি এবং রাষ্ট্রবিহীন উপাদানগুলি কেবল তখনই পুনরায় রেন্ডার করে যখন এর প্রপসগুলিতে পরিবর্তন হয়।





redux