React学习笔记(4)---react属性与状态

前端之家收集整理的这篇文章主要介绍了React学习笔记(4)---react属性与状态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的React相关文章