老师我这里有一个困惑。

老师我这里有一个困惑，我们花了这么多精力来改写子文件。这样有么子用呢？感觉吃力不讨好。想也不能把子文件用在其他地方。子文件实现了点击效果但是是依据父文件的函数来的。所以这个子文件感觉多写了这么多代码，还不能和父文件分开使用两个文件连在一块。  模块就比较好，我制定了一个模块后到其他地方直接引用就可以了。多写一个子文件的意义在哪呢？

第二个问题：我每次写完都是写在一个文件中，然后再进行优化的。达不到跳跃的思维。就是按照视频中老师这样的讲解来改写的。所以能跟的上。请问在实际开发中是和老师这样讲解的步骤一步一步（先整体实现然后分解拆分）优化的来，还是跳跃的一次性搞定？

下面的代码我自己实现了您不用看。特别是在子文件中实现花了比较长的时间，所以引发了这个思考。到底哪些地方需要进一步用子文件？感觉自己都看不准哪些地方该用子文件哪些地方不该用。再说用了和不用有么子区别是更方便检查还是更方便引用？ （要是更方便引用，感觉不太可能吧）

TodoList.js文件（父文件）

import React, {Component, Fragment } from "react";

import { Todoitem3 } from "./Todoitem3";

class TodoList3 extends Component{

    constructor(props){

        super(props);

        this.state={

            inputValue:'o',

            list:['a','b'],

        }

        this.handleChange=this.handleChange.bind(this)

        this.handleKeyUp=this.handleKeyUp.bind(this)

        this.handleClick=this.handleClick.bind(this)

    }

    handleChange(e){

       console.log(e.target.value)

       const inputValue=e.target.value

      this.setState({inputValue})

    };

    handleKeyUp(e){

        console.log(e.keyCode)

        if(e.keyCode===13&&this.state.inputValue!==''){

            const list=[...this.state.list,this.state.inputValue]

            this.setState({list,inputValue:''})

        }

    };

    handleClick(index){

        const list=[...this.state.list]

        list.splice(index,1)

        this.setState({list})

    }

    handleItem(){

        return  this.state.list.map((value,index)=>{

            return (

                // <li key={index}

                // onClick={this.handleClick.bind(this,index)}

                // >

                //     {value}

                // </li>

                <Todoitem3 

                    key={index}

                    index={index}

                    content={value}

                    handle={this.handleClick}

                />

             )

         })

    }

    render(){

        return(

            <Fragment>

                <input

               value= {this.state.inputValue}

               onChange={this.handleChange}

               onKeyUp={this.handleKeyUp}

                 />

                <ul>                  

                    {this.handleItem()}  

                </ul>

            </Fragment>

        )

    }

}

export {TodoList3};

 部分功能子文件

 import React, {Component  } from "react";

 class Todoitem3 extends Component{  

    constructor(){

        super();

        this.handleClick=this.handleClick.bind(this)

    }

    handleClick(){

        const {handle,index}=this.props

        handle(index)

    }

     render(){

         return (

             <li 

             onClick={this.handleClick}

             >{this.props.content} </li>

         )

     }

 }

 export{Todoitem3};

​在这里输入代码，可通过选择【代码语言】突出显示