👩🏼‍🤝‍👨🏿 📸 🗼 स्वच्छ प्रतिक्रिया कोड लिखने के लिए 14 सुझाव। भाग २ 👹 🎴 👨🏼‍🍳

आज हम रिएक्ट एप्लिकेशन विकसित करते समय स्वच्छ कोड लिखने पर सामग्री के दूसरे भाग को प्रकाशित कर रहे हैं। यहाँ कुछ और उपयोगी सुझाव दिए गए हैं।

→ पहला भाग पढ़ें

8. डुप्लिकेट तत्वों को घटकों में बदलें

डुप्लिकेट तत्वों को पुन: उपयोग के लिए उपयुक्त घटकों में परिवर्तित करने को ऐसे तत्वों का "घटककरण" कहा जा सकता है।

प्रत्येक डेवलपर के अपने कारण हैं कि वह डुप्लिकेट रिएक्ट कोड क्यों लिखता है। यह एक जानबूझकर कार्रवाई हो सकती है, या यह एक दुर्घटना हो सकती है।

आवेदन में समान कोड अंशों के प्रकट होने का कारण जो भी हो, प्रोग्रामर को यह सोचना चाहिए कि स्थिति को कैसे सुधारें।

उदाहरण के लिए, यदि किसी ने डुप्लिकेट से छुटकारा पाने की आदत नहीं बनाई है, तो वे अपनी परियोजनाओं में बार-बार उत्पन्न होने की संभावना करेंगे। ऐसा करने वाला टीम का खिलाड़ी कौन सा है? यह बस अपने सहयोगियों के भविष्य के जीवन को जटिल बनाता है, जो डुप्लिकेट कोड का सामना करने पर भ्रमित हो जाएंगे। यदि उन्हें समान कोड अंशों को संपादित करना है तो उन्हें एक विशेष "उपहार" मिलेगा।

निम्नलिखित उदाहरण पर एक नज़र डालें और सोचें कि इसे कैसे सुधारें:

const SomeComponent = () => (   <Body noBottom>     <Header center>Title</Header>     <Divider />     <Background grey>       <Section height={500}>         <Grid spacing={16} container>           <Grid xs={12} sm={6} item>             <div className={classes.groupsHeader}>               <Header center>Groups</Header>             </div>           </Grid>           <Grid xs={12} sm={6} item>             <div>               <img src={photos.groups} alt="" className={classes.img} />             </div>           </Grid>         </Grid>       </Section>     </Background>     <div>       <Section height={500}>         <Grid spacing={16} container>           <Grid xs={12} sm={6} item>             <div className={classes.labsHeader}>               <Header center>Labs</Header>             </div>           </Grid>           <Grid xs={12} sm={6} item>             <div>               <img src={photos.labs} alt="" className={classes.img} />             </div>           </Grid>         </Grid>       </Section>     </div>   </Body> )

यदि आपको अब xs={12} sm={6} से xs={12} sm={4} से ग्रिड पैरामीटर बदलने की आवश्यकता है, तो यह कार्य विशेष रूप से सुखद नहीं होगा। तथ्य यह है कि इसके लिए आपको चार स्थानों पर कोड को संपादित करना होगा।

घटक दृष्टिकोण की सुंदरता यह है कि यह आपको उपरोक्त के समान समस्याओं को हल करने की अनुमति देता है, केवल एक ही स्थान पर कोड बदल रहा है। हमारे मामले में, यह परिवर्तन हर जगह दिखाई देगा जहाँ ग्रिड का उपयोग किया जाता है:

 const SomeComponent = ({ classes, xs = 12, sm = 6, md, lg }) => {  const BodySection = ({ header, src }) => {    const gridSizes = { xs, sm, md, lg }    return (      <Section height={500}>        <Grid spacing={16} container>          <Grid {...gridSizes} item>            <div className={classes.groupsHeader}>              <Header center>{header}</Header>            </div>          </Grid>          <Grid {...gridSizes} item>            <div>              <img src={src} alt="" className={classes.img} />            </div>          </Grid>        </Grid>      </Section>    )  }  return (    <Body noBottom>      <Header center>Title</Header>      <Divider />      <Background grey>        <BodySection header="Groups" src={photos.groups} />      </Background>      <div>        <BodySection header="Labs" src={photos.labs} />      </div>    </Body>  ) }

यहां तक कि यहां प्रदर्शित न्यूनतम रूपांतरण कोड भी इस कोड को उसके पढ़ने और समर्थन के मामले में अधिक सुविधाजनक बनाता है। वह, उसी समय, उसे सौंपे गए कार्य को हल करने के लिए पूरी तरह से पर्याप्त तरीका है।

