React 属性和状态

来源：互联网发布：人工智能教育风口编辑：程序博客网时间：2024/06/05 22:38

属性的含义

props=properties
属性：一个事物的性质与关系
属性往往是与生俱来的，无法自己改变

属性的用法

键值对
展开
使用react提供的setProps函数

状态的含义

state
状态：事物所处的情况
状态是由事物处理，不断变化的

状态的用法

getInitialState:初始化每个实例特有的状态
setState:更新组件的状态

属性和状态的相似点

都是纯js对象
都会触发render
都具有确定性

属性和状态的对比

这里写图片描述
状态只和组件自己相关，由自己来维护，组件不能修改属性。
区分方法：组件在运行的时候，需要修改的数据就是状态。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>属性的键值对用法</title>        <script src="js/react.js"></script>        <script src="js/react-dom.js"></script>        <script src="js/browser.min.js"></script>    </head>    <body>        <div id="example"></div>        <script type="text/babel">            var HelloWorld=React.createClass({                render:function(){                    return <p>Hello,{this.props.name?this.props.name:"World"}</p>;                }            });            var HelloUniverse=React.createClass({                getInitialState:function(){                    return {name:"Mike"};                },                handleChange:function(event){                    this.setState({name:event.target.value});                },                render:function(){                    return (                        <div>                            <HelloWorld name={this.state.name}></HelloWorld>                            {/*<HelloWorld></HelloWorld>*/}                            <input type="text"  onChange={this.handleChange}/>                        </div>                    );                }            });            ReactDOM.render(<HelloUniverse></HelloUniverse>,document.getElementById("example"));        </script>    </body></html>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>属性的展开用法</title>        <script src="js/react.js"></script>        <script src="js/react-dom.js"></script>        <script src="js/browser.min.js"></script>    </head>    <body>        <div id="example"></div>        <script type="text/babel">            var HelloWorld=React.createClass({                render:function(){                    return <p>Hello,{this.props.name+" "+this.props.age}</p>;                }            });            var HelloUniverse=React.createClass({                getInitialState:function(){                    return {name:"Mike",age:"12"};                },                handleChange:function(event){                        this.setState({name:event.target.value});                },                render:function(){                    return (                        <div>                            {/*<HelloWorld {...this.state} name="Linda"></HelloWorld>*/}                            <HelloWorld {...this.state}></HelloWorld>                            <input  type="text" onChange={this.handleChange} />                        </div>                    );                }            });            ReactDOM.render(<HelloUniverse></HelloUniverse>,document.getElementById("example"));        </script>    </body></html>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>属性的调用setProps函数的用法</title>        <script src="js/react.js"></script>        <script src="js/react-dom.js"></script>        <script src="js/browser.min.js"></script>    </head>    <body>        <div id="example"></div>        <script type="text/babel">            var HelloWorld=React.createClass({                render:function(){                    return <p>Hello,{this.props.name}</p>;                }            });            var instance=ReactDOM.render(<HelloWorld name="World"></HelloWorld>,document.getElementById("example"));//          var instance=ReactDOM.render(<HelloWorld></HelloWorld>,document.getElementById("example"));//          instance.setProps({name:"Willim"});        </script>    </body></html>

阅读全文

0 0