为什么每次更改状态时都会卸载和安装组件

Question

Home.JS

class Home extends Component{

state = {
    serverPosts:null,
    offlinePosts:[],
    isLoading:false,
    isError:false,
    error:null
}

componentDidMount(){
    console.log("home did mount")
    this.setState({isLoading:true})
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((response)=>{
            this.setState({
                serverPosts:response.data,
                isLoading:false
            })
        }).catch((err)=>{
            this.setState({
                isError:true,
                error:err
            })
        })
}

addOfflinePost = (post) => {
    const offlineList = [...this.state.offlinePosts,{post}]
    this.setState({offlinePosts:offlineList})
}


render(){
    console.log("Home component render")
    let serverPostList = (this.state.serverPosts)?
        this.state.serverPosts.map((item,index)=>{ return <Post postData = {item} key={index}/>}):
            (this.state.isError)?<p>No Internet Connection</p>:<p>No Post available</p>

    let offlinePostList = (this.state.offlinePosts)?
this.state.offlinePosts.map((item, index)=>{ return <Post postData = {item} key={`id-${index}`}/>}):<button className="btn btn-primary mx-auto" onClick={this.mainContentHandler}>Add Post</button>;
   

    return(
            <div className={classes.Home}>
                <div className="row py-2">
                    <div className="col-lg-4">  
                        <div className={"row "+ classes.OfflineList}>
                        </div>
                        <div className={"row "+ classes.ServerList}>
                            {serverPostList}
                        </div>
                    </div>
                    <div className="col-lg-8">
                            <PostForm click = {this.addOfflinePost}/>
                    </div>
                </div>
            </div>
    )
}
}

export default Home;

AddForm.JS

class PostForm extends Component{

state = {
    title:null,
    content:null
}

titleChangeHandler = (event) => {
    this.setState({title:event.target.value})
}

contentChangeHandler = (event) => {
    this.setState({content:event.target.value})
}


render(){
    return (
    <div className="card card-primary">
        <div className="card-header">
            POST
        </div>
        <div className="card-body">
            <form>
                <div className="form-group">
                    <div className="form-group">
                        <input className="form-control" type="text" placeholder="Title" onChange={this.titleChangeHandler}/>
                    </div>
                    <div className="form-group">
                        <input className="form-control" type="text" placeholder="Content" onChange={this.contentChangeHandler}/>
                    </div>
                    <div className="form-group">
                        <button className="btn btn-primary btn-block" onClick={()=>this.props.click(this.state)}>Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
)}
}

export default PostForm;

Q1。加载组件时，渲染功能将运行多次。当我提交表单时，componentDidMount每次都会运行。请向我解释该流程在该组件中的工作方式。

第二季度。另外，如果您能帮助我在React中结合使用引导程序和手动样式的最佳做法