React组件通讯基础

本文只是入门级别的读书笔记，大佬请忽略。

• 父向子组件通讯

  • 通常父组件使用props向子组件传递，然后子组件处理。
  • 通过属性绑定进行通讯，
    父组件：

    import React, {Component} from 'react'
    import Child from 'Child.js'
    
    export default class Parent extends Component { 
    	render() {
    		return (
    			<div> 
    				<Child title= "传递给子组件的信息" /> 
    			</div>
    			)
    	}
    }
    
    

      //		子组件Child.js
      import React from 'react'
      const Child = props =>{
      		return <h1>{props.title}</h1>
      }
      export default Child
    

  在上门的例子中，父组件通过title属性向子组件Child传递值，子组件Child通过this.prop.title就可以获取到父组件的传递值。

React组件间通讯

• 父子组件通讯

  • 通过属性绑定进行通讯

  • 父组件传递数据给子组件

    • 模拟数据

      • 直接传递
        

    • 数据交互的数据

      • 数据交互的数据会导致组件至少渲染两次，所以必须进行判断数据是否存在，直接运行数据，会报错
        数据请求的过程
        constructor () {
        super()
        this.state = {
        people: null,//设置一个空对象
        }
        }

            componentDidMount () {//在这个生命周期中请求数据
                fetch('/data.json')
                    .then( res => res.json() )
                    .then( data => {
                        this.setState({people: data})//获取数据之后还要赋值
                    })
                    .catch( error => console.log( error ))
            }
        

        • 通过属性绑定，将对象传输给子组件，子组件要先判断事先有无属性.
          {this.props.对象名 && this.props.对象名.属性名}

  • 子父组件通讯

    • 父组件通过属性绑定将一个方法传递给子组件，子组件调用这个方法。
      change = ( val ) => {
      this.setState({
      money: val
      })
      }
      //将方法传递给子组件

           <button onClick = {() => {this.props.change(this.state.money)}}> 发工资 </button> 调用方法，将参数传递给父组件
      

  • 非关系组件通讯

    • 在同一个父组件内的两个非关系组件进行通讯
    • 本质就是子父组件通讯加上父子组件通讯。
    • 使用ref链

  • 跨组件通讯

    • context
      先引入createContext
      import React, {Component,createContext} from ‘react’

      const 名称 = createContext()//创建
      
      render() {
              return (
                  <div>
                      <名称.Provider value={this.state.info}>  //使用.provider 并绑定属性传输值
                      </名称.Provider>
                  </div>
              )
          }
        //在子组件中使用<h3> {this.context} </h3>
      

  • 多组件状态共享

    • flux
    • redux
    • mobx