React中的props和state

最新推荐文章于 2025-06-09 20:42:35 发布

原创最新推荐文章于 2025-06-09 20:42:35 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React #state #props

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

32 篇文章

订阅专栏

本文介绍了React中Props和State的概念及其使用方法，通过一个简单的时钟应用案例演示了如何利用Props传递数据以及如何通过State控制组件的状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
        );
    }

}