React实现组件通信的方式(react新手必会)
站长
· 阅读数 21
组件通讯
- 组件通讯介绍以及为什么要有组件通讯
- 组件的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组件通讯的三种方式
内容
- 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。
- 在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。
- 而在这个过程中，多个组件之间不可避免的要共享某些数据
- 为了实现这些功能，就需要
打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。
三种方式
- 父子组件之间
- 兄弟组件之间
- 跨组件层级
总结
组件中的状态是私有的，也就是说，组件的状态只能在组件内部使用，无法直接在组件外使用。
其与外界沟通。这个过程就是组件通讯
props基本使用
目标
掌握props的使用语法，能将数据从父组件传给子组件
步骤
- 父组件使用子组件时，传入自定义属性
- 子组件内部接收属性
格式
父组件-传入数据
<子组件 自定义属性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的特点，知道什么是单向数据流
内容
-
- 可以传递任意数据
-
- 只读的
-
- 单向数据流
可以传递任意数据
props可以传递：数字， 字符串， 布尔类型， 数组， 对象， 函数， jsx
props 是只读对象
只能读取对象中的属性，无法修改
this.props.age =20 // 错误
单向数据流
也叫做：自上而下的数据流
- 父组件中的数据可以通过 props 传递给子组件，并且，当父组件中的数据更新时，子组件就会自动接收到最新的数据
- 父组件的数据更新会流动到子组件，不能反过来，子组件直接去修改父组件的数据
- 类比：就像瀑布的水一样只能从上往下流动，并且，当上游的水变浑浊，下游的水也会受到影响
props的children属性
目标
掌握props中children属性的用法
children属性
- children属性：表示该组件的子节点，只要组件有子节点，props就有该属性
- children 属性与普通的props一样，值可以是任意值（文本、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>
}
组件通讯-父传子典型应用
目标
如下图示中：
- 有4个组件，最外层是父组件，内部有三个子组件。
- 列表数据（共有三条）定义在父组件中。
请完成：
- 定义子组件，接收父组件传递的数据并渲染
基础代码
文件目录
- 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>
)
}
组件通讯-子传父
目标
能够将子组件的数据传递给父组件
思路
利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
步骤
-
父组件
- 定义一个回调函数f（将会用于接收数据）
- 将该函数f作为属性的值，传递给子组件
-
子组件
- 通过 props 获取f
- 调用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>
)
}
小结
子传父：在子组件中调用从父组件中定义的方法，并根据需要传入参数
组件通讯-子传父典型应用
目标
在上面的案例的基础上，给子组件增加一个功能： 增加数量
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>
)
}
}
组件通讯-兄弟组件
目标： 能够理解什么是状态提升，并实现兄弟组件之间的组件通讯
问题导入
思路
-
将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
-
思想：状态提升
-
公共父组件职责：
- 提供共享状态
- 提供操作共享状态的方法
-
要通讯的子组件只需通过 props 接收状态或操作状态的方法
核心代码
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实现跨级组件通讯
基本素材代码结构
-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>
}
}
思路
使用Context（上下文）的步骤
共3步：
-
导入并调用createContext方法，从结果中解构出 Provider, Consumer 组件
import { createContext } from 'react' const { Provider, Consumer } = createContext() -
使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据
return ( <Provider value={ 这里放要传递的数据 }> <根组件的内容/> </Provider> ) -
在任意后代组件中，使用第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站评论列表案例拆分成多个组件
思路
-
按功能模块拆分组件
/index.js/components/Tabs.js/components/Form.js/components/List.js
props传递
数据和操作数据的方法都集中在父组件中
tab栏切换功能
目标： 完成tab栏切换功能
步骤
- 渲染tab栏
- 完成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>
)
}
}
评论列表展示-父传子
目标： 通过父传子的方式实现评论列表的展示
步骤
- 父组件通过父传子的方式把list传递给子组件
- 子组件渲染评论列表案例
核心代码
/* 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>
)
}
}
添加评论-子传父
目标： 完成评论添加功能
步骤：
- 子组件以受控组件的方式获取评论内容
- 子组件通过子传父的方式将评论内容传递给父组件
- 父组件接收到评论内容，并且添加评论内容
核心代码
- 子组件核心代码
/* 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
})
}
转载自:https://juejin.cn/post/7160237227841159204