9. अपने घटकों को यथासंभव सरल रखने के लिए प्रयास करें।

बिक्री अनुप्रयोगों पर काम करते समय, मुझे कभी-कभी घटक सादगी के लिए प्रयास करने की आवश्यकता नहीं थी, लेकिन उन परिस्थितियों से बचने की आवश्यकता होती है जिनमें घटक बहुत जटिल हो जाते हैं।

यहां एक घटक का एक उदाहरण है जो अनावश्यक रूप से जटिल है। यह ConfirmAvailability.js द्वारा ConfirmAvailability.js :

 import React from 'react' import Grid from '@material-ui/core/Grid' import Typography from '@material-ui/core/Typography' import MenuItem from '@material-ui/core/MenuItem' import Select from '@material-ui/core/Select' import Time from 'util/time' /** *     .    ,     , ,  ,  * ,    .        .     -     . * * :     Date().getTimezoneOffset().     : *   1.      . *   2.     UTC -     ,   UTC   .  ,       *     UTC. */ export default class TimeZonePicker extends React.Component {  state = {    time: new Date(),    offset: -(new Date().getTimezoneOffset() / 60),  }  componentDidMount() {    this.props.setOffset(this.state.offset)  }  handleChange = (event) => {    const d = new Date()    d.setTime(      d.getTime() +        d.getTimezoneOffset() * 60 * 1000 +        event.target.value * 3600 * 1000,    )    this.setState({      time: d,      offset: event.target.value,    })    this.props.setOffset(event.target.value)  }  render() {    const timezones = []    for (let i = -12; i <= 14; i++) {      timezones.push(        <MenuItem key={i} value={i}>          {i > 0 ? '+' : null}          {i}        </MenuItem>,      )    }    return (      <React.Fragment>        <Grid container justify="space-between">          <div>            <Typography>Current time</Typography>            <Typography variant="h6" gutterBottom>              {Time.formatTime(this.state.time)}            </Typography>          </div>          <div>            <Typography>Set timezone</Typography>            <Select value={this.state.offset} onChange={this.handleChange}>              {timezones}            </Select>          </div>        </Grid>      </React.Fragment>    )  } }

इस घटक की कल्पना एक सरल तंत्र के रूप में की गई थी, लेकिन चूंकि इसमें अत्यधिक संबंधित तर्क शामिल हैं, इसलिए यह कई समस्याओं को हल करने के लिए जिम्मेदार है। जिस समय यह कोड लिखा गया था, रिएक्ट हुक अभी तक जारी नहीं किए गए थे, लेकिन रिएक्ट में उच्च-क्रम के घटक और रेंडर स्ट्रिप्स जैसी प्रौद्योगिकियां शामिल थीं। इसका मतलब यह है कि हम घटक को सरल बनाने के लिए इनमें से किसी एक पैटर्न का उपयोग कर सकते हैं। यह हमें मौजूदा कार्यक्षमता को बदलने के बिना घटकों को सरल बनाने के लिए एक दृष्टिकोण प्रदर्शित करने की अनुमति देगा।

पहले, सभी कोड एक ही फ़ाइल में संग्रहीत किए गए थे। अब हम इसे दो फाइलों में विभाजित करते हैं। यहाँ पहली फ़ाइल की सामग्री है - SelectTimeZone.js :

 import React from 'react' /** *     .    ,     , ,  ,  * ,    .        .     -     . * * :     Date().getTimezoneOffset().     : *   1.      . *   2.     UTC -     ,   UTC   .  ,       *     UTC. */ class SelectTimeZone extends React.Component {  state = {    time: new Date(),    offset: -(new Date().getTimezoneOffset() / 60),  }  componentDidMount() {    this.props.setOffset(this.state.offset)  }  handleChange = (event) => {    const d = new Date()    d.setTime(      d.getTime() +        d.getTimezoneOffset() * 60 * 1000 +        event.target.value * 3600 * 1000,    )    this.setState({      time: d,      offset: event.target.value,    })    this.props.setOffset(event.target.value)  }  getTimeZones = () => {    const timezones = []    for (let i = -12; i <= 14; i++) {      timezones.push(        <MenuItem key={i} value={i}>          {i > 0 ? '+' : null}          {i}        </MenuItem>,      )    }    return timezones  }  render() {    return this.props.render({      ...this.state,      getTimeZones: this.getTimeZones,    })  } }

