React - 组件通讯

React - 组件通讯

父子组件通信方式

传递数据(父传子)与传递方法(子传父)

父传子

父组件通过 属性 向 子组件 传递数据

import React, { Component } from 'react'
// 子组件 通过 props 接收 父组件 传来的数据
class Navbar extends Component {
  render() {
    const { title, leftshow, rightshow } = this.props
    return (
      <div>
        <div className='nav'>
          <span >{leftshow && '<'}</span>
          <p>{title}</p>
          <span>{rightshow && '='}</span>
        </div>
      </div>
    )
  }
}
// 父组件 
export default class App extends Component {
  render() {

    var obj = {
      title:"测试",
      leftshow:false,
      rightshow:true,
    }
    return (
      <div>
        <div>
          <h2>首页</h2>
          <Navbar  leftshow={false} rightshow={true} />
        </div>
        <div>
          <h2>列表</h2>
          <Navbar title='列表'  rightshow={true}/>
        </div>
        <div>
          <h2>我的</h2>
          <Navbar title='我的' />
        </div>
        <Navbar {...obj} />
      </div>
    )
  }
}
子传父

父组件通过 属性 给子组件传递方法 ,子组件通过 触发 传过来的该方法 向父组件传递数据(该方法携带回来的参数)

import React, { Component } from 'react'

// 子组件
class Field extends Component {
  render() {
    let { label, type, onChangeEvent, value } = this.props
    return (
      <div style={{ padding: '10px 0' }}>
        <label >{label}</label>
        <input type={type} onChange={(e) => onChangeEvent(e)} value={value} />
      </div>
    )
  }
}

// 父组件
export default class App extends Component {
  state = {
    username: 'admin'
  }
  render() {
    let { username } = this.state
    return (
      <div>
        <h1>登录页面</h1>
        <Field label='用户名:' type='text' value={username}  onChangeEvent={(e) => {
          this.setState({
            username: e.target.value
          })
        }} />
      </div>
    )
  }
}
ref标记

ref标记(父组件拿到子组件的引用,从而调用子组件的方法)

import React, { Component } from 'react'
// 子组件
class Field extends Component {
  state = {
    value: ''
  }
  clear = () => {
    this.setState({
      value: ''
    })
  }
  setValue = (value) => {
    this.setState({
      value
    })
  }
  render = () => {
    let { label, type } = this.props
    return (
      <div style={{ padding: '10px 0' }}>
        <label >{label}</label>
        <input type={type} value={this.state.value} onChange={(e) => {
          this.setState({
            value: e.target.value
          })
        }} />
      </div>
    )
  }
}
// 父组件
export default class App extends Component {
  myUname = React.createRef()
  render() {
    return (
      <div>
        <h1>登录页面</h1>
        <Field ref={this.myUname} label='用户名:' type='text' value={'admin'} />

        <button onClick={() => this.login()}>登录</button>
        <button onClick={() => this.reset()}>取消</button>
      </div>
    )
  }
  login = () => {
    console.log(this.myUname.current.state.value);
  }
  reset = () => {
    this.myUname.current.clear()  // 父组件拿到子组件的引用,从而调用子组件的方法
  }
}

非父子组件通信方式

状态提升(中间人模式)

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上。在父组件上改变这个状态然后通过props分发给子组件

import React, { Component } from 'react'
import FilmItem from './component/FilmItem'
import FilmDetail from './component/FilmDetail'
export default class App extends Component {
  state = {
    films: [],
    info:''
  }
  render() {
    const { films, info } = this.state
    return (
      <div>
        {
          films.map(item=>
            <FilmItem {...item}  key={item.filmId} getDetail={(info)=>this.getDetail(info)}/>
          )
        }
        <FilmDetail info={info}/>
      </div>
    )
  }
  getDetail= (info) => {
    this.setState({
      info
    })
  }
}

​ 这段代码中的 子组件 FilmItem 和子组件 FilmDetail 都用了 父组件的件 info 这个状态,两个子组件通过公用这个状态来实现通信

发布订阅模式实现

在调度中心中 要有 列表,发布方法,订阅方法等。

  • 列表:记录所有订阅的成员(回调函数)
  • 订阅方法:将所有订阅成员注册到列表中
  • 发布方法:通知列表中所有的成员 触发列表中所有的回调函数

调度中心

// 调度中心
var bus = {
  list: [],
  // 订阅
  subscribe(cb) {
    this.list.push(cb)
  },
  // 发布
  publish(text) {
    // 遍历所有的list, 将回调函数执行
    this.list.forEach((cb) => {
      cb && cb(text)
    })
  }
}

export default bus 

子组件 (订阅)

