React 属性和状态详解

16-04-12 来源：[db:作者]

收藏我要投稿

属性的含义和用法

props=properties
属性:一个事物的性质与关系
属性往往是与生俱来的、无法自己改变的.
属性的用法：
第一种方法：键值对

1、传入一个字符串:”Hi”(字符串)/{“Hi”};
2、传入一个数组{[arry]};
3、传入一个变量{variable}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
</head>
<body>
    <div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function () {
            return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
        }
    });
    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {name: ""};
        },
        handleChange: function (event) {
            this.setState({name: event.target.value});
        },
        render: function () {
            return(
               <div>
                    <HelloWorld name = {this.state.name}></HelloWorld>
                    <input type = "text" onChange = {this.handleChange}/>
               </div>
            )
        }
    });
    ReactDOM.render(<HelloUniverse></HelloUniverse>, document.querySelector("#example"));
</script>

运行结果如下，使用的是键值对的方式
这里写图片描述

第二种方法：可以理解为展开
var props = {one:”hello”, two:”message”}
React提供展开语法…,使用…加对象,react就会把对象中的属性和值，当成是属性的赋值：

<body>
    <div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function () {
            return <p>Hello, {this.props.name + " " + this.props.age}</p>;
        }
    });
    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {name: "Yvette", age: "25"};
        },
        handleChange: function (event) {
            this.setState({name: event.target.value});
        },
        render: function () {
            return(
                <div>
                    <HelloWorld {...this.state}></HelloWorld>
                    <input type = "text" onChange = {this.handleChange}/>
                </div>
            )
        }
    });
    ReactDOM.render(<HelloUniverse></HelloUniverse>, document.querySelector("#example"));
</script>

运行结果如下，使用{…this.state}展开
这里写图片描述

第三种方法：调用react提供的setProps函数
setProps接收的参数是一个对象，但是react不推荐改变组件的属性,可以通过父组件向子组件传入的方式。

<script src="build/react.js"></script><script src="build/react-dom.js"></script><script src="build/browser.min.js"></script><script type="text/babel">
    var HelloWorld = React.createClass({
        render: function(){
            return Hello, {this.props.name}
        }
    });
    var instance = ReactDOM.render(, document.querySelector("#example"));
    instance.setProps({name: "William"});
</script>

使用setProps修改属性值，此种方式不推荐，如果需要改变属性值，可以参考第一个例子，利用父组件去修改。

状态的含义和用法

state
状态：事物所处的状况。
状态是由事物自行处理、不断变化的。
状态是事物的私有属性。
状态的用法
getInitialState:初始化每个实例特有的状态
setState:更新组件状态
使用setState——启用diff算法——有变化，更新DOM

属性和状态的对比

属性和状态的相似点
1、都是纯JS对象
2、都会触发render更新
3、都具有确定性
状态只和组件本身相关，组件不能修改属性

这里写图片描述

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

属性和状态的实例

编写一个简单的文章评论框
第一步：分析构成项目的组件
第二步：分析徐俊的关系和数据传递
第三步：编写代码
第一步：分析构成项目的组件
评论框
内容
第二步：分析徐俊的关系和数据传递
评论框是内容的父组件
父组件需要传递评论对象子组件，评论对象是内容组件的属性，评论内容是内容组件的状态。

1、select，option是写死的
2、option的内容应该是动态的，将option的内容作为状态提取出来

利用属性和状态实现一个评论框:

需要注意的是，React中,style不能直接写300px,需要使用拼接,另外margin-top等也需要使用驼峰命名法,写成marginTop
运行结果如下:
这里写图片描述

点击复制链接与好友分享!回本站首页