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