۸ روش برای بهبود اپلیکیشن ری اکت — راهنمای کاربردی

1import React from 'react'
2import axios from 'axios'
3
4export const useApp = ({ urls }) => {
5  const [results, setResults] = React.useState(null)
6
7  const promises = urls.map(axios.get)
8
9  React.useEffect(() => {
10    Promise.all(promises).then(setResults)
11  }, [])
12
13  return { results }
14}
15
16const App = () => {
17  const urls = [
18    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=a',
19    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=u',
20    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=y',
21    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=z',
22  ]
23
24  useApp({ urls })
25
26  return null
27}
28
29export default App

1const useApp = ({ urls }) => {
2  const [results, setResults] = React.useState(null)
3
4  const promises = urls.map((url) => axios.get(url))
5
6  React.useEffect(() => {
7    Promise.all(promises).then(setResults)
8  }, [])
9
10  return { results }
11}
12
13const App = () => {
14  const urls = React.useMemo(() => {
15    return [
16      'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=a',
17      'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=u',
18      'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=y',
19    ]
20  }, [])
21
22  const { results } = useApp({ urls })
23
24  return null
25}

1const promises = React.useMemo(() => {
2  return urls.map((url) => axios.get(url))
3}, [urls])

1import React from 'react'
2
3const UserContext = React.createContext({
4  user: {
5    firstName: 'Kelly',
6    email: 'frogLover123@gmail.com',
7  },
8  activated: true,
9})
10
11const VisibilityControl = ({ children, opened, close }) => {
12  const ctx = React.useContext(UserContext)
13  return React.cloneElement(children, {
14    opened: ctx.activated ? opened : false,
15    onClick: close,
16  })
17}
18
19export const useModal = ({ urls } = {}) => {
20  const [opened, setOpened] = React.useState(false)
21  const open = () => setOpened(true)
22  const close = () => setOpened(false)
23
24  return {
25    opened,
26    open,
27    close,
28  }
29}
30
31const App = ({ children }) => {
32  const modal = useModal()
33
34  return (
35    <div>
36      <button type="button" onClick={modal.opened ? modal.close : modal.open}>
37        {modal.opened ? 'Close' : 'Open'} the Modal
38      </button>
39      <VisibilityControl {...modal}>{children}</VisibilityControl>
40    </div>
41  )
42}
43
44const Window = ({ opened }) => {
45  if (!opened) return null
46  return (
47    <div style={{ border: '1px solid teal', padding: 12 }}>
48      <h2>I am a window</h2>
49    </div>
50  )
51}
52
53export default () => (
54  <App>
55    <Window />
56  </App>
57)

1const authReducer = (state, action) => {
2  switch (action.type) {
3    case 'set-authenticated':
4      return { ...state, authenticated: action.authenticated }
5    default:
6      return state
7  }
8}
9
10export default authReducer

1const ownersReducer = (state, action) => {
2  switch (action.type) {
3    case 'add-owner':
4      return {
5        ...state,
6        profiles: [...state.profiles, action.owner],
7      }
8    case 'add-owner-id':
9      return { ...state, ids: [...state.ids, action.id] }
10    default:
11      return state
12  }
13}
14
15export default ownersReducer

1const frogsReducer = (state, action) => {
2  switch (action.type) {
3    case 'add-frog':
4      return {
5        ...state,
6        profiles: [...state.profiles, action.frog],
7      }
8    case 'add-frog-id':
9      return { ...state, ids: [...state.ids, action.id] }
10    default:
11      return state
12  }
13}
14
15export default frogsReducer

1import React from 'react'
2import authReducer from './authReducer'
3import ownersReducer from './ownersReducer'
4import frogsReducer from './frogsReducer'
5
6const initialState = {
7  auth: {
8    authenticated: false,
9  },
10  owners: {
11    profiles: [],
12    ids: [],
13  },
14  frogs: {
15    profiles: [],
16    ids: [],
17  },
18}
19
20function rootReducer(state, action) {
21  return {
22    auth: authReducer(state.auth, action),
23    owners: ownersReducer(state.owners, action),
24    frogs: frogsReducer(state.frogs, action),
25  }
26}
27
28const useApp = () => {
29  const [state, dispatch] = React.useReducer(rootReducer, initialState)
30
31  const addFrog = (frog) => {
32    dispatch({ type: 'add-frog', frog })
33    dispatch({ type: 'add-frog-id', id: frog.id })
34  }
35
36  const addOwner = (owner) => {
37    dispatch({ type: 'add-owner', owner })
38    dispatch({ type: 'add-owner-id', id: owner.id })
39  }
40
41  React.useEffect(() => {
42    console.log(state)
43  }, [state])
44
45  return {
46    ...state,
47    addFrog,
48    addOwner,
49  }
50}
51
52const App = () => {
53  const { addFrog, addOwner } = useApp()
54
55  const onAddFrog = () => {
56    addFrog({
57      name: 'giant_frog123',
58      id: 'jakn39eaz01',
59    })
60  }
61
62  const onAddOwner = () => {
63    addOwner({
64      name: 'bob_the_frog_lover',
65      id: 'oaopskd2103z',
66    })
67  }
68
69  return (
70    <>
71      <div>
72        <button type="button" onClick={onAddFrog}>
73          add frog
74        </button>
75        <button type="button" onClick={onAddOwner}>
76          add owner
77        </button>
78      </div>
79    </>
80  )
81}
82export default () => <App />

