هشت ترفند مفید برای توسعه اپلیکیشن های React — راهنمای کاربردی

1import React from 'react'
2
3const MyComponent = 'div'
4
5function App() {
6  return (
7    <div>
8      <h1>Hello</h1>
9      <hr />
10      <MyComponent>
11        <h3>I am inside a {'<div />'} element</h3>
12      </MyComponent>
13    </div>
14  )
15}

1function MyComponent({ component: Component = 'div', name, age, email }) {
2  
3  return (
4    <Component>
5      <h1>Hi {name}</h1>
6      <div>
7        <h6>You are {age} years old</h6>
8        <small>Your email is {email}</small>
9      </div>
10    </Component>
11  )
12}

1function App() {
2  return (
3    <div>
4      <MyComponent component="div" name="George" age={16} email="george@gmail.com">
5    </div>
6  )
7}

1function Dashboard({ children }) {
2  return (
3    <div style={{ padding: '25px 12px' }}>
4      {children}
5    </div>
6  )
7}
8
9function App() {
10  return (
11    <div>
12      <MyComponent component={Dashboard} name="George" age={16} email="george@gmail.com">
13    </div>
14  )
15}

1function getFromLocalStorage(key, value) {
2  try {
3    const data = window.localStorage.get(key)
4    return JSON.parse(data)
5  } catch (error) {
6    console.error
7  }
8}

1class ErrorBoundary extends React.Component {
2  constructor(props) {
3    super(props)
4    this.state = { hasError: false }
5  }
6  
7  static getDerivedStateFromError(error) {
8    // Update state so the next render will show the fallback UI.
9    return { hasError: true }
10  }
11  
12  componentDidCatch(error, errorInfo) {
13    // You can also log the error to an error reporting service
14    logErrorToMyService(error, errorInfo)
15  }
16  
17  render() {
18    if (this.state.hasError) {
19      // You can render any custom fallback UI
20      return <h1>Something went wrong.</h1>
21    }
22    return this.props.children
23  }
24}

1<ErrorBoundary>
2  <MyWidget />
3</ErrorBoundary>

1function MyComponent() {
2  const [names, setNames] = React.useState(['bob'])
3  const prevNamesRef = React.useRef([])
4  
5  React.useEffect(() => {
6    prevNamesRef.current = names
7  })
8  
9  const prevNames = prevNamesRef.current
10  
11  return (
12    <div>
13      <h4>Current names:</h4>
14      <ul>
15        {names.map((name) => (
16          <li key={name}>{name}</li>
17        ))}
18      </ul>
19      <h4>Previous names:</h4>
20      <ul>
21        {prevNames.map((prevName) => (
22          <li key={prevName}>{prevName}</li>
23        ))}
24      </ul>
25    </div>
26  )
27}

1function MyComponent() {
2  const [names, setNames] = React.useState(['bob'])
3  const prevNamesRef = React.useRef([])
4  
5  React.useEffect(() => {
6    prevNamesRef.current = names
7  })
8  
9  const prevNames = prevNamesRef.current
10  
11  return (
12    <div>
13      <h4>Current names:</h4>
14      <ul>
15        {names.map((name) => (
16          <li key={name}>{name}</li>
17        ))}
18      </ul>
19      <h4>Previous names:</h4>
20      <ul>
21        {prevNames.map((prevName) => (
22          <li key={prevName}>{prevName}</li>
23        ))}
24      </ul>
25    </div>
26  )
27}

1import React from 'react'
2import axios from 'axios'
3
4function MyComponent() {
5  const [frogs, setFrogs] = React.useState([])
6  const [error, setError] = React.useState(null)
7  const mounted = React.useRef(false)
8  
9  async function fetchFrogs(params) {
10    try {
11      const response = await axios.get('https://some-frogs-api.com/v1/', {
12        params,
13      })
14      if (mounted.current) {
15        setFrogs(response.data.items)
16      }
17    } catch (error) {
18      if (mounted.current) {
19        setError(error)
20      }
21    }
22  }
23  
24  React.useEffect(() => {
25    mounted.current = true
26    return function cleanup() {
27      mounted.current = false
28    }
29  }, [])
30  
31  return (
32    <div>
33      <h4>Frogs:</h4>
34      <ul>
35        {this.state.frogs.map((frog) => (
36          <li key={frog.name}>{frog.name}</li>
37        ))}
38      </ul>
39    </div>
40  )
41}

1function setRef(ref, value) {
2  // Using function callback version
3  if (typeof ref === 'function') {
4    ref(value)
5    // Using the React.useRef() version
6  } else if (ref) {
7    ref.current = value
8  }
9}
10
11function useForkRef(refA, refB) {
12  return React.useMemo(() => {
13    if (refA == null && refB == null) {
14      return null
15    }
16    return (refValue) => {
17      setRef(refA, refValue)
18      setRef(refB, refValue)
19    }
20  }, [refA, refB])
21}

