likes
comments
collection
share

React实现组件通信的方式(react新手必会)

作者站长头像
站长
· 阅读数 11

组件通讯

  • 组件通讯介绍以及为什么要有组件通讯
  • 组件的props
  • 组件通讯的三种方式 父传子 子传父 兄弟组件
  • Context组件通讯
  • 案例

组件拆分到文件

目标

掌握将组件定义到单独的文件的基本方式。

格式

定义,并默认导出组件

Com.js

import React, { Component } from 'react'
​
export default class Com extends Component {
  render() {
    return <div>$2</div>
  }
}

导入组件

import Com from './Com.js'render(<Com></Com>)

要点

组件名采用大驼峰命名法

组件文件名与组件名一致

拓展:使用vscode的代码片段快速录入组件基本结构

React实现组件通信的方式(react新手必会)

组件通讯介绍

目标

了解组件通讯的意义,知道react组件通讯的三种方式

内容

  • 组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。
  • 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。
  • 而在这个过程中,多个组件之间不可避免的要共享某些数据
  • 为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯

三种方式

  • 父子组件之间
  • 兄弟组件之间
  • 跨组件层级

总结

组件中的状态是私有的,也就是说,组件的状态只能在组件内部使用,无法直接在组件外使用。

其与外界沟通。这个过程就是组件通讯

props基本使用

React实现组件通信的方式(react新手必会)

目标

掌握props的使用语法,能将数据从父组件传给子组件

React实现组件通信的方式(react新手必会)

步骤

  1. 父组件使用子组件时,传入自定义属性
  2. 子组件内部接收属性

格式

父组件-传入数据

<子组件 自定义属性1={值1} 自定义属性2={值2} .... />

子组件-函数式组件-接收数据

// 接收数据: 函数组件需要通过补充形参来获取
function 子组件(props) {
  console.log('从父组件中传入的自定义属性被收集在对象:', props)
  return (<div>子组件的内容</div>)
}

子组件-类组件-接收数据

// 接收数据: class 组件需要通过 this.props 来获取
class 子组件 extends Component {
  console.log('从父组件中传入的自定义属性被收集在对象:', this.props)
  render() { return (<div>子组件的内容</div>) }
}

示例:函数组件获取props

// 接收数据:
// props 的值就是:{ age: 19 }
function HelloFunc(props) {
  return (
    <div>接收到数据:{props.name}</div>
  )
}
​
// 传递数据:
// 可以把传递数据理解为调用函数 Hello,即:HelloFunc({ age: 19 })
<HelloFunc age={19} />

示例:类组件获取props

// 接收数据:
// class 组件需要通过 this.props 来获取
class HelloClass extends Component {
  render() {
    return (
      <div>接收到的数据:{this.props.age}</div>
    ) 
  }
}
​
// 传递数据:
<HelloClass age={19} />

总结

__ __ 是实现组件通讯的关键

props的三个注意事项

目标

了解props的特点,知道什么是单向数据流

内容

    1. 可以传递任意数据
    1. 只读的
    1. 单向数据流

可以传递任意数据

props可以传递:数字, 字符串, 布尔类型, 数组, 对象, 函数, jsx

props 是只读对象

只能读取对象中的属性,无法修改

this.props.age =20 // 错误

单向数据流

也叫做:自的数据流

  1. 父组件中的数据可以通过 props 传递给子组件,并且,当父组件中的数据更新时,子组件就会自动接收到最新的数据
  2. 父组件的数据更新会流动到子组件,不能反过来,子组件直接去修改父组件的数据
  3. 类比:就像瀑布的水一样只能从上往下流动,并且,当上游的水变浑浊,下游的水也会受到影响

props的children属性

目标

掌握props中children属性的用法

children属性

  • children属性:表示该组件的子节点,只要组件有子节点,props就有该属性
  • children 属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)

React实现组件通信的方式(react新手必会)

核心代码

function Hello(props) {
  return (
    <div>
      该组件的子节点:{props.children}
    </div>
  )
}
​
<Hello>我是子节点</Hello>

组件通讯-父传子

目标

将父组件的数据,传递给子组件

内容

  • 父组件提供要传递的state数据
  • 给子组件标签添加属性,值为 state 中的数据
  • 子组件中通过 props 接收父组件中传递的数据

核心代码

父组件提供数据并且传递给子组件

class Parent extends React.Component {
    state = { lastName: '王' }
    render() {
        return (
            <div>
                传递数据给子组件:<Child name={this.state.lastName} />
            </div>
        )
    }
}

