स्टेटलेस घटकों में कार्य?

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या drawरेंडर पर भरोसा नहीं करना चाहिए Ball।

ज्यादातर मामलों में आपको घटक फ़ंक्शन के बाहर के कार्यों की घोषणा करनी चाहिए ताकि आप उन्हें केवल एक बार घोषित करें और हमेशा एक ही संदर्भ का उपयोग करें। जब आप फ़ंक्शन को अंदर घोषित करते हैं, तो हर बार घटक प्रदान किए जाने पर फ़ंक्शन को फिर से परिभाषित किया जाएगा।

ऐसे मामले हैं जिनमें आपको घटक के अंदर एक फ़ंक्शन को परिभाषित करने की आवश्यकता होगी, उदाहरण के लिए, इसे एक इवेंट हैंडलर के रूप में असाइन करें जो घटक के गुणों के आधार पर भिन्न व्यवहार करता है। लेकिन फिर भी आप फ़ंक्शन को बाहर से परिभाषित कर सकते हैं Ballऔर इसे गुणों के साथ बाँध सकते हैं, जिससे कोड बहुत अधिक क्लीनर बन जाएगा 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){
  
}