react.js 组件之间的数据传递props

/*
*属性
* 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'));