React学习笔记（4）---react属性与状态

来源：互联网发布：淘宝模型编辑：程序博客网时间：2024/06/06 02:45

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 : 事物所处的状况，由事物处理，不断变化

状态的用法：

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

setState触发的行为：

setState ----》 diff算法-----》变化？更新DOM

在上一个代码中的一段监听属性是否改变，改变，则在render中更新DOM

handleChange:function(event){                this.setState({name: event.target.value});            },

4. 属性和状态对比：

相似点：

都是纯JS对象，
都会触发render的更新行为
都具有确定性

不同点：

....................................................属性 ...........状态

从父组件中获取初始值..................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

0 0