react(八)父组件渲染，子组件不渲染

父组件渲染，子组件跟着渲染，不论参数是否变化，这是个坑
解决思路：
步骤一：将html内容添加到状态变量

constructor(){
        super()
        this.state = {
            left:0,
            centerlabel:false,
            downlabel:false,
            scrolllabel:false,
            isShow:false,
            centertext:<Center></Center>,
            downtext:<Down></Down>
        }
    }

步骤二：在render中将html替换成状态变量

<div ref="main" className={styles.main} style={{left:this.state.left.toString()+"px",overflow:'hidden'}}>
            {this.state.centertext}
            {this.state.downtext}
        </div>

步骤三：触发子组件渲染时，设置状态变量

 handleScroll = ()=>{
    let scrolltop = document.documentElement.scrollTop
    // 中间组件响应样式
    scrolltop>500?localStorage.setItem('scrolllabel','1'):""
    if(scrolltop<400 && localStorage.getItem('scrolllabel')=='1'){
        localStorage.setItem('scrolllabel','0')
        this.setState({
            centerlabel:!this.state.centerlabel,
            centertext:<Center centerlabel={this.state.centerlabel}></Center>
        })
    }
    // 底部组件响应样式
    scrolltop>900?localStorage.setItem('scrolldownlabel','1'):""
    if(scrolltop<800 && localStorage.getItem('scrolldownlabel')=='1'){
        localStorage.setItem('scrolldownlabel','0')
        this.setState({
            downlabel:!this.state.downlabel,
            downtext:<Down downlabel={this.state.downlabel}></Down>
        })
    }
    if(scrolltop>100 && !this.state.isShow){
        this.setState({
            isShow:true
        })
    }else if(scrolltop<100 && this.state.isShow){
        this.setState({
            isShow:false
        })
    }
}

初次渲染时将子组件的状态标识赋值，状态标识的目的就是修改子组件参数，子组件参数修改后会重新渲染

//监听窗口变化及滚动条变化
     componentDidMount() {
        this.resizeLeft()
        this.setState({
            contertext:<Center centerlabel={this.state.centerlabel}></Center>,
            downtext:<Down downlabel={this.state.centerlabel}></Down>
        })
        window.addEventListener('resize', this.resizeLeft);
        window.addEventListener('scroll', this.handleScroll);
    }