import React, { Component } from 'react'
import '../css/filmDetail.css'
import bus from '../bus'
export default class FilmDetail extends Component {
  constructor() {
    super()

    this.state = {
      text: ''
    }
    // 订阅
    bus.subscribe((text) => {
      this.setState({
        text
      })
    })
  }
  render() {
    return (
      <div className='container1'>
        <span>
          {this.state.text}
        </span>
      </div>
    )
  }
}

子组件 (发布)

import React, { Component } from 'react'
import '../css/filmItem.css'
import bus from '../bus'
export default class FilmItem extends Component {
  render() {
    const { poster, name, grade, synopsis, actors, nation, runtime } = this.props
    return (
      <div className='container fl' onClick={() => this.getSynopsis(synopsis)}>
        <div className='l_img'>
          <img src={poster} alt={name} />
        </div>
        <div className='r_info fl-column'>
          <h1 className='fl'>{name} </h1>
          <p className='info_grade'>观众评分 <span>{grade}</span></p>
          <p className='info_actors text_ell'>主演:
            {
              actors.map((m, i) => <span key={i}>{m.name} </span>)
            }</p>
          <p className='info_nation'><span>{nation}</span> | <span>{runtime}分钟</span></p>
        </div>
        <div className='pay_btn'>
          <button>购票</button>
        </div>
      </div>
    )
  }
  getSynopsis = (synopsis) => {
    // 发布
    bus.publish(synopsis)
  }
}
context状态树传参

React.createContext

const GlobalContext = React.createContext(defaultValue);

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

Context.Provider

每个 Context 对象都会返回一个 Provider React 组件,它允许消费组件订阅 context 的变化。

Provider 接收一个 value 属性,传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据。

当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数,因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

Context.Consumer

<GlobalContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
GlobalContext.Consumer>

这里,React 组件也可以订阅到 context 变更。这能让你在 函数式组件 中完成订阅 context。

这个函数接收当前的 context 值,返回一个 React 节点。传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider,value 参数等同于传递给 createContext()defaultValue

import React from 'react'
const GlobalContext = React.createContext()
export default GlobalContext

父组件

import React, { Component } from 'react'
import axios from 'axios'
import FilmItem from './component/FilmItemContext'
import FilmDetail from './component/FilmDetailContext'

import GlobalContext from './context'

export default class App extends Component {
  constructor() {
    super()
    this.getData()
    this.state = {
      films: [],
      info:''
    }
  }
  render() {
    const { films,info } = this.state
    return (
      <GlobalContext.Provider value={{
          info: info,
          changeInfo:(value)=>{
            this.setState({
              info: value
            })
          }
        }}>
        <div>
          {films.map(item => <FilmItem {...item} key={item.filmId} />)}
          <FilmDetail />
        </div>
      </GlobalContext.Provider>
    )
  }
  getData = () => {
    axios.get(`/test.json`)
      .then(res => {
        let { films } = res.data.data
        this.setState({
          films
        })
      })
      .catch(err => console.log(err))
  }
  getDetail = (info) => {
    this.setState({
      info
    })
  }
}



子组件

import React, { Component } from 'react'
import '../css/filmDetail.css'
import GlobalContext from '../context'
export default class FilmDetail extends Component {
  render() {
    return (
      <GlobalContext.Consumer>
        {
          (value) => {
            return (
              <div className='container1'>
                <span>
                  {value.info}
                </span>
              </div>
            )
          }
        }
      </GlobalContext.Consumer>
    )
  }
}
import React, { Component } from 'react'
import '../css/filmItem.css'
import GlobalContext from '../context'
export default class FilmItem extends Component {
  render() {
    const { poster, name, grade, synopsis, actors, nation, runtime, getDetail } = this.props
    return (
      <GlobalContext.Consumer>
        {
          (value) => {
            // console.log(value);
            return (
              <div className='container fl' onClick={ ()=>this.getSynopsis(value,synopsis)}>
                <div className='l_img'>
                  <img src={poster} alt={name} />
                </div>
                <div className='r_info fl-column'>
                  <h1 className='fl'>{name} </h1>
                  <p className='info_grade'>观众评分 <span>{grade}</span></p>
                  <p className='info_actors text_ell'>主演:
                    {
                      actors.map((m, i) => <span key={i}>{m.name} </span>)
                    }</p>
                  <p className='info_nation'><span>{nation}</span> | <span>{runtime}分钟</span></p>
                </div>
                <div className='pay_btn'>
                  <button>购票</button>
                </div>
              </div>
            )
          }
        }
      </GlobalContext.Consumer>

    )
  }
  getSynopsis=(value,info) => {
    value.changeInfo(info)
  }
}

context优缺点:

  • 优点:跨组件访问数据

  • 缺点:react组件树种某个上级组件shouldComponetUpdate 返回false,当context更新时,不

    会引起下级组件更新

你可能感兴趣的:(react,react.js,javascript,前端)