子组件接收数据

function Child(props) {
    return <div>子组件接收到数据:{props.name}</div>
}

组件通讯-父传子典型应用

目标

如下图示中:

  1. 有4个组件,最外层是父组件,内部有三个子组件。
  2. 列表数据(共有三条)定义在父组件中。

请完成:

  1. 定义子组件,接收父组件传递的数据并渲染

React实现组件通信的方式(react新手必会)

基础代码

文件目录

- index.js    # 父组件,导入子组件使用
- GoodItem.js # 子组件,导出子组件

初始代码

index.js

import React from 'react'
import ReactDOM from 'react-dom'// 引入子组件
import GoodItem from './GoodItem'class Element extends React.Component {
  state = {
    list: [
      { id: 1, name: '棒棒糖', price: 18, num: 1 },
      { id: 2, name: '大鸡腿', price: 34, num: 2 },
      { id: 3, name: '冰激凌', price: 14, num: 3 }
    ]
  }
​
  render () {
    const { list } = this.state
    return (
      <div
        style={{
          border: '1px solid #ccc',
          margin: 10,
          padding: 10,
          width: 500
        }}>
        <h3>商品列表</h3>
       
        <p>
          总价:1000
          
        </p>
      </div>
    )
  }
}
​
ReactDOM.render(<Element />, document.getElementById('root'))
​

GoodItem.js

/* eslint-disable react/prop-types */
import React from 'react'
export default class GoodItem extends React.Component {
  render () {
    return (
      <div
        style={{
          border: '1px solid #520',
          margin: 10,
          paddingLeft: 10,
          width: 400
        }}>
        <p>商品名: xx </p>
        <p>数量: 2 </p>
        <p>单价: 10 </p>
        <p>总价: 20 </p>
      </div>
    )
  }
}
​

功能完成

index.js

<h3>商品列表</h3>
        {list.map((it) => (
          <GoodItem name={it.name} price={it.price} num={it.num} key={it.id} />
        ))}
        <p>
          总价:
          {list.reduce((acc, cur) => {
            return acc + cur.price * cur.num
          }, 0)}
        </p>

GoodItem.js

render () {
    const { name, num, price } = this.props
    return (
      <div
        style={{
          border: '1px solid #520',
          margin: 10,
          paddingLeft: 10,
          width: 400
        }}>
        <p>商品名: {name} </p>
        <p>数量: {num} </p>
        <p>单价: {price} </p>
        <p>总价: {price * num} </p>
      </div>
    )
  }

组件通讯-子传父

目标

能够将子组件的数据传递给父组件

思路

利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数。

步骤

  1. 父组件

    1. 定义一个回调函数f(将会用于接收数据)
    2. 将该函数f作为属性的值,传递给子组件
  2. 子组件

    1. 通过 props 获取f
    2. 调用f,并传入将子组件的数据

核心代码

父组件提供函数并且传递给子组件

class Parent extends React.Component {
    state: {
      num: 100
    }
    f = (num) => {
        console.log('接收到子组件数据', num)
    }
    render() {
        return (
            <div>
                子组件:<Child f={this.f} />
            </div>
        )
    }
}

子组件接收函数并且调用

class Child extends React.Component {
    handleClick = () => {
      // 调用父组件传入的props,并传入参数
        this.props.f(100)
    }
    return (
        <button onClick={this.handleClick}>点我,给父组件传递数据</button>
    )
}

小结

子传父:在子组件中调用从父组件中定义的方法,并根据需要传入参数

组件通讯-子传父典型应用

目标

在上面的案例的基础上,给子组件增加一个功能: 增加数量

React实现组件通信的方式(react新手必会)

index.js

addNum = (id) => {
    const newList = this.state.list.map((it) => {
      if (it.id === id) {
        return { ...it, num: it.num + 1 }
      } else {
        return { ...it }
      }
    })
    this.setState({ list: newList })
  }
​
​
{list.map((it) => (
          <GoodItem
            addNum={this.addNum}
            id={it.id}
            name={it.name}
            price={it.price}
            num={it.num}
            key={it.id}
          />
        ))}

GoodItem.js

+  hAddNum = () => {
+    this.props.addNum(this.props.id)
+  }
​
  render () {
    const { name, num, price } = this.props
    return (
      <div
        style={{
          border: '1px solid #520',
          margin: 10,
          paddingLeft: 10,
          width: 400
        }}>
        <p>商品名: {name} </p>
        <p>
+          数量: {num} <button onClick={this.hAddNum}>+1</button>
        </p>
        <p>单价: {price} </p>
        <p>总价: {price * num} </p>
      </div>
    )
  }
}

组件通讯-兄弟组件

目标: 能够理解什么是状态提升,并实现兄弟组件之间的组件通讯

问题导入

React实现组件通信的方式(react新手必会)

思路

  • 将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态

  • 思想:状态提升

  • 公共父组件职责:

    • 提供共享状态
    • 提供操作共享状态的方法
  • 要通讯的子组件只需通过 props 接收状态或操作状态的方法

React实现组件通信的方式(react新手必会)

核心代码

  • parent.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Jack from './Jack'
import Rose from './Rose'
class App extends Component {
  // 1. 状态提升到父组件
  state = {
    msg: '',
  }
  render() {
    return (
      <div>
        <h1>我是App组件</h1>
        <Jack say={this.changeMsg}></Jack>
        {/* 2. 把状态给子组件显示 */}
        <Rose msg={this.state.msg}></Rose>
      </div>
    )
  }
  changeMsg = (msg) => {
    this.setState({
      msg,
    })
  }
}
​
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

Son1.js

import React, { Component } from 'react'export default class Jack extends Component {
  render() {
    return (
      <div>
        <h3>我是Jack组件</h3>
        <button onClick={this.say}></button>
      </div>
    )
  }
  say = () => {
    this.props.say('you jump i look')
  }
}
​

Son2.js

import React, { Component } from 'react'
​
export default class Rose extends Component {
  render() {
    return (
      <div>
        <h3>我是Rose组件-{this.props.msg}</h3>
      </div>
    )
  }
}
​

组件通讯 -跨级组件通讯(难点)

目标

学习Context的使用,能用context实现跨级组件通讯

React实现组件通信的方式(react新手必会)

基本素材代码结构

-index.css # 样式
-index.js  # 根组件
-Parent.js # 父组件,与Uncle同级
-Uncle.js  # 
-Son.js    # 子组件

index.js

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Parent from './Parent'
import Uncle from './Uncle'
import './index.css'
class App extends React.Component {
  state = {
    num: 0
  }
​
  render () {
    return (
        <div>
          根组件, num:
          {this.state.num}
          <Parent />
          <Uncle />
        </div>
    )
  }
}
​
ReactDOM.render(<App />, document.getElementById('root'))
​

parent.js

import React from 'react'
import Son from './Son'
export default class Parent extends React.Component {
  render () {
    return (
      <div>
        我是parent组件
        <Son />
      </div>
    )
  }
}
​

Uncle.js

import React from 'react'
export default class Uncle extends React.Component {
  render () {
    return (<div>我是Uncle组件</div>)
  }
}
​

Son.js

import React from 'react'
import { Consumer } from './context'
export default class Son extends React.Component {
  render () {
      return <div onClick={() => {}}>我是son组件</div>
  }
}

思路

React实现组件通信的方式(react新手必会)

使用Context(上下文)的步骤

共3步:

  1. 导入并调用createContext方法,从结果中解构出 Provider, Consumer 组件

    import { createContext } from 'react'
    const { Provider, Consumer } = createContext()
    
  2. 使用 Provider 组件包裹根组件,并通过 value 属性提供要共享的数据

    return (
      <Provider value={ 这里放要传递的数据 }>
        <根组件的内容/>
      </Provider>
    )
    
  3. 在任意后代组件中,使用第1步中导出的Consumer组件包裹整个组件

    return (
    	<Consumer>
      	{
          (data) => {
          	// 这里的形参data 就会自动接收Provider中传入的数据
            // console.log(data)
          	return <组件的内容>
        	}
        }
      </Consumer>
    )
    

落地代码

建立context.js文件

import { createContext } from 'react'
const { Provider, Consumer } = createContext()
export { Consumer, Provider }

改造根组件

import { Provider } from './context'
​
render () {
    return (
      <Provider value={{ num: this.state.num }}>
        <div>
          根组件, num: {this.state.num}
          <Parent />
          <Uncle />
        </div>
      </Provider>
    )
  }

改造后代组件 Uncle.js

import React from 'react'
import { Consumer } from './context'
export default class Uncle extends React.Component {
  render () {
    return (
      <Consumer>
        {(data) => {
          return <div>我是Uncle组件, {data.num}</div>
        }}
      </Consumer>
    )
  }
}