1function rootReducer(state, action) {
2  return {
3    auth: authReducer(state.auth, action),
4    owners: ownersReducer(state.owners, action),
5    frogs: frogsReducer(state.frogs, action),
6  }
7}

1import React from 'react'
2
3function useWhyDidYouUpdate(name, props) {
4  // Get a mutable ref object where we can store props ...
5  // ... for comparison next time this hook runs.
6  const previousProps = useRef()
7
8  useEffect(() => {
9    if (previousProps.current) {
10      // Get all keys from previous and current props
11      const allKeys = Object.keys({ ...previousProps.current, ...props })
12      // Use this object to keep track of changed props
13      const changesObj = {}
14      // Iterate through keys
15      allKeys.forEach((key) => {
16        // If previous is different from current
17        if (previousProps.current[key] !== props[key]) {
18          // Add to changesObj
19          changesObj[key] = {
20            from: previousProps.current[key],
21            to: props[key],
22          }
23        }
24      })
25
26      // If changesObj not empty then output to console
27      if (Object.keys(changesObj).length) {
28        console.log('[why-did-you-update]', name, changesObj)
29      }
30    }
31
32    // Finally update previousProps with current props for next hook call
33    previousProps.current = props
34  })
35}
36
37export default useWhyDidYouUpdate

1const MyComponent = (props) => {
2  useWhyDidYouUpdate('MyComponent', props)
3
4  return <Dashboard {...props} />
5}

1import React from 'react'
2import { GoCheck, GoAlert } from 'react-icons/go'
3import { FaInfoCircle } from 'react-icons/fa'
4import { MdPriorityHigh } from 'react-icons/md'
5import { toast } from 'react-toastify'
6
7/*
8  Calling these toasts most likely happens in the UI 100% of the time.
9  So it is safe to render components/elements as toasts.
10*/
11
12// Keeping all the toast ids used throughout the app here so we can easily manage/update over time
13// This used to show only one toast at a time so the user doesn't get spammed with toast popups
14export const toastIds = {
15  // APP
16  internetOnline: 'internet-online',
17  internetOffline: 'internet-offline',
18  retryInternet: 'internet-retry',
19}
20
21// Note: this toast && is a conditional escape hatch for unit testing to avoid an error.
22const getDefaultOptions = (options) => ({
23  position: toast && toast.POSITION.BOTTOM_RIGHT,
24  ...options,
25})
26
27const Toast = ({ children, success, error, info, warning }) => {
28  let componentChildren
29  // Sometimes we are having an "object is not valid as a react child" error and children magically becomes an API error response, so we must use this fallback string
30  if (!React.isValidElement(children) && typeof children !== 'string') {
31    componentChildren = 'An error occurred'
32  } else {
33    componentChildren = children
34  }
35  let Icon = GoAlert
36  if (success) Icon = GoCheck
37  if (error) Icon = GoAlert
38  if (info) Icon = FaInfoCircle
39  if (warning) Icon = MdPriorityHigh
40  return (
41    <div style={{ paddingLeft: 10, display: 'flex', alignItems: 'center' }}>
42      <div style={{ width: 30, height: 30 }}>
43        <Icon style={{ color: '#fff', width: 30, height: 30 }} />
44      </div>
45      <div style={{ padding: 8, display: 'flex', alignItems: 'center' }}>
46          
47        <span style={{ color: '#fff' }}>{componentChildren}</span>
48      </div>
49    </div>
50  )
51}
52
53export const success = (msg, opts) => {
54  return toast.success(<Toast success>{msg}</Toast>, {
55    className: 'toast-success',
56    ...getDefaultOptions(),
57    ...opts,
58  })
59}
60
61export const error = (msg, opts) => {
62  return toast.error(<Toast error>{msg}</Toast>, {
63    className: 'toast-error',
64    ...getDefaultOptions(),
65    ...opts,
66  })
67}
68
69export const info = (msg, opts) => {
70  return toast.info(<Toast info>{msg}</Toast>, {
71    className: 'toast-info',
72    ...getDefaultOptions(),
73    ...opts,
74  })
75}
76
77export const warn = (msg, opts) => {
78  return toast.warn(<Toast warning>{msg}</Toast>, {
79    className: 'toast-warn',
80    ...getDefaultOptions(),
81    ...opts,
82  })
83}
84
85export const neutral = (msg, opts) => {
86  return toast(<Toast warning>{msg}</Toast>, {
87    className: 'toast-default',
88    ...getDefaultOptions(),
89    ...opts,
90  })
91}