यहाँ दूसरी फ़ाइल कैसी दिखती है - TimeZonePicker.js :

 import React from 'react' import Grid from '@material-ui/core/Grid' import Typography from '@material-ui/core/Typography' import MenuItem from '@material-ui/core/MenuItem' import Select from '@material-ui/core/Select' import Time from 'util/time' const TimeZonePicker = () => (  <SelectTimeZone    render={({ time, offset, getTimeZones, handleChange }) => (      <Grid container justify="space-between">        <div>          <Typography>Current time</Typography>          <Typography variant="h6" gutterBottom>            {Time.formatTime(time)}          </Typography>        </div>        <div>          <Typography>Set timezone</Typography>          <Select value={offset} onChange={handleChange}>            {getTimeZones()}          </Select>        </div>      </Grid>    )}  /> ) export default TimeZonePicker

प्रसंस्करण के बाद, परियोजना कोड पहले की तुलना में बहुत अधिक साफ हो गया। हमने घटक के प्रस्तुति भाग से तर्क को निकाला। अब, इसके अतिरिक्त, परियोजना की इकाई परीक्षण को बहुत सरल बनाया जाएगा।

10. उपयोग करते समय उपयोग करें

एक परियोजना में आपको जितने अधिक राज्य के टुकड़े करने होंगे, उतने ही जटिल उपयोग की useState ।

उदाहरण के लिए, यह इस तरह दिख सकता है:

 import React from 'react' import axios from 'axios' const useFrogs = () => {  const [fetching, setFetching] = React.useState(false)  const [fetched, setFetched] = React.useState(false)  const [fetchError, setFetchError] = React.useState(null)  const [timedOut, setTimedOut] = React.useState(false)  const [frogs, setFrogs] = React.useState(null)  const [params, setParams] = React.useState({ limit: 50 })  const timedOutRef = React.useRef()  function updateParams(newParams) {    if (newParams != undefined) {      setParams(newParams)    } else {      console.warn(        'You tried to update state.params but the parameters were null or undefined',      )    }  }  function formatFrogs(newFrogs) {    const formattedFrogs = newFrogs.reduce((acc, frog) => {      const { name, age, size, children } = frog      if (!(name in acc)) {        acc[name] = {          age,          size,          children: children.map((child) => ({            name: child.name,            age: child.age,            size: child.size,          })),        }      }      return acc    }, {})    return formattedFrogs  }  function addFrog(name, frog) {    const nextFrogs = {      ...frogs,      [name]: frog,    }    setFrogs(nextFrogs)  }  function removeFrog(name) {    const nextFrogs = { ...frogs }    if (name in nextFrogs) delete nextFrogs[name]    setFrogs(nextFrogs)  }  React.useEffect(() => {    if (frogs === null) {      if (timedOutRef.current) clearTimeout(timedOutRef.current)      setFetching(true)      timedOutRef.current = setTimeout(() => {        setTimedOut(true)      }, 20000)      axios        .get('https://somefrogsaspi.com/api/v1/frogs_list/', { params })        .then((response) => {          if (timedOutRef.current) clearTimeout(timedOutRef.current)          setFetching(false)          setFetched(true)          if (timedOut) setTimedOut(false)          if (fetchError) setFetchError(null)          setFrogs(formatFrogs(response.data))        })        .catch((error) => {          if (timedOutRef.current) clearTimeout(timedOutRef.current)          console.error(error)          setFetching(false)          if (timedOut) setTimedOut(false)          setFetchError(error)        })    }  }, [])  return {    fetching,    fetched,    fetchError,    timedOut,    frogs,    params,    addFrog,    removeFrog,  } } export default useFrogs

