React学习笔记(4)---react属性与状态
发布时间:2020-12-15 04:49:29 所属栏目:百科 来源:网络整理
导读:1. 属性的含义和用法 用this.props引用属性 用法: 1》.键值对式: Hello name=? / ?可以是{。。。}或字符串“ ”,数组{[...]},或变量{val} 2》. 展开对象式: var props = { one:"123", two:333 } Hello{...props} / 3》. 调用setProps式 ; 很少用到 var
1. 属性的含义和用法 用this.props引用属性 用法: 1》.键值对式: <Hello name=? /> ?可以是{。。。}或字符串“ ”,数组{[...]},或变量{val} 2》. 展开对象式: var props = { one:"123", two:333 } <Hello{...props} /> 3》. 调用setProps式 ; 很少用到 var i =React.render(<Hello></Hello>,document.body); i.setProps({name:"123"})
实例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <script type="text/jsx"> var style = { color : "red",border: "1px #000 solid" }; var HelloWorld = React.createClass({ render: function () { //在展开式形式下载return中添加 Hello,{this.props.name1 + this.props.name2} //在键值形式下载return中添加: Hello,{this.props.name1 ? this.props.name:"World"} return <p ref="childp"> Hello,{this.props.name1 + this.props.name2} </p> },}); var HelloUnivers = React.createClass({ getInitialState: function(){ //用展开式方式 return { name1:'Tim',name2:'123' }; },handleChange:function(event){ this.setState({name: event.target.value}); },render:function(){ //<!--1. 用键值对方式赋值,name属性名,{状态的内容}--> //在return中写入<!--<HelloWorld name={this.state.name}></HelloWorld>--> return <div> <HelloWorld {...this.state}></HelloWorld> <br/> <input type="text" onChange={this.handleChange}/> </div> },}) React.render(<div style={style}> <HelloUnivers></HelloUnivers> </div>,document.body); </script> </body> </html>
2 . 状态的含义和用法 state : 事物所处的状况,由事物处理,不断变化 状态的用法:
setState触发的行为:
setState ----》 diff算法-----》变化?更新DOM
在上一个代码中的一段 监听属性是否改变,改变,则在render中更新DOM
handleChange:function(event){ this.setState({name: event.target.value}); },
4. 属性和状态对比:
相似点:
不同点:
....................................................属性...........状态
从父组件中获取初始值..................y..................n
由父组件修改................................y..................n
在组件内部设置默认值..................y..................y
在组件内修改................................n..................y
设置子组件的初始值.....................y..................n
修改子组件的值............................y...................n
状态只和自己相关,属性不能从自己修改
区分方法:
组件在运行时需要修改的数据就是状态。
实例
1》项目分析
文章评论框:
step1 : 分析构成项目的组件,
评论框 (父): 评论对象(属性)
包含内容(子) :(状态)
step2: 分析组将的关系及数据传递
step3: 编写代码:
2》编写第一版代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <script type="text/jsx"> //内容组件(子组件) var Content = React.createClass({ //将评论对象传递给子组件 getInitialState: function () { return { inputText:'',}; },//监听内容的变化并且记录在状态中 handleChange: function(event){ this.setState({inputText: event.target.value}); },//添加提交按钮并打印结果 handleSubmit: function () { console.log("reply To" + this.props.selectName + "n" + "n" + this.state.inputText); },render: function () { return <div> <textarea onChange={this.handleChange} placeholder="please enter something...."> </textarea> <button onClick={this.handleSubmit}>submit</button> </div>; },}); //评论框组件(父组件) var Comment = React.createClass({ //动态提取option getInitialState: function () { return { names: ["Tim","John","Hank"],selectName: '',// 将监听到的修改内容传递给Content handleSelect: function (event) { this.setState({selectName: event.target.value}); },//用下拉列表展示回复对象 render: function () { var options = []; for (var option in this.state.names) { options.push(<option value={this.state.names[option]}> {this.state.names[option]} </option>) } ; return <div> <select onChange={this.handleSelect}> {options} </select> <Content selectName={this.state.selectName}></Content> </div>; },}) React.render(<Comment></Comment>,document.body); </script> </body> </html>
3》修复bug
视屏来源: www.jikexueyuan.com
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |