/*
*属性
* 1.如何传递属性
* 2.属性和状态区别和联系
*
* 3.子组件都有一个props属性对象
*
* 4.单线数据流（只能从父组件流向子组件，就是在父组件定义一个属性，子组件可以通过this.props.属性名 接收）
* 5.子组件可以读取父组件传递的属性，但是不能直接改
* */
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
//子组件
class LikeButton extends Component{
constructor(){
super();
}
render(){
// JS引擎 V8 最多只会占用1.7G
//onClick等于一个函数定义，而非一个函数执行结果
//如果changeText加上()，则会直接执行，再次执行就没有结果，还会进入死循环
// 加了()，改变状态，父组件重新渲染，子组件又会渲染，自主渲染又会修改状态，父组件又会重新渲染，这样一直死循环，直到内存消耗光了
return(
<button onClick={this.props.changeText}>
{this.props.text}{this.props.age}
</button>
)
}
}
/*父组件定义一个属性text*/
class Index extends Component{
constructor(){
super();
//初始化状态对象
this.state={
text:"点赞",
age:10
}
}
changeText= ()=>{
this.setState({
text:this.state.text=='点赞'?'取消':'点赞'
})
}
//父组件通过属性传递函数和变量值给子组件
render(){
return(
<div>
<LikeButton changeText={this.changeText} text={this.state.text} age={this.state.age}></LikeButton>
</div>
)
}
}
ReactDOM.render(<Index></Index>,document.querySelector('#root'));
