props:是一个简单结构的对象,用于把父组件中的数据或方法传递给子组件,供子组件使用。
子组件中:
class PostItem extends Component {
render(){
const {title,author,date} = this.props;
return(
<ul>
<li>{title}</li>
<li>{auto}</li>
<li>{date}</li>
</ul>
)
}
}
父组件中:
const data = [{title:"1",author:"张三",date:"2019-07-25"},{...}];
class PostItem extends Component{
render(){
<div>
<ul>
{data.map(item => <PostItem title={item.title} author = {item.author}
date = {item.date}>)
}
</ul>
</div>
}
}
state:
是组件内部的状态,state的状态变化最终将显示到UI上。在组件的构造方法constructor中通过this.state定义组件的初始状态。
当用户的某些行为要改变某种状态的时候就可以用onChange方法来改变state的值,使用setState可以重置state的值,其也是改变组件状态的唯一方法。
class PostItem extends Component {
constructor(props) {
super(props);
this.state = {
vote: 0
};
}
// 处理点赞逻辑
handleClick() {
let vote = this.state.vote;
vote++;
this.setState({
vote: vote
});
}
//省略。。。
}
在开发React应用时,一定要先认真思考哪些组件应该设计成有状态组件,哪些组件应该设计成无状态组件。尽可能多的使用无状态组件,无状态组件不用关心状态的变化,只聚焦于UI的展示,因而更容易被复用!
React应用组件设计的一般思路是,通过定义少数的有状态组件管理整个应用的状态变化,并且通过props将状态传递给其余的无状态组件,由无状态组件完成绝大部分的渲染工作。
当某个状态被多个组件依赖或者影响的时候,就把该状态提升到这些组件的最近公共父组件中去管理,用 props 传递数据或者函数来管理这种依赖或着影响的行为。
但是一味的提升状态并不是一个最好的管理状态方法,因为以后会引入redux这样的状态管理工具进行管理这种工作状态
对于不会被多个组件依赖和影响的状态(例如某种下拉菜单的展开和收起状态),一般来说只需要保存在组件内部即可,不需要做提升或者特殊的管理。
父组件向子组件传值的时候,使用props;
子组件向父组件传值的时候,最好是直接将父组件中改变state的函数传递给子组件,由父组件直接改变state。因此又变成了父组件向子组件传值