React属性和状态详解

最新推荐文章于 2024-04-09 13:09:32 发布

u013063153

最新推荐文章于 2024-04-09 13:09:32 发布

阅读量4k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/u013063153/article/details/52494588

版权

React 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、属性的含义和用法

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

<!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.name}</p>;
        }
    });

    var HelloUniverse = React.createClass({
        getInitialState:function () {
            return {
                name:"Tim"
            };
        },
        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>

三、属性和状态对比

(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>

u013063153

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React属性和状态详解

一、属性的含义和用法props = properties3种用法：(1) (key="Tim",key={123},key={"Tim"},key={[1,2,3]},key={variable})(2)var props = {one:"123",two:321}(3)调用.setProps({name:"Tim"}); 几乎不使用这个方法html>h
复制链接

扫一扫