快捷導(dǎo)航

詳解React中如何拆分組件

更新時間：2023年12月27日 10:49:40 作者：這波能反殺

這篇文章主要為大家詳細介紹了React中拆分組件的相關(guān)知識,文中的示例代碼講解詳細,對我們掌握React有一定的幫助,需要的小伙伴可以參考一下

學(xué)習(xí)過 React 哲學(xué)的同學(xué)應(yīng)該知道，我們在思考如何拆分組件時，要以簡化代碼為目的，充分分析當(dāng)前頁面/組件的交互特性、結(jié)構(gòu)特性、數(shù)據(jù)特性，來判斷當(dāng)前的頁面應(yīng)該如何拆分。

上一篇文章中，我們在不思考拆分的情況下，實現(xiàn)了任務(wù)列表的增刪改查。但是結(jié)果是代碼比較復(fù)雜，并不簡潔。因此結(jié)合上面講到的拆分依據(jù)，我們可以將該頁面拆分為如下三個步驟

<header />
<List />
<Addition />

如果對于這個拆分結(jié)果感覺還比較懵的話，建議結(jié)合直播回放回顧一下我們的 React 哲學(xué)。

OK，接下來就是分析如何實現(xiàn)。

header 部分因為只是簡單的結(jié)構(gòu)與樣式，沒有額外的功能，比較簡單，因此我們不用過多的考慮該部分。

List 組件為一個列表。很顯然，它需要一個數(shù)組從外部傳入作為數(shù)據(jù)源。除此之外，它的內(nèi)部還具有刪除與修改操作。而數(shù)據(jù)源又是從外部傳入，因此我們需要對外提供兩個方法來讓外部響應(yīng)內(nèi)部的刪除與修改操作

所以，List 組件的 props 類型聲明如下

import {Job} from './index'

interface ListProps {
  list: Job[],
  onRemove: (i: number) => any,
  onEditor: (i: number, value: Job) => any
}

明確了 List 的 props，它的封裝代碼就很好寫了

import {Job} from './index'
interface ListProps {
  list: Job[],
  onRemove: (i: number) => any,
  onEditor: (i: number, value: Job) => any
}

export default function List(props: ListProps) {
  const {list, onRemove, onEditor} = props

  function troggleSelected(i: number) {
    const job = list[i]
    onEditor(i, { 
      ...job, isSelected: !job.isSelected
    })
  }

  return (
    <div className="container">
      <div className="task-header">
        <div className="title">進行中的任務(wù)</div>
        <div className="right">...</div>
      </div>

      {list.map((job, i) => (
        <div className="job-wrapper" key={job.id}>
          <div className="selected" onClick={() => troggleSelected(i)}>
            {job.isSelected && <div className="circle"></div>}
          </div>
          <div className="desc">{job.desc}</div>
          <div className="remove" onClick={() => onRemove(i)}>刪除</div>
        </div>
      ))}
    </div>
  )
}

Addition 組件的思考稍微復(fù)雜一點。

編輯彈窗的交互行為屬于 Addition 的內(nèi)部行為，因此控制它顯示隱藏的數(shù)據(jù)也可以為內(nèi)部數(shù)據(jù)。對外只需要提供一個添加時的鉤子函數(shù)，把內(nèi)部數(shù)據(jù)傳到父級去即可。

這樣的表述難免有點枯燥，結(jié)合代碼來理解比較合適。

代碼如下：

import { useEffect, useRef, useState } from 'react';
import { randomId } from '../../utils';
import {Job} from './index'

interface AdditionProps {
  onAdd: (job: Job) => any
}

export default function Addition(props: AdditionProps) {
  const [desc, setDesc] = useState('')
  const [show, setShow] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)
  const {onAdd} = props

  useEffect(() => {
    if (show) {
      inputRef.current?.focus()
    }
  }, [show])

  function add() {
    onAdd({
      id: randomId(),
      desc,
      isSelected: false,
      createTime: Date.now()
    })
  }

  return (
    <>
      {show ? (
        <div className="dialog">
          <input
            onChange={event => setDesc(event.target.value)}
            ref={inputRef}
            placeholder="請輸入任務(wù)描述"
            onBlur={() => {setTimeout(() => { setShow(false) }, 0)}}
          />
          <div className="create" onClick={add}>創(chuàng)建</div>
        </div>
      ) : <div className="add" onClick={() => setShow(true)}>新增</div>}
    </>
  )
}

這樣，我們的主邏輯就變得非常簡單，數(shù)據(jù)上只需要維護一個 jobs 即可。

import { useState } from 'react';
import logo from './logo.svg';
import Addition from './Addition'
import List from './List'
import './index.css';

export interface Job {
  desc: string,
  id: string,
  createTime: number,
  isSelected: boolean
}

function App() {
  const [jobs, setJobs] = useState<Array<Job>>([])

  function remove(i: number) {
    jobs.splice(i, 1)
    setJobs([...jobs])
  }

  function editor(i: number, job: Job) {
    jobs[i] = job
    setJobs([...jobs])
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>React 知命境</h1>
      </header>
      <List list={jobs} onRemove={remove} onEditor={editor} />
      <Addition onAdd={(job) => setJobs([...jobs, job])} />
    </div>
  );
}

export default App;

組件的拆分是一個簡化代碼的過程，在這個過程中，我們剔除了主邏輯中的所有干擾因素，讓主代碼變得非常簡潔，極大提高了可維護性。

組件拆分是一個需要我們不斷積累與思考的軟技能。它是決定你代碼質(zhì)量高低的核心部分。

到此這篇關(guān)于詳解React中如何拆分組件的文章就介紹到這了,更多相關(guān)React拆分組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: