第六节:React组件:状态提升与条件渲染

1. 状态提升

1.1 状态提升说明

1. 目前为止,已经了解了每个组件都有自己的状态state,通过setState修改状态触发渲染
2. 也了解了父组件可以通过props将数据传递给子组件
3. props属性不仅可以传递普通的数据,还是传递函数, 这样就可以在子组件中执行父组件中的函数
4. 并且在父组件函数中修改父组件自己的数据
5. 那么非父子组件如何传递参数呢,这个时候就需要用到状态提升
6. 将兄弟组件都需要用到的状态存放在共同的父组件中,这就是状态提升

2.状态提升图

2.1 组件维护组件自己的状态

说明:

1. 每个组件都有自己的状态

2. 组件难以去修改别的组件的状态,

3. 图中如果想点击button按钮改变主题颜色,也就是Title和Button两个组件颜色都改变

4. 如果Title和Button组件都维护自己组件的状态state就不太好传递数据

组件图:

状态提升.png

2. 2. 将状态提升到共同的父组件中

1. 状态提升就是将状态提升到共同的父组件中
2. 父组件在通过props下发state状态数据给每一个子组件使用
3. 父组件通过props下发一个父组件APP的方法给Button子组件
4. 这样Button子组件就可以通过父组件传递过来的方法修改父组件的状态
5. 父组件状态一变,就会触发重新渲染, 每一个子组件都将获取最新的数据进行渲染

状态提升2.png

2.3. 示例代码

组件状态提升与方法下发的示例代码:

// 创建组件
// title组件
class Title extends React.Component{
    constructor(){
        super()
    }


    render(){

        let {color} = this.props
        return (
            
这是一个标题
        )
    }
}

// Button 组件
class Button extends React.Component{
    constructor(props){
        super(props)
    }

    render(){
        let {color,handleClick} = this.props

        return (
            

                 {
                        handleClick("blue")
                    }}
                    >
                    蓝色主题
                
                 {
                        handleClick("green")
                    }}
                    >
                    绿色主题
                
            
        )
    }
}


// APP 组件
class App extends React.Component{
    constructor(){
        super()
        this.state = {
            themeColor: 'blue'
        }
    }

    handleClick(color){
        console.log(this)
        this.setState({
            themeColor: color
        })
    }


    render(){
        let {themeColor} = this.state

        return (