日记(react modal)

场景

页面上控制的modal显示与隐藏，我纠结过两种方式，也问过旁边的小哥，给了我一串听得莫名其妙的回答......

• 前提: 有一个详情的modal

    import React, { Component } from 'react';
    import {Modal} from 'antd';
    export default Detail extends Component{
        render(){
            return 
            <Modal 
                title="测试modal" 
                visible={this.props.visible} // 第二种方法才有此行代码
            />
        }
    }

• 第一种

    import React, { Component } from 'react';
    import {Button} from 'antd';
    import Detail from './components/detail';
    export default Index extends Component{
        state = {
            modalVisible: false
        }
        handleModal = () => {
            this.setSate{modalVisible: true}
        }
        render(){
            return (<div>
                <Button onClick={this.handleModal} />
                {this.state.modalVisible && <Detail />} // 第一种
            </div>)
        }
    }

• 第二种

    import React, { Component } from 'react';  
    import {Button} from 'antd';  
    import Detail from './components/detail';  
    export default Index extends Component{
        state = {  
            modalVisible: false
        }  
        handleModal = () => {
            this.setSate{modalVisible: true}
        }
        render(){
            return (<div>
                <Button onClick={this.handleModal} />
                <Detail visible={this.state.modalVisible} />
            </div>)
        }
    }

瞎聊

把控制显示隐藏的state放到父组件还是放到reducer中需要具体业务分析。 我开始纠结的是子组件里面到底用那种方法来控制显得比较合理一点，或者两者的区别在哪里。当时问了旁边的小哥，给我的回复是什么根据modal个数之类很神的回复.....
我认为, 第一种是将整个子组件Detail重新加载。第二种方法只是将Detail中的一个state改变了而已。所以，具体用哪种方法，如果我需要用到声明周期函数，我会根据__生命周期__来具体分析使用哪种方法。但是问题来了，如果不涉及声明周期函数，那么是第一种还是第二种，我想这个得根据html css的渲染原理来看，一般情况下modal也不会设计太大的文件样式太复杂的交互，且我现在写的大部分modal都有初始的stat默认值，所以我可能会选择第一种。不过，还是得看应用场景......（手动@大佬谢谢啦）