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

最新推荐文章于 2024-05-09 16:49:45 发布

thystar

最新推荐文章于 2024-05-09 16:49:45 发布

阅读量1.8k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/48030561

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记（4）---react属性与状态

1. 属性的含义和用法用this.props引用属性用法：1》. 键值对式：？可以是{。。。}或字符串“ ”，数组{[...]}, 或变量{val}2》. 展开对象式： var props = { one:"123", two:333}3》. 调用setProps式 ; 很少用到var i =React.render(, d
复制链接

扫一扫