React中的props和state

最新推荐文章于 2024-07-31 16:51:58 发布

波帝伯爵

最新推荐文章于 2024-07-31 16:51:58 发布

阅读量1.0k

点赞数 1

分类专栏：前端学习笔记文章标签： React state props

本文链接：https://blog.csdn.net/HYB2012/article/details/78650082

版权

前端学习笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

props意为属性，只可父组件改变子组件的props，而子组件不能自更新，props是子组件暴露给外部的公有接口

state意为状态，所谓的状态就是一种标记，设计用来控制某种逻辑，类似于后台语言中的flag，全局的私有变量，外部不能访问，state的改变会被render()函数自动捕捉到，当然state改变后是否执行render，还取决于bool shouldComponentUpdate(nextProps, nextState) 返回false则不会重新渲染。

改变state的方法，setState({
……
})
不能直接给state重新赋值

那么问题来了，外部只能控制props，怎么让子组件捕捉到props发生改变了呢？
void componentWillReceiveProps(nextProps)
nextProps即为新值，外部想传入的值！如此，子组件就获取了外界传来的参数。

父组件 ClockApp

import React, { Component } from 'react'
import Clock from "./Clock"

export default class ClockApp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isRun: true,
            isShow: true
        }
    }

    onValueChange(event){
        if(event.target.name==="run") this.setState({
            isRun:!this.state.isRun
        })
        else if(event.target.name==="show") this.setState({
            isShow:!this.state.isShow
        })
    }
    render() {
        return (
            <div>

                <input type="checkbox" onChange={this.onValueChange.bind(this)} name="run"/><span>{this.state.isRun?"开启":"停止"}</span><br/>
                <input type="checkbox" onChange={this.onValueChange.bind(this)} name="show"/><span>{this.state.isShow?"显示":"隐藏"}</span><br/>
                <Clock isShow={this.state.isShow}  isRun={this.state.isRun}/>
            </div>

        );
    }


}

子组件Clock

import React, { Component } from "react"

export default class Clock extends Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        };
    }

    componentWillMount () {
        this.timer = setInterval(() => {
          this.setState({ date: new Date() })
        }, 1000)
      }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.isRun){
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.setState({ date: new Date() })
            }, 1000)
        }
        else
            clearInterval(this.timer);
    }


    render() {       
        var rStyle = {
            display:this.props.isShow?"block":"none"
        };
        return (
            <div style={rStyle}>
                <h2>现在时间</h2>
                <span >{this.state.date.toLocaleTimeString()}</span>
            </div>
        );
    }

}