1function MyComponent() {
2  const [position, setPosition] = React.useState({ x: 0, y: 0 })
3  const nodeRef = React.useRef()
4  
5  React.useEffect(() => {
6    const pos = nodeRef.current.getBoundingClientRect()
7    setPosition({
8      x: pos.x,
9      y: pos.y,
10    })
11  }, [])
12  
13  return (
14    <div ref={nodeRef}>
15      <h2>Hello</h2>
16    </div>
17  )
18}

1const SomeComponent = function({ nodeRef }) {
2  const ownRef = React.useRef()
3  
4  function setRef(e) {
5    if (e && nodeRef.current) {
6      const codeElementBounds = nodeRef.current.getBoundingClientRect()
7      // Log the <pre> element's position + size
8      console.log(`Code element's bounds: ${JSON.stringify(codeElementBounds)}`)
9      ownRef.current = e
10    }
11  }
12  
13  return (
14    <div
15      ref={setRef}
16      style={{ width: '100%', height: 100, background: 'green' }}
17    />
18  )
19}
20
21function App() {
22  const [items, setItems] = React.useState([])
23  const nodeRef = React.useRef()
24  
25  const addItems = React.useCallback(() => {
26    const itemNum = items.length
27    setItems((prevItems) => [
28      ...prevItems,
29      {
30        [`item${itemNum}`]: `I am item # ${itemNum}'`,
31      },
32    ])
33  }, [items, setItems])
34  
35  return (
36    <div style={{ border: '1px solid teal', width: 500, margin: 'auto' }}>
37      <button type="button" onClick={addItems}>
38        Add Item
39      </button>
40      <SomeComponent nodeRef={nodeRef} />
41      <div ref={nodeRef}>
42        <pre>
43          <code>{JSON.stringify(items, null, 2)}</code>
44        </pre>
45      </div>
46    </div>
47  )
48}

1import React from 'react'
2
3// Higher order component
4const withBorder = (Component, customStyle) => {
5  class WithBorder extends React.Component {
6    render() {
7      const style = {
8        border: this.props.customStyle ? this.props.customStyle.border : '3px solid teal'
9      }
10      return <Component style={style} {...this.props} />
11    }
12  }
13  
14  return WithBorder
15}
16
17function MyComponent({ style, ...rest }) {
18  return (
19    <div style={style} {...rest}>
20        <h2>
21          This is my component and I am expecting some styles.
22        </h2>
23    </div>
24  )
25}
26
27export default withBorder(MyComponent, {
28  border: '4px solid teal'
29})

1function MyComponent() {
2  return <p>My component</p>
3}
4
5function App() {
6  const [fetching, setFetching] = React.useState(false)
7  const [fetched, setFetched] = React.useState(false)
8  const [fetchError, setFetchError] = React.useState(null)
9  const [frogs, setFrogs] = React.useState([])
10  
11  React.useEffect(() => {
12    setFetching(true)
13    
14    api.fetchFrogs({ limit: 1000 })
15      .then((result) => {
16        setFrogs(result.data.items)
17        setFetched(true)
18        setFetching(false)
19      })
20      .catch((error) => {
21        setError(error)
22        setFetching(false)
23      })
24      
25  }, [])
26  
27  return <MyComponent fetching={fetching} fetched={fetched} fetchError={fetchError} frogs={frogs} />
28}

1function MyComponent({ render }) {
2  const [fetching, setFetching] = React.useState(false)
3  const [fetched, setFetched] = React.useState(false)
4  const [fetchError, setFetchError] = React.useState(null)
5  const [frogs, setFrogs] = React.useState([])
6  
7  React.useEffect(() => {
8    setFetching(true)
9    
10    api.fetchFrogs({ limit: 1000 })
11      .then((result) => {
12        setFrogs(result.data.items)
13        setFetched(true)
14        setFetching(false)
15      })
16      .catch((error) => {
17        setError(error)
18        setFetching(false)
19      })
20  }, [])
21  
22  return render({
23    fetching,
24    fetched,
25    fetchError,
26    frogs,
27  })
28}

1function App() {
2  return (
3    <MyComponent
4      render={({
5        fetching,
6        fetched,
7        fetchError,
8        frogs
9      }) => (
10        <div>
11          {fetching ? 'Fetching frogs...' : fetched ? 'The frogs have been fetched!' : fetchError ? `An error occurred while fetching the list of frogs: ${fetchError.message}` : null}
12          <hr />
13          <ul style={{
14            padding: 12,
15          }}>
16            {frogs.map((frog) => (
17              <li key={frog.name}>
18                <div>
19                Frog's name: {frog.name}
20                </div>
21                <div>
22                  Frog's age: {frog.age}
23                </div>
24                <div>
25                  Frog's gender: {frog.gender}
26                </div>
27              </li>
28            ))}
29          </ul>
30        </div>
31      )}
32    />
33  )
34}