综合案例:B站评论列表

目标

B站评论列表案例拆分成多个组件

思路

  1. 按功能模块拆分组件

    /index.js

    /components/Tabs.js

    /components/Form.js

    /components/List.js

React实现组件通信的方式(react新手必会)

props传递

数据和操作数据的方法都集中在父组件中

React实现组件通信的方式(react新手必会)

tab栏切换功能

目标: 完成tab栏切换功能

步骤

  1. 渲染tab栏
  2. 完成tab栏的切换功能

核心代码

index.js

<Tabs tabs={tabs} active={active} changeSort={this.hChangeSort} />

components/Tabs.js

/* eslint-disable react/prop-types */
import React from 'react'
export default class Tabs extends React.Component {
  render () {
    const { tabs, changeSort, active } = this.props
    return (
      <div className="tabs-order">
        <ul className="sort-container">
          {/* 调用回调时,传入item.type */}
          {tabs.map((item) => (
            <li
              onClick={() => {
                changeSort(item.type)
              }}
              className={item.type === active ? 'on' : ''}
              key={item.id}>
              按{item.name}排序 - {item.type}
            </li>
          ))}
          {/* <li className="on">按  热度  排序</li>
            <li>按  时间   排序</li> */}
        </ul>
      </div>
    )
  }
}

评论列表展示-父传子

目标: 通过父传子的方式实现评论列表的展示

步骤

  1. 父组件通过父传子的方式把list传递给子组件
  2. 子组件渲染评论列表案例

核心代码

/* eslint-disable react/prop-types */
import React from 'react'
export default class Tabs extends React.Component {
  render () {
    // eslint-disable-next-line react/prop-types
    const { list, hChangeAttitude, hDel } = this.props
    return (
      <div className="comment-list">
        {list.map((item) => (
          <div key={item.id} className="list-item">
            <div className="user-face">
              <img className="user-head" src={item.img} alt="" />
            </div>
            <div className="comment">
              <div className="user">{item.author}</div>
              <p className="text">{item.comment}</p>
              <div className="info">
                <span className="time">{item.time}</span>
                {/* 喜欢 */}
                <span
                  onClick={() => {
                    hChangeAttitude(item.id, 1)
                  }}
                  className={item.attitude === 1 ? 'like liked' : 'like'}>
                  <i className="icon" />
                </span>
                {/* 不喜欢 */}
                <span
                  onClick={() => {
                    hChangeAttitude(item.id, -1)
                  }}
                  className={item.attitude === -1 ? 'hate hated' : 'hate'}>
                  <i className="icon" />
                </span>
                <span
                  className="reply btn-hover"
                  onClick={() => {
                    hDel(item.id)
                  }}>
                  删除
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }
}
​

添加评论-子传父

目标: 完成评论添加功能

步骤:

  1. 子组件以受控组件的方式获取评论内容
  2. 子组件通过子传父的方式将评论内容传递给父组件
  3. 父组件接收到评论内容,并且添加评论内容

核心代码

  • 子组件核心代码
/* eslint-disable react/prop-types */
import React from 'react'
export default class Form extends React.Component {
  state = {
    content: ''
  }
​
  hChangeText = (e) => {
    // console.log(e.target.value)
    this.setState({
      content: e.target.value
    })
  }
​
  hAdd = () => {
    this.props.hAdd(this.state.content)
    this.setState({ content: '' })
  }
​
  render () {
    const { content } = this.state
    const { avatar } = this.props
    return (
      <div className="comment-send">
        <div className="user-face">
          <img className="user-head" src={avatar} alt="" />
        </div>
        <div className="textarea-container">
          <textarea
            cols="80"
            rows="5"
            placeholder="发条友善的评论"
            className="ipt-txt"
            onChange={this.hChangeText}
            value={content}
          />
          <button onClick={this.hAdd} className="comment-submit">
            发表评论
          </button>
        </div>
        <div className="comment-emoji">
          <i className="face" />
          <span className="text">表情</span>
        </div>
      </div>
    )
  }
}
​

父组件核心代码

{/* 添加评论 */}
<Form avatar={avatar} hAdd={this.hAdd} />
​
  hAdd = (comment) => {
    // 添加content到list
    const newList = [
      {
        id: Date.now(),
        author: '小花',
        comment,
        time: new Date().toString(), // todo:格式化
        img: avatar,
        attitude: 0
      },
      ...this.state.list
    ]
    this.setState({
      list: newList
    })
  }