新建一个组件News，并且只将他渲染到APP.js中
import React,{Component} from 'react'
/*
React中的组件:解决html 标签构建应用的不足
好处：把公共的功能单独抽离成一个文件，哪里使用哪里引入
父子组件：组件的相互调用中，调用者称之为父组件，被调用者称之为子组件 比如我在Home.js组件中引入New组件，则Home就是父组件
父传子：
1.在调用子组件的时候定义一个属性
2.子组件里面this.props.msg
父组件不仅可以给子组件传值，还可以给子组件传方法，以及把整个父组件传给子组件
父组件主动获取子组件数据
1、调用子组件的时候指定ref的值
2、通过this.refs.header 获取整个子组件实例 (dom（组件）加载完成以后获取 )
*/
class News extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div>
</div>
);
}
}
export default News;
注释看不看无所谓，我们一步步来，父子组件应该很容易区分，这个不多讲
新建一个子组件Header，引入到News父组件中，然后引入
双标签还是单标签看自己习惯，问题不大
在父组件中给予Header模板写了一个属性，子组件就可以通过这个属性接收到值
OK，这是最简单的传值。除了传值还能传递方法
同样我们编写一个方法，并在组件中使用属性传递过去
父组件还可以将自己全部传给子组件，传递this即可
需要注意的就是方法，此时的写法是变量也就是函数表达式不是函数体，不然没法调用，当然这个问题不大
那么此时 this.props.gob就代表了父组件实例，然后调用内部的状态方法即可
父组件获取子组件数据，依旧是这样写法
在父组件中声明一个函数表达式，result用来接收子组件的数据
然后在子组件中使用bind方法传递数据
子组件也可以将自己全部给父组件，再编辑一个子组件
引入子组件footer 在父组件中的 getFoot()方法使用this.refs.footer获取子组件所有数据！
import React,{Component} from 'react'
import Header from './Header'
import Foot from './Footer'
/*
React中的组件:解决html 标签构建应用的不足
好处：把公共的功能单独抽离成一个文件，哪里使用哪里引入
父子组件：组件的相互调用中，调用者称之为父组件，被调用者称之为子组件 比如我在Home.js组件中引入New组件，则Home就是父组件
父传子：
1.在调用子组件的时候定义一个属性
2.子组件里面this.props.msg
父组件不仅可以给子组件传值，还可以给子组件传方法，以及把整个父组件传给子组件
父组件主动获取子组件数据
1、调用子组件的时候指定ref的值
2、通过this.refs.** 获取整个子组件实例 (dom（组件）加载完成以后获取 )
*/
class News extends Component {
constructor(props) {
super(props);
this.state = {
'title':'News组件是我的父组件',
};
}
handelClick=()=>{
alert('我是父组件的方法')
}
getChild=(result)=>{
alert(result)
}
getFoot(){
this.refs.footer.run();
}
render() {
return (
<div>
<h2>我是父组件</h2>
<button onClick={this.getFoot.bind(this)}>获取footer组件的方法</button>
<hr/>
<Header title={this.state.title} fun={this.handelClick.bind(this)} gob={this} />
<hr/>
<Foot ref="footer" />
</div>
);
}
}
export default News;
基本用法还是很简单的，没有vue那么复杂
