React学习笔记（二）[组件及它的state与props]
2018-09-08 本文已影响0人
朱珠霞
React其中一个重要思想就是 "react内一切皆组件"，一个好的应用应该有一定的原则来划分组件。
我们划分组件的时候应该尽量保持一个组件只做一件事。每个小组件只关注实现单个功能，组合起来也能实现复杂的实际需求。
虽然组件都是独立个体，但不同组件之间总会有通信交流。
我们划分组件要满足“高内聚，低耦合”的原则。
- 高内聚---将逻辑紧密相关的内容放在一个组件内。
- 低耦合---不同组件之间的依赖关系要尽量弱化。
组件的数据
react组件的数据分两种：prop和state。prop是组件的对外接口，一般用于组件之间的通信；而state是组件的内部状态。
prop
prop是从外部传递给组件的数据。下面举个例子
// 组件内部代码片段 src/component/todoItem.js
render(){
return(
<input value={this.props.value} onChange={changeInputVal} />
)
},
changeInputVal(e){
this.props.onChange.call(null,e)//带有参数e的回调函数
}
// 包含todoItem的父组件代码片段 src/app.js
import Todoltem from './component/todoItem.js'
...
render(){
return (
<div className="todolist">
<TodoItem
value={this.state.inputValue}
onChange={this.updateValue.bind(this)}
></TodoItem>
</div>
)
},
updateValue(e){
console.log(e)//子组件传递过来的参数e
}
React组件的prop看起来很像是HTML元素的属性，但React组件的prop所能支持的类型丰富比HTML元素的属性更多了，HTML元素的属性仅能是字符串，而prop还可以是任意一种JS所支持的数据类型。
上面例子举出了prop的数据传递方式
- 外部传递数据给react组件---直接使用prop
- 组件反馈数据给外部---使用带回调函数/参数的函数类型的prop
state
React组件的数据除了prop外还有state。由于prop是父级传递过来的数据，并不能修改，所以记录自身数据变化只能用state。
上面有两个词语是加粗的，一个是记录，一个是变化。
- 变化。
通常一个组件自身会有多种交互状态或数据的变化。这种变化如果只是内部状态，我们通常会将这些数据放在state内，用于驱动渲染该组件的UI。 - 记录。
我们知道，state是用于保存内部数据的，那是否直接改变state的数据就可以驱动组件的渲染呢？答案当然是no。这是react的设计，驱动组件的渲染是函数this.setState(这里涉及到生命周期)。this.setState()函数所做的事情，首先是改变this.state的值，然后驱动组件经历更新过程，这样才有机会让this.state里新的值出现在组件界面上。
