Detailed explanation of how to split components in React

Students who have studied React philosophy should know that when we think about how to split components, we should fully analyze the interactive characteristics, structural characteristics, and data characteristics of the current page/component to judge how the current page should be split with the purpose of simplifying the code.

In the previous article, we implemented the addition, deletion, modification and search of the task list without thinking about splitting. But the result is that the code is relatively complex and not concise. Therefore, based on the splitting basis mentioned above, we can split the page into the following three steps

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

If you are still confused about the result of this split, it is recommended to review our React philosophy based on live replay.

OK, the next step is to analyze how to implement it.

The header part is just a simple structure and style, without additional functions, and is relatively simple, so we don’t need to consider this part too much.

The List component is a list. Obviously, it requires an array to be passed from outside as a data source. In addition, it also has delete and modify operations inside it. The data source is passed from outside, so we need to provide two methods to allow external responses to delete and modify operations within the internal response.

Therefore, the props type declaration of the List component is as follows

import {Job} from './index'

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

After clarifying List props, its encapsulation code will be easy to write

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

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

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

  return (
    &lt;div className="container"&gt;
      &lt;div className="task-header"&gt;
        &lt;div className="title"&gt;Ongoing tasks&lt;/div&gt;
        &lt;div className="right"&gt;...&lt;/div&gt;
      &lt;/div&gt;

      {((job, i) =&gt; (
        &lt;div className="job-wrapper" key={}&gt;
          &lt;div className="selected" onClick={() =&gt; troggleSelected(i)}&gt;
            { &amp;&amp; &lt;div className="circle"&gt;&lt;/div&gt;}
          &lt;/div&gt;
          &lt;div className="desc"&gt;{}&lt;/div&gt;
          &lt;div className="remove" onClick={() =&gt; onRemove(i)}&gt;delete&lt;/div&gt;
        &lt;/div&gt;
      ))}
    &lt;/div&gt;
  )
}

The thinking of the Addition component is a little more complicated.

The interactive behavior of editing pop-ups is the internal behavior of Addition, so controlling it to display hidden data can also be internal data. To the outside, you only need to provide a hook function when adding it, and pass the internal data to the parent level.

Such a statement is inevitably a bit boring, and it is more appropriate to understand it in combination with the code.

The code is as follows:

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

interface AdditionProps {
  onAdd: (job: Job) =&gt; any
}

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

  useEffect(() =&gt; {
    if (show) {
      ?.focus()
    }
  }, [show])

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

  return (
    &lt;&gt;
      {show ? (
        &lt;div className="dialog"&gt;
          &lt;input
            onChange={event =&gt; setDesc()}
            ref={inputRef}
            placeholder="Please enter a task description"
            onBlur={() =&gt; {setTimeout(() =&gt; { setShow(false) }, 0)}}
          /&gt;
          &lt;div className="create" onClick={add}&gt;create&lt;/div&gt;
        &lt;/div&gt;
      ) : &lt;div className="add" onClick={() =&gt; setShow(true)}&gt;New&lt;/div&gt;}
    &lt;/&gt;
  )
}

In this way, our main logic becomes very simple, and only one need to be maintained on the datajobsJust do it.

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

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

function App() {
  const [jobs, setJobs] = useState&lt;Array&lt;Job&gt;&gt;([])

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

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

  return (
    &lt;div className="App"&gt;
      &lt;header className="App-header"&gt;
        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
        &lt;h1&gt;React Knowing the Realm&lt;/h1&gt;
      &lt;/header&gt;
      &lt;List list={jobs} onRemove={remove} onEditor={editor} /&gt;
      &lt;Addition onAdd={(job) =&gt; setJobs([...jobs, job])} /&gt;
    &lt;/div&gt;
  );
}

export default App;

Component splitting is a process of simplifying code. In this process, we eliminate all the interference factors in the main logic, making the main code very concise and greatly improving maintainability.

Component splitting is a soft skill that requires us to constantly accumulate and think. It is the core part that determines the quality of your code.

This is the end of this article about how to split components in React. For more related content on splitting components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!