यदि आप इस कोड का उपयोग करने के लिए उपयोग करने वाले के साथ काम करना अधिक सुविधाजनक हो जाएगा यदि आप उपयोग करने के लिए इस कोड का उपयोग useReducer :

 import React from 'react' import axios from 'axios' const initialFetchState = {  fetching: false  fetched: false  fetchError: null  timedOut: false } const initialState = {  ...initialFetchState,  frogs: null  params: { limit: 50 } } const reducer = (state, action) => {  switch (action.type) {    case 'fetching':      return { ...state, ...initialFetchState, fetching: true }    case 'fetched':      return { ...state, ...initialFetchState, fetched: true, frogs: action.frogs }    case 'fetch-error':      return { ...state, ...initialFetchState, fetchError: action.error }    case 'set-timed-out':      return { ...state, ...initialFetchState, timedOut: true }    case 'set-frogs':      return { ...state, ...initialFetchState, fetched: true, frogs: action.frogs }    case 'add-frog':      return { ...state, frogs: { ...state.frogs, [action.name]: action.frog }}    case 'remove-frog': {      const nextFrogs = { ...state.frogs }      if (action.name in nextFrogs) delete nextFrogs[action.name]      return { ...state, frogs: nextFrogs }    }    case 'set-params':      return { ...state, params: { ...state.params, ...action.params } }      default:        return state  } } const useFrogs = () => {  const [state, dispatch] = React.useReducer(reducer, initialState)  const timedOutRef = React.useRef()  function updateParams(params) {    if (newParams != undefined) {      dispatch({ type: 'set-params', params })    } else {      console.warn(        'You tried to update state.params but the parameters were null or undefined',      )    }  }  function formatFrogs(newFrogs) {    const formattedFrogs = newFrogs.reduce((acc, frog) => {      const { name, age, size, children } = frog      if (!(name in acc)) {        acc[name] = {          age,          size,          children: children.map((child) => ({            name: child.name,            age: child.age,            size: child.size,          })),        }      }      return acc    }, {})    return formattedFrogs  }  function addFrog(name, frog) {    dispatch({ type: 'add-frog', name, frog })  }  function removeFrog(name) {    dispatch({ type: 'remove-frog', name })  }  React.useEffect(() => {    if (frogs === null) {      if (timedOutRef.current) clearTimeout(timedOutRef.current)      timedOutRef.current = setTimeout(() => {        setTimedOut(true)      }, 20000)      axios        .get('https://somefrogsaspi.com/api/v1/frogs_list/', { params })        .then((response) => {          if (timedOutRef.current) clearTimeout(timedOutRef.current)          const frogs = formatFrogs(response.data)          dispatch({ type: 'set-frogs', frogs })        })        .catch((error) => {          if (timedOutRef.current) clearTimeout(timedOutRef.current)          console.error(error)          dispatch({ type: 'fetch-error', error })        })    }  }, [])  return {    fetching,    fetched,    fetchError,    timedOut,    frogs,    params,    addFrog,    removeFrog,  } } export default useFrogs

हालांकि यह दृष्टिकोण useState का उपयोग करने की तुलना में शायद क्लीनर नहीं है, जैसा कि आप कोड को देखकर देख सकते हैं, नया कोड बनाए रखना आसान है। यह इस तथ्य के कारण है कि जब useReducer का उपयोग किया useReducer प्रोग्रामर को हुक के विभिन्न हिस्सों में राज्य के अपडेट के बारे में चिंता करने की आवश्यकता नहीं होती है, क्योंकि ये सभी ऑपरेशन useReducer अंदर एक स्थान पर परिभाषित होते हैं।

कोड का उपयोग करने वाले कोड के संस्करण में, तर्क लिखने के अलावा, हमें हुक के अंदर कार्यों को घोषित करने की आवश्यकता है ताकि यह पता लगाया जा सके कि राज्य का अगला हिस्सा क्या होना चाहिए। और उपयोग करने वाले का उपयोग करते useReducer , आपको ऐसा नहीं करना होगा। इसके बजाय, सब कुछ reducer फ़ंक्शन में आता है। हमें बस उपयुक्त प्रकार की कार्रवाई को ट्रिगर करने की आवश्यकता है, और वास्तव में, हमें चिंता करने की ज़रूरत है।

11. विवादास्पद स्थितियों में फ़ंक्शन घोषणाओं का उपयोग करें

इस अनुशंसा का उपयोग करने का एक अच्छा उदाहरण है एक useEffect सफाई useEffect :

 React.useEffect(() => {  setMounted(true)  return () => {    setMounted(false)  } }, [])

एक अनुभवी रिएक्टर डेवलपर जानता है कि लौटे फ़ंक्शन की भूमिका क्या है, वह आसानी से इस कोड को समझ जाएगा। लेकिन अगर आप कल्पना करते हैं कि कोई व्यक्ति जो उपयोग के बारे में बहुत परिचित नहीं है, तो इस कोड को पढ़ेगा, कोड में अपने इरादों को यथासंभव स्पष्ट रूप से व्यक्त करना बेहतर होगा। यह फ़ंक्शन घोषणाओं का उपयोग करने के बारे में है जिन्हें सार्थक नाम दिया जा सकता है। उदाहरण के लिए, इस कोड को इस तरह से फिर से लिखा जा सकता है:

 React.useEffect(() => {  setMounted(true)  return function cleanup() {    setMounted(false)  } }, [])

यह दृष्टिकोण हमें स्पष्ट रूप से वर्णन करने की अनुमति देता है कि लौटाया गया फ़ंक्शन क्या भूमिका निभाता है।

12. Prettier का प्रयोग करें

Prettier व्यक्तिगत डेवलपर्स और टीमों को कोड स्वरूपण के लिए एक सुसंगत और सुसंगत दृष्टिकोण बनाए रखने में मदद करता है। यह उपकरण समय और प्रयास को बचाने में मदद करता है। यह कार्यक्रमों की शैली पर चर्चा करने के कारणों की संख्या को कम करके कोड समीक्षा को सरल बनाता है। प्रिटियर स्वच्छ प्रोग्राम लेखन तकनीकों का उपयोग करने के लिए प्रोग्रामरों को भी प्रोत्साहित करता है। इस उपकरण द्वारा लागू किए गए नियम संपादन योग्य हैं। नतीजतन, यह पता चला है कि हर कोई इसे अनुकूलित कर सकता है जैसा कि वे फिट देखते हैं।

13. टुकड़ा घोषणाओं के लिए आशुलिपि का उपयोग करने के लिए कठोर

इस सिफारिश का सार निम्नलिखित दो उदाहरणों में व्यक्त किया जा सकता है।

यहाँ खंड घोषणा का छोटा संस्करण है:

 const App = () => (  <>    <FrogsTable />    <FrogsGallery />  </> )

यहाँ पूर्ण संस्करण है:

 const App = () => (  <React.Fragment>    <FrogsTable />    <FrogsGallery />  </React.Fragment> )

14. कोड लिखते समय तत्वों की नियुक्ति के एक निश्चित क्रम का पालन करें।

जब मैं कोड लिखता हूं, तो मैं एक निश्चित क्रम में कुछ कमांड की व्यवस्था करना पसंद करता हूं। उदाहरण के लिए, मैं फ़ाइलें आयात करते समय ऐसा करता हूं (यहां अपवाद केवल आयात react ):

 import React from 'react' import { useSelector } from 'react-redux' import styled from 'styled-components' import FrogsGallery from './FrogsGallery' import FrogsTable from './FrogsTable' import Stations from './Stations' import * as errorHelpers from '../utils/errorHelpers' import * as utils from '../utils/'

इस कोड को देखते हुए, कोई सोच सकता है कि यहां एक विशेष आदेश नहीं देखा गया है। आखिरकार, आयातित इकाइयां भी वर्णानुक्रम में क्रमबद्ध नहीं हैं। लेकिन वर्णमाला के क्रम में कुछ व्यवस्थित करना केवल आदेश देने वाली योजना का एक हिस्सा है जिसका मैं उपयोग करता हूं।

मैं, मेरी परियोजनाओं के कोड की शुद्धता के लिए प्रयास कर रहा हूं, निम्नलिखित नियमों का उपयोग करें जो वे अनुसरण किए गए क्रम में लागू होते हैं:

आयात प्रतिक्रिया।
पुस्तकालयों को आयात करें (वर्णमाला क्रम में)।
किसी परियोजना से संस्थाओं को आयात करने की पूर्ण आज्ञा (वर्णमाला के क्रम में)।
सापेक्ष आयात आदेश (वर्णमाला क्रम में)।
प्रपत्र import * as ।
प्रपत्र import './<some file>.<some ext>' आदेश import './<some file>.<some ext>' ।

और यहां बताया गया है कि मैं कैसे व्यवस्थित करना पसंद करता हूं, उदाहरण के लिए, चर। कहें - वस्तुओं के गुण:

 const character = (function() {  return {    cry() {      //    },    eat() {      //    },    hop() {      //    },    jump() {      //    },    punch() {      //    },    run() {      //    },    scratch() {      //    },    scream() {      //    },    sleep() {      //    },    walk() {      //    },    yawn() {      //    },  } })()

यदि आप कोड लिखते समय संस्थाओं को आदेश देने के लिए कुछ नियमों का पालन करते हैं - तो इसका शुद्धता पर लाभकारी प्रभाव पड़ेगा।

परिणाम

हमने आपको स्वच्छ प्रतिक्रिया एप्लिकेशन कोड लिखने की युक्तियां प्रदान की हैं। हम आशा करते हैं कि आप उनके बीच कुछ ऐसा पाएंगे जो आपके लिए उपयोगी है।

प्रिय पाठकों! इस आलेख में प्रस्तुत सुझावों में आप क्या सिफारिशें जोड़ेंगे?

स्वच्छ प्रतिक्रिया कोड लिखने के लिए 14 सुझाव। भाग २