React学习笔记2

Posted 2020-07-25

React的属性和状态

React数据使用两种事物进行传递：

1.属性(props)：在组件外部传入，组件内部通过this.props获得（与生俱来，不容易被改变的）

2.状态(state)：在组件内部设置或更改，组件内部通过this.state获得（状态是后天获得的，经常会发生改变的）

属性专一，状态多情

---

 

React属性(Props)

• 属性是在一个组件被声明的时候就被（父组件）赋予的，并且不可被修改

• 属性被传递的方式一般在组件被调用时候被传入

• 属性可以使字符串、数组、对象...

直接把Object传入组件，用{...Object}的形式(前面加...)

例子:

1 var _prop = {"title":"home page","url":"http://gist.github.com"}
2 ReactDOM.render(<Ele{..._prop}/>,document.getElementById("example"));

 

---

 

React状态(state)

不同于props，state在组件的内部去声明

用途：主要是检测当前组件内部数据是否发生改变，一旦组件数据发生改变，state也发生改变

 

问题：

1.state如何去声明和定义？

 

1 getInitialState:function(){
2 return({
3 value:"default",
4 bool:false
5 })
6 },

 

2.如何去监听组件内部的数据变化情况？实际上就是不断给state赋值的过程

完整代码：

 

 1 var Compo = React.createClass({
 2 getInitialState:function(){
 3 return({
 4 value:"Hello"
 5 })
 6 },
 7 handleChange:function(e){
 8 var text = e.target.value;
 9 this.setState({value:text});
10 },
11 render:function(){
12 var value = this.state.value;
13 return(
14 <div>
15 <input type="text" onChange={this.handleChange} value={value}/><br />
16 <span>value:{value}</span>
17 </div>
18 )
19 }
20 })
21 ReactDOM.render(<Compo/>,document.getElementById("example"));

 

进入页面的初始状态

当进行输入框输入，下面同步显示输入框的value

---

 

实际开发

 

开发中props和state进行混搭使用

数据对接，以走秀网商品列表为例：

1.分成两个组件，外层是父组件，这个商品列表的容器

2.商品列表中每个循环子项（渲染模板）是子组件

可以在父组件中存储变化的数据，放在state中

把state数据作为props传递到子组件中，让子组件自己进行解析

数据接口