08、react之状态

来源：互联网发布：大麦网源码编辑：程序博客网时间：2024/06/06 07:48

一、状态的含义与用法
state
状态：事物所处的状况
状态是由事物自行处理，不断变化的。父组件与子组件都无法改变他的状态

二、状态的用法
getInitialState：初始化状态

setState：跟新状态

基本用法：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>state</title>    <script src="js/react.min.js"></script>    <script src="js/react-dom.min.js"></script>    <script src="js/browser.js"></script></head><body>    <div id="app"></div>    <script type="text/babel">        /*            state 状态的意思，一般在页面中存在状态的变化以及涉及到与状态相关的东西的时候会用他            作用：根据不同的状态显示不同的UI界面        */        var Demo = React.createClass({            // 设置初始的状态            getInitialState: function(){                return {                    // 这里的值可以是一个boolean，string，function                    onOff: true                }            },            handleClick:function(){                // 通过点击事件来修改状态值，原来的状态值需要使用this.state获取                this.setState({                    onOff: !this.state.onOff                })            },            render: function(){                // 每一个更新状态的时候，这个render函数都会重新被调用                return (<div onClick={this.handleClick}>{this.state.onOff?'data1':'data2'}</div>)            }        })        ReactDOM.render(<Demo />,document.getElementById("app"))    </script></body></html>

案例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>state案例</title>    <script src="js/react.min.js"></script>    <script src="js/react-dom.min.js"></script>    <script src="js/browser.js"></script></head><body>    <div id="app"></div>    <script type="text/babel">        /*            state 状态的意思，一般在页面中存在状态的变化以及涉及到与状态相关的东西的时候会用他            作用：根据不同的状态显示不同的UI界面        */        var Demo = React.createClass({            // 设置默认的属性,防止在一开始父组件也没有传递该属性的值而报错，没有传递该属性的时候就用属性的默认值            getDefaultProps: function(){                return {                    name: '现在的时间是：'                }            },            // 设置初始的状态            getInitialState: function(){                return {                    time: new Date().toLocaleTimeString()                }            },            changTime:function(){                // 在定时器中使用this.setState的时候需要将这个this变保存起来                var that = this;                setInterval(function(){                    that.setState({                        time:new Date().toLocaleTimeString()                    })                },1000)            },            render: function(){                // 每一个更新状态的时候，这个render函数都会重新被调用                return (<div onClick={this.changTime()}>{this.props.name}{this.state.time}</div>)            }        })        ReactDOM.render(<Demo name='北京时间'/>,document.getElementById("app"))    </script></body></html>

阅读全文

0 0

08、react之 状态

08、react之状态