1import { toast } from 'react-toastify'
2import {
3  info as toastInfo,
4  success as toastSuccess,
5  toastIds,
6} from 'util/toast'
7import App from './App'
8
9const Root = () => {
10  const onOnline = () => {
11    if (toast.isActive(toastIds.internetOffline)) {
12      toast.dismiss(toastIds.internetOffline)
13    }
14    
15    if (toast.isActive(toastIds.retryInternet)) {
16      toast.dismiss(toastIds.retryInternet)
17    }
18    if (!toast.isActive(toastIds.internetOnline)) {
19      toastSuccess('You are now reconnected to the internet.', {
20        position: 'bottom-center',
21        toastId: toastIds.internetOnline,
22      })
23    }
24  }
25
26  const onOffline = () => {
27    if (!toast.isActive(toastIds.internetOffline)) {
28      toastInfo('You are disconnected from the internet right now.', {
29        position: 'bottom-center',
30        autoClose: false,
31        toastId: toastIds.internetOffline,
32      })
33    }
34  }
35  
36  useInternet({ onOnline, onOffline })
37  
38  return <App />
39}

1import React, { isValidElement } from 'react'
2import isString from 'lodash/isString'
3import isFunction from 'lodash/isFunction'
4import { GoCheck, GoAlert } from 'react-icons/go'
5import { FaInfoCircle } from 'react-icons/fa'
6import { MdPriorityHigh } from 'react-icons/md'
7import { toast } from 'react-toastify'
8
9/*
10  Calling these toasts most likely happens in the UI 100% of the time.
11  So it is safe to render components/elements as toasts.
12*/
13
14// Keeping all the toast ids used throughout the app here so we can easily manage/update over time
15// This used to show only one toast at a time so the user doesn't get spammed with toast popups
16export const toastIds = {
17  // APP
18  internetOnline: 'internet-online',
19  internetOffline: 'internet-offline',
20  retryInternet: 'internet-retry',
21}
22
23// Note: this toast && is a conditional escape hatch for unit testing to avoid an error.
24const getDefaultOptions = (options) => ({
25  position: toast && toast.POSITION.BOTTOM_RIGHT,
26  ...options,
27})
28
29const Toast = ({ children, success, error, info, warning }) => {
30  let componentChildren
31  // Sometimes we are having an "object is not valid as a react child" error and children magically becomes an API error response, so we must use this fallback string
32  if (!isValidElement(children) && !isString(children)) {
33    componentChildren = 'An error occurred'
34  } else {
35    componentChildren = children
36  }
37  let Icon = GoAlert
38  if (success) Icon = GoCheck
39  if (error) Icon = GoAlert
40  if (info) Icon = FaInfoCircle
41  if (warning) Icon = MdPriorityHigh
42  return (
43    <div style={{ paddingLeft: 10, display: 'flex', alignItems: 'center' }}>
44      <div style={{ width: 30, height: 30 }}>
45        <Icon style={{ color: '#fff', width: 30, height: 30 }} />
46      </div>
47      <div style={{ padding: 8, display: 'flex', alignItems: 'center' }}>
48          
49        <span style={{ color: '#fff' }}>{componentChildren}</span>
50      </div>
51    </div>
52  )
53}
54
55const toaster = (function() {
56  // Attempt to remove a duplicate toast if it is on the screen
57  const ensurePreviousToastIsRemoved = (toastId) => {
58    if (toastId) {
59      if (toast.isActive(toastId)) {
60        toast.dismiss(toastId)
61      }
62    }
63  }
64  // Try to get the toast id if provided from options
65  const attemptGetToastId = (msg, opts) => {
66    let toastId
67    if (opts && isString(opts.toastId)) {
68      toastId = opts.toastId
69    } else if (isString(msg)) {
70      // We'll just make the string the id by default if its a string
71      toastId = msg
72    }
73    return toastId
74  }
75  const handleToast = (type) => (msg, opts) => {
76    const toastFn = toast[type]
77    if (isFunction(toastFn)) {
78      const toastProps = {}
79      let className = ''
80      const additionalOptions = {}
81      const toastId = attemptGetToastId(msg, opts)
82      if (toastId) additionalOptions.toastId = toastId
83      // Makes sure that the previous toast is removed by using the id, if its still on the screen
84      ensurePreviousToastIsRemoved(toastId)
85      // Apply the type of toast and its props
86      switch (type) {
87        case 'success':
88          toastProps.success = true
89          className = 'toast-success'
90          break
91        case 'error':
92          toastProps.error = true
93          className = 'toast-error'
94          break
95        case 'info':
96          toastProps.info = true
97          className = 'toast-info'
98          break
99        case 'warn':
100          toastProps.warning = true
101          className - 'toast-warn'
102          break
103        case 'neutral':
104          toastProps.warning = true
105          className - 'toast-default'
106          break
107        default:
108          className = 'toast-default'
109          break
110      }
111      toastFn(<Toast {...toastProps}>{msg}</Toast>, {
112        className,
113        ...getDefaultOptions(),
114        ...opts,
115        ...additionalOptions,
116      })
117    }
118  }
119  return {
120    success: handleToast('success'),
121    error: handleToast('error'),
122    info: handleToast('info'),
123    warn: handleToast('warn'),
124    neutral: handleToast('neutral'),
125  }
126})()
127
128export const success = toaster.success
129export const error = toaster.error
130export const info = toaster.info
131export const warn = toaster.warn
132export const neutral = toaster.neutral