React 属性和状态具体解释

属性的含义和使用方法

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不推荐改变组件的属性,能够通过父组件向子组件传入的方式。

<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}</p>

        }

    });

    var instance = ReactDOM.render(<HelloWorld></HelloWorld>, 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的内容作为状态提取出来

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

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

<!--将option提取出来作为父组件的状态-->

<!--将评论对象(selectName)传递给子组件-->

<!--改动子组件,构建回复内容-->

<!--监听内容的变化。并将变化记录在状态中-->

<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 style = {

        width:300 + 'px',

        height:150 + 'px',

        marginTop:20+'px',

        marginBottom:20+'px',

        resize: 'none',

        textIndent:10 + 'px'

    };

    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" + this.state.inputText);

        },

        render: function () {

            return (<div>

                        <textarea style = {style} onChange = {this.handleChange} placeholder = "please enter something..." ></textarea>

                        <br/>

                        <button onClick = {this.handleSubmit}>submit</button>

                    </div>);

        }

    });

    var Comment = React.createClass({

        getInitialState: function () {

            return{

                names: ["William", "Yvette", "Katharine"],

                selectName: ""

            };

        },

        handleChange: 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.handleChange}>

                            {options}

                        </select>

                        <Content selectName = {this.state.selectName}></Content>

                    </div>);

        }

    });

    ReactDOM.render(<Comment></Comment>, document.querySelector("#example"));

</script>

须要注意的是。React中,style不能直接写300px,须要使用拼接,另外margin-top等也须要使用驼峰命名法,写成marginTop

执行结果例如以下: