রাজ্যহীন উপাদানগুলির কাজগুলি?

Question 1

আমি এই শীতল <canvas>অ্যানিমেশনটি এখানে পেয়েছি একটি প্রতিক্রিয়া পুনরায় ব্যবহারযোগ্য উপাদান হিসাবে রূপান্তর করার চেষ্টা করছি । দেখে মনে হচ্ছে এই উপাদানটির জন্য ক্যানভাসের জন্য একটি প্যারেন্ট উপাদান এবং তার জন্য অনেকগুলি শিশু উপাদান প্রয়োজন function Ball()।

পারফরম্যান্সের কারণে সম্ভবত এটি Ballsস্টেটলেস উপাদানগুলিতে তৈরি করা ভাল কারণ তাদের মধ্যে অনেকগুলি রয়েছে। আমি আড়ম্বরহীন উপাদান তৈরীর সাথে পরিচিত না আছি এবং হতাশ ছিল যেখানে আমি সংজ্ঞায়িত করা উচিত this.update()এবং this.drawফাংশন যে সংজ্ঞায়িত করা হয় function Ball()।

রাজ্যহীন উপাদানগুলির জন্য কাজগুলি কি উপাদানটির ভিতরে বা বাইরে যায়? অন্য কথায়, নিম্নলিখিত কোনটি ভাল?

1:

const Ball = (props) => {
    const update = () => {
        ...
    }

    const draw = () => {
        ...
    }

    return (
       ...
    );
}

2:

function update() {
     ...
}

function draw() {
     ...
}

const Ball = (props) => {
    return (
       ...
    );
}

প্রত্যেকের উপকারিতা / বিভক্তিগুলি কী কী এবং যেমন খনি হিসাবে সুনির্দিষ্ট ব্যবহারের ক্ষেত্রে এর মধ্যে একটি ভাল?

Question 2

প্রথম বিষয় লক্ষণীয় যে স্টেটলেস ফাংশনাল উপাদানগুলির পদ্ধতি থাকতে পারে না, যদি এটি স্টেটলেস ফাংশনাল উপাদান হয় তবে আপনার কলিং updateবা রেন্ডারে বিশ্বাস করা উচিত নয় ।drawBall

বেশিরভাগ ক্ষেত্রে আপনাকে উপাদান ফাংশনের বাইরে ফাংশনগুলি ডিক্লেয়ার করা উচিত যাতে আপনি সেগুলি কেবল একবার ঘোষণা করেন এবং সর্বদা একই রেফারেন্সটি পুনরায় ব্যবহার করুন। আপনি যখন ভিতরে ফাংশনটি ঘোষণা করবেন তখন প্রতিবার উপাদানটি রেন্ডার করলে ফাংশনটি আবার সংজ্ঞায়িত হবে।

এমন কিছু ক্ষেত্রে রয়েছে যেখানে আপনাকে উপাদানটির ভিতরে কোনও ফাংশন সংজ্ঞায়িত করতে হবে, উদাহরণস্বরূপ, এটি ইভেন্ট হ্যান্ডলার হিসাবে নির্ধারণ করুন যা উপাদানটির বৈশিষ্ট্যের উপর ভিত্তি করে আলাদাভাবে আচরণ করে। কিন্তু এখনও তোমাকে ফাংশন বাহিরে সংজ্ঞায়িত করতে পারে Ballএবং বাঁধুন এটা properties সহযোগে, কোড অনেক ক্লিনার তৈরীর এবং উপার্জন updateবা drawফাংশন পুনর্ব্যবহারযোগ্য।

// You can use update somewhere else
const update (propX, a, b) => { ... };

const Ball = props => (
  <Something onClick={update.bind(null, props.x)} />
);

আপনি যদি হুক ব্যবহার করছেন তবে আপনি useCallbackযখন ফাংশনটির কোনও নির্ভরতা ( props.xএই ক্ষেত্রে) পরিবর্তিত হয় কেবল তখনই ফাংশনটিকে নতুন সংজ্ঞা দেওয়া হয়েছে তা নিশ্চিত করতে আপনি ব্যবহার করতে পারেন :

const Ball = props => {
  const onClick = useCallback((a, b) => {
    // do something with a, b and props.x
  }, [props.x]);

  return (
    <Something onClick={onClick} />
  );
}

এটি ভুল উপায় :

const Ball = props => {
  function update(a, b) {
    // props.x is visible here
  }

  return (
    <Something onClick={update} />
  );
}

