9.8 react 父子组件通信

父子通信

1. 父向子传值

//父组件
class Parent extends Component {
    state = {
        msg: 'hello'
    }
    render() {
        return (
            <div>
              <Son msg={this.state.msg}/>
            </div>
        )
    }
}

//子组件
class Son extends Component {
    state = {
        msg: 'hello'
    }
    render() {
        let {msg} = this.props;//接收父组件传递的值
        return (
            <div>
              {msg}
            </div>
        )
    }
}

2. 子改变父的值
   父组件传递一个函数给子组件，触发的时候，子组件调用该函数

//父组件
class Parent extends Component {
    state = {
        msg: 'hello'
    }
    handleChange = (data) => {
       this.setState({
         msg: data
      })
    }
    render() {
        return (
            <div>
             {this.state.msg}
              <Son msg={this.state.msg} change={this.handleChange}/>
            </div>
        )
    }
}

//子组件
class Son extends Component {
    state = {
        msg: 'hello'
    }
    inputChange = (e) => {
       this.props.change(e.target.value);
    }
    render() {
        let {msg} = this.props;//接收父组件传递的值
        return (
            <div>
              {msg}
              <input type="text" value = {msg} onChange={this.inputChange} />
            </div>
        )
    }
}

props参数校验

1. 下载 prop-types包

npm -D prop-types

2. 使用

import PropTypes from 'prop-types'
// 使用语法：组件名.propTypes添加一个属性,属性值为对象
//注意大小写 Son.propTypes中p是小写
Son.propTypes = {
   name: PropTypes.string.isRequired, 
   age: PropTypes.number
}
// 设置默认值
Son.defaultProps = {
   name: 'zs',
   age: 12
}

context任意组件通信

Context提供了一个无需为每层组件手动添加props,就能在组件间进行数据传递的方法。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

1. context.js中

import React from 'react'
const MainContext  = React.createContext('可以设置默认值');
export default MainContext;

2. 传递值的组件

import MainContext from './context.js'
<MainContext.Provider value = {msg}> </ MainContext.Provider>

3. 接收值的组件

• 方式1

import MainContext from './context.js'
//将MainContext挂载到组件中
static contextType = MainContext;
//或者(两者作用相同)
Hello.contextType = MainContext;
// 通过 this.context获取值
{this.context}

• 方式2

import MainContext from './context.js'
<MainContext.Consumer>
 {
    value => {
       return (
          <div> </div>
       )
    }
 }
</ MainContext.Consumer>

react生命周期

• 组件初始化阶段：
  getInitialState：初始化 this.state 的值，只在组件装载之前调用一次
  getDefaultProps：只在组件创建时调用一次并缓存返回的对象（即在 React.createClass 之后就会调用）。
  因为这个方法在实例初始化之前调用，所以在这个方法里面不能依赖 this 获取到这个组件的实例。
• 组件加载阶段：
  componentWillMount：只会在装载之前调用一次,我们可以改变state的状态，此时还未render，不会产生额外的render
  componentDidMount：只会在装载完成之后调用一次，dom节点生成，请求可以在这里发送
• 组件渲染
  render，当数据改变时触发
• 组件更新阶段：
  componentWillReceiveProps 、shouldComponentUpdate、componentWillUpdate、componentDidUpdate这些方法不会在首次render组件的 周期调用。
• 组件销毁阶段：
  componentWillUnmount：卸载组件触发，清除定时器，移除所有的事件监听