React属性和状态详解

一、属性的含义和用法

props = properties

3种用法：

(1)<HelloWorld key=?/> (key="Tim",key={123},key={"Tim"},key={[1,2,3]},key={variable})

(2)var props = {

one:"123",

two:321}

<HelloWorld{...props}/>

(3)调用.setProps({name:"Tim"}); 几乎不使用这个方法

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <Meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var style={
        color:"red",border:"1px solid #000"  };

    var HelloWorld = React.createClass({
        render:function () {
            console.log("render,4");
            return <p>Hello,{this.props.name1 + ' ' + this.props.name2}</p>;
        }
    });

    var HelloUniverse = React.createClass({
        getinitialState:function () {
            return {
                name1:"Tim",name2:"John"  };
        },handleChange:function (event) {
            this.setState({name:event.target.value})
        },render:function () {
            return (
                <div>
                    <HelloWorld {...this.state}></HelloWorld>
                    <br/>
                    <input type="text" onChange={this.handleChange}/>
                </div>
            )
        }
    });
    React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body);
</script>
</body>
</html>

var instance = React.render(<HelloWorld></HelloWorld>,document.body);

instance.setProps({name:'Tim'});

二、状态的含义和用法

state:是可以变化的，由事物自行处理。

getinitialState:初始化每个实例特有的状态

setState:更新组件状态

setState——diff算法——（变化）更新DOM

this.props.name}</p>;
        }
    });

    var HelloUniverse = React.createClass({
        getinitialState:function () {
            return {
                name:"Tim"  };
        },document.body);
</script>
</body>
</html>

三、属性和状态对比

(1)相似点：

都是纯js对象

都会触发render更新

都有确定性

(2)对比：

	props	state
能否从父组件获取初始值？	true	false
能否由父组件修改？	true	false
能否在组件内部设置默认值？	true	true
能否在组件内部修改？	false	true
能否设置子组件的初始值	true	false
能否修改子组件的值	true	false

state只和组件本身相关。

props不能修改自己的属性。

(3)区分：

组件在运行时需要修改的数据就是状态。

四、属性和状态实例（编写一个简单的文章评论框）

代码如下：

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <Meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var Content = React.createClass({
        getinitialState:function () {
          return {
              inputText:" "  }
        },handleChange:function () {
            this.setState({inputText:event.target.value})
        },handleSubmit:function () {
            console.log("reply to :" + this.props.selectName + "\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({
        getinitialState:function () {
          return{
              names:["Tim","Johm","Hank"],selectName: ' '  };
        },handleSelect:function () {
            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/>,document.body  );

</script>
</body>
</html>

原文地址：https://www.jb51.cc/react/305978.html

React属性和状态详解

相关推荐