যখন ব্যবহার useCallback, সংজ্ঞায়িত updateফাংশন useCallbackহুক নিজেই আমাদের বাহিরে উপাদান সবকিছু বাদ দিয়েও একটি নকশা সিদ্ধান্ত হয়ে, আপনি পুনঃব্যবহারের যাচ্ছেন আপনি বিবেচনা করা উচিত updateএবং / অথবা আপনাকে কম্পোনেন্ট এর অবসান পরিধি অ্যাক্সেস করার দরকার হয়, উদাহরণস্বরূপ, পড়ুন / রাজ্যে লিখুন। ব্যক্তিগতভাবে আমি ডিফল্টরূপে এটি উপাদানটির অভ্যন্তরে সংজ্ঞায়িত করতে পছন্দ করি এবং কেবল প্রারম্ভিকভাবে ইঞ্জিনিয়ারিং রোধ করতে প্রয়োজন দেখা দেয় তবে এটি পুনরায় ব্যবহারযোগ্য করে তুলি। যে পুনরায় ব্যবহারের অ্যাপ্লিকেশন লজিক উপস্থাপনা উদ্দেশ্যে উপাদান রেখে, আরও নির্দিষ্ট হুক সঙ্গে ভাল সম্পন্ন করা হয়। হুক ব্যবহার করার সময় উপাদানটির বাইরে ফাংশনটি সংজ্ঞায়িত করা আপনার অ্যাপ্লিকেশন লজিকের জন্য আপনি যে প্রতিক্রিয়াটি চান তা থেকে ডিকউলিংয়ের গ্রেডের উপর নির্ভর করে।

Question 3

স্টেটলেস ফাংশনাল উপাদানগুলির ভিতরে আমরা ফাংশন রাখতে পারি, নীচের উদাহরণটি হল:

 const Action = () => {
  function  handlePick(){
     alert("test");
  }
  return (
    <div>
      <input type="button" onClick={handlePick} value="What you want to do ?" />
    </div>
  );
}

কিন্তু, এটি একটি ভাল অনুশীলন নয় কারণ handlePick()উপাদানটি যখন ডাকা হবে তখন প্রতিবার ফাংশনটি সংজ্ঞায়িত করা হবে।

Question 4

আমরা useCallbackকার্যকারী উপাদান হিসাবে নীচে হিসাবে প্রতিক্রিয়া হুক ব্যবহার করতে পারেন :

const home = (props) => {
    const { small, img } = props
    const [currentInd, setCurrentInd] = useState(0);
    const imgArrayLength = img.length - 1;
    useEffect(() => {
        let id = setInterval(() => {
            if (currentInd < imgArrayLength) {
                setCurrentInd(currentInd => currentInd + 1)
            }
            else {
                setCurrentInd(0)
            }
        }, 5000);
        return () => clearInterval(id);
    }, [currentInd]);
    const onLeftClickHandler = useCallback(
        () => {
            if (currentInd === 0) {

            }
            else {
                setCurrentInd(currentInd => currentInd - 1)
            }
        },
        [currentInd],
    );

    const onRightClickHandler = useCallback(
        () => {
            if (currentInd < imgArrayLength) {
                setCurrentInd(currentInd => currentInd + 1)
            }
            else {

            }
        },
        [currentInd],
    );
    return (
        <Wrapper img={img[currentInd]}>
            <LeftSliderArrow className={currentInd > 0 ? "red" : 'no-red'} onClick={onLeftClickHandler}>
                <img src={Icon_dir + "chevron_left_light.png"}></img>
            </LeftSliderArrow>
            <RightSliderArrow className={currentInd < imgArrayLength ? "red" : 'no-red'} onClick={onRightClickHandler}>
                <img src={Icon_dir + "chevron_right_light.png"}></img>
            </RightSliderArrow>
        </Wrapper>);
}

export default home;

আমি তার পিতামাতার কাছ থেকে 'img' পাচ্ছি এবং এটি একটি অ্যারে।

Question 5

আপনি যদি ফাংশনে প্রপস বা উপাদানগুলির উপাদান ব্যবহার করতে চান তবে সেটিকে ইউজক্যালব্যাক সহ সংজ্ঞায়িত করা উচিত।

function Component(props){
  const onClick=useCallback(()=>{
     // Do some things with props or state
  },[])
}

অন্যদিকে, আপনি যদি প্রপস বা ফাংশনে স্টেট ব্যবহার করতে না চান তবে উপাদানটির বাইরে এটি নির্ধারণ করুন।

const computeSomethings=()=>{
   // Do some things with params or side effects
}

function Component(props){
  
}