对比以下react和vue组件的属性和状态
react
首先看下react中类组件和函数组件区别:
state状态 | props属性 | lifecycle生命周期 | |
---|---|---|---|
类组件 | 有 | 有 | 有 |
函数组件 | 无 | 有 | 无 |
此处主要学习state和props,lifecycle后面再去学习。
可以看看以下demo中react中类组件和函数组件中各自的属性,状态实现。
// react-vue-props-state\react-state-props\react-component.js
// 类组件
class Son extends React.Component {
constructor(){
super()
this.state = {
knowledge: 0,
experience: 0
};
this.advance.bind(this)
}
advance({
type, payload}){
const {
knowledge, experience} = this.state;
switch(type){
case "advanceKnowledge":
this.setState({
knowledge:knowledge+payload})
break
case "advanceExperience":
this.setState({
experience:experience+payload})
default:
break
}
}
render(){
const {
idCard:{
name, fatherName } } = this.props;
const {
knowledge, experience } = this.state;
return(<div >
我叫{
name }, 我的老爸是 {
fatherName}
<div>
<button onClick={
this.advance.bind(this,{
type:"advanceKnowledge", payload:1})}>学习</button>
<button onClick={
this.advance.bind(this,{
type:"advanceExperience", payload:1})}>课外活动</button>
</div>
<div>
我参加过 {
experience} 场课外活动,
我读过