react 子父组件通信 及 生命周期

父组件

import React, { Component } from 'react';
import { connect } from 'react-redux'

import Child from '../Child/index.js'

class HelloWord extends Component {
// constructor(props) {
//     super(props);
//     //console.log(this)
// }
//this.Hidelick=this.Hidelick.bind(this)

componentWillMount() {
console.log('在渲染前调用,在客户端也在服务端。')
};
componentDidMount() {
console.log('在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。')
}
componentWillReceiveProps(newProps) {
console.log('在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。')
}
shouldComponentUpdate(newProps, newState) {
console.log('返回一个布尔值。在组件接收到新的props或者state时被调用')
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。');
}
componentDidUpdate(prevProps, prevState) {
console.log('在组件完成更新后立即调用。在初始化时不会被调用')
}
componentWillUnmount() {
console.log('在组件从 DOM 中移除的时候立刻被调用')
}

HideClick=()=>{
console.log('sdfjksdhf')
}

render() {
console.log(this.props)
return (
<div id="HelloWord">
<h1 onClick={this.HideClick}> HelloWord </h1>
<Child HideClick={this.HideClick.bind(this)}></Child>
</div>
)
}
}

export default connect()(HelloWord)

子组件

import React, { Component } from 'react';
// import PropTypes from "prop-types"

class Child extends Component {
constructor(props) {
super(props)
this.state = {
todos: [{ text: "one" }, { text: "two" }, { text: "three" }],
name: "4444"
}
}

render() {
return (
<div id='Child'>
<h1 onClick={this.props.HideClick}>{this.state.name}</h1>
<ul>
{
this.state.todos.map(function (item, index) {
if(item.text==="one"){
return <li key={index}>{item.text}</li>;
}else{
return <li key={index}>{item.text}</li>;
}

})
}
</ul>
</div>
)
}

}

export default Child