组件通信

• 父子通信，子父通信，非父子通信

父->子通信

• 父组件在子组件标签上绑定要传入的数据(会默认添加到props中)，子组件通过props进行使用

父组件

import React from 'react'
import { useState } from 'react'
import Son from './pages/Son.jsx'export default function App() {const [num, setNum] = useState(100)return (
App
下面是子组件
num}>
)
}

子组件

import React from 'react'export default function Son(props) {return (
Son
从父组件传来的值是：{props.num}
)
}

props详解

1. props是只读对象（readonly）

   • 是自顶向下单向数据流，根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改

2. props可以传递任意数据

   • 数字、字符串、布尔值、数组、对象、函数（多用子向父传值）、JSX（类似于插槽）

父组件

import React,{ useState }  from 'react'
import Son from './pages/Son.jsx'export default function App() {// 数字const [num, setNum] = useState(100)// 字符const [str, setStr] = useState('str')// 布尔const [bool, setBool] = useState(false)// 数组const [list, setList] = useState([1, 2, 3])// 对象const [obj, setObj] = useState({ name: '张三', age: 24 })// 函数const print = () => {return 'print'}// jsxconst jsx = 123return (
App
下面是子组件
num}str={str}bool={bool}list={list}obj={obj}print={print}jsx={jsx}>直接写在标签内的jsx结构，会自动传入到props中的children属性里(或者子组件标签上写children属性，一样的效果)
)
}

子组件

import React from 'react'
// 也可以直接在参数这里解构
export default function Son(props) {let { num, str, bool, list, obj, print, jsx } = propsreturn (
Son
从父组件传来的值是：{num}
从父组件传来的值是：{str}
从父组件传来的值是：{bool ? '是true' : '是false'}
从父组件传来的数组，渲染结果如下
{list.map((item) => (
item}>{item}
))}
从父组件传来的对象，渲染结果如下
{obj.name} --- {obj.age}
从父组件传来的函数，渲染结果如下
{print()}
父组件传来的jsx结构，如下
{jsx}
父组件传过来的jsx结构，如下
{props.children}
)
}

子->父通信

• 也是通过props，通过传递函数进行通信
• 子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数的实参

子组件

import React,{ useState }  from 'react'export default function Son(props) {let [msg, setMsg] = useState('子组件向父组件传递的数据')const sendMsg = () => {props.getMsg(msg)}return (
Son
sendMsg}>点击向父组件传值
)
}

父组件

import React,{ useState } from 'react'
import Son from './pages/Son'export default function App() {let [sonData, setSonData] = useState({})const getMsg = (val) => {console.log(val)setSonData({ ...sonData, msg: val })}return (
App --- {sonData.msg}
getMsg}>
)
}

兄弟组件通信

• 通过状态提升，利用共同的父组件实现兄弟通信
• 兄弟组件A -> 父组件 -> 兄弟组件B

子组件A

import React, { useState } from 'react'export default function SonA(props) {const [msgA, setMsgA] = useState('兄弟组件A传递的数据')const sendB = () => {props.getMsgA(msgA)}return (
Son1
sendB}>点击发送给兄弟组件B
)
}

父组件

import React, { useState } from 'react'
import SonA from './pages/SonA'
import SonB from './pages/SonB'export default function App() {const [msgA, setMsgA] = useState('')// 接收A组件传来的值const getMsgA = (val) => {setMsgA(val)}return (
App
getMsgA}>msgA}>
)
}

子组件B

import React from 'react'export default function SonB(props) {return (
Son2
接收兄弟组件B传来的值为：{props.msgA}
)
}

跨组件通信Context

• 直接在index.js文件中提供数据，则全局都可以使用
  • 适用于只是用1次的静态的数据
• 如果提供的数据需要维护状态，则写到app.js中

使用步骤

1. 首先创建一个独立的文件，Context.js

import { createContext } from 'react'const Context = createContext()export default Context

2. 那个组件需要就直接导入，Provider标签包裹根组件，value提供数据(提供的数据比较多，就可以使用对象形式)

import React, { useState } from 'react'
import Son from './pages/Son'
// 1. 引入Context
import Context from './utils/context'export default function App() {const [msg, setMsg] = useState('根组件传递的数据')return (<>{/* 2. 使用Provider包裹上层组件提供数据 */}msg}>{/* 根组件 */}
App
)
}

3. 数据消费组件，用useContext这个hook，或者通过Consumer标签接收显示数据

使用useContext这个hook

import React, { useContext } from 'react'
import Sun from './Sun'
import Context from '../utils/context'export default function Son() {let val = useContext(Context)return (
Son
从根组件得到的数据 --- {val}
)
}

通过Consumer标签

import React from 'react'
import Context from '../utils/context'export default function Sun() {return (
Sun
从根组件得到的数据：{(value) => {value}}
)
}

组件进阶

children属性

• 表示该组件的子节点，只要组件内部有子节点，props中就有该属性

• children属性，类似于插槽。直接写在标签中的内容会填充到children属性上面

• children可以是普通文本，普通标签元素，函数 / 对象，JSX

• 如果并列的传入多个，props的children属性会变成一个数组(就可以直接进行遍历)

父组件

import React from 'react'
import Son from './pages/Son'export default function App() {return (
App
普通文本：666
普通标签元素
{/* 函数 */}{function fn() {console.log('函数打印')}}{/* JSX结构 */}{
{'这是一个普通的jsx结构'}
}
)
}

子组件

import React from 'react'export default function Son(props) {console.log(props)return (
Son
{props.children[0]}
{props.children[1]}{props.children[2]()}{props.children[3]}
{props.children.map((item) => {return item})}
)
}

props校验

1. 下载 prop-types 插件 ，并导入prop-types包 yarn add prop-types
2. 使用 组件名.propsTypes = { } 来给组件的props中的数据添加校验规则
3. 校验规则通过PropTypes对象来指定

检验基本语法

组件名.prototype = {
属性名 : PropTypes.XXX,
}

• PropTypes是引入的prop-types插件的实例

设置默认值

组件名.defaultProps= {
属性名 : 默认值,
}

• 或者在参数上直接给默认值

父组件

import React, { useState } from 'react'
import Son from './pages/Son'export default function App() {const [list] = useState([{id: 0,name: '张三',},{id: 1,name: '李四',},])const [obj] = useState({name: '王五',age: 24,})return (
App
list} score={100} obj={obj}>
)
}

子组件

import React from 'react'
import PropTypes from 'prop-types'export default function Son(props) {let { list, score, obj } = propsreturn (
Son
{list.map((item) => (
item.id}>{item.name}
))}
成绩是：{score}
姓名：{obj.name}
年龄：{obj.age}
)
}// 对传过来的值进行校验
Son.propTypes = {list: PropTypes.array.isRequired,// 也可以自定义校验规则  peops是所有接收过来的数据，propsName是字段名，componentName组件名score: function (props, propsName, componentName) {if (props[propsName] < 60) {return new Error('成绩不合格')}},obj: PropTypes.shape({name: PropTypes.string,age: PropTypes.number,}),
}// 设置默认值
Son.defaultProps = {list: [],score: 100,
}

常见规则

• 常见类型: array bool func number object string
• React元素类型(JSX): element
• 是否必填: isRequired
• 特定结构的对象: shape({ }) 也就是指定对象里面字段的规则，可以指定一个，也可以指定多个

// 特定结构的对象
obj: PropTypes.shape({name: PropTypes.string,age: PropTypes.number,
}),

• 也可以自定义校验规则(见上面的例子)

Hook

useState

• useState(初始值)返回值是一个数组（里面有两项）
• [数据，修改数据的方法] 是对 useState进行结构。把里面的两项分别结构出来

格式：

let/const [ 数据 ，修改数据的方法 ] = useState(默认值)

eg:

import React from 'react'
import { useState } from 'react'export default function App() {const [count, setCount] = useState(0)console.log(useState(0)) // (2) [0, ƒ]const add = (num) => {let newCount = count + numsetCount(newCount)}return (
App --- {count}
() => add(1)}>+1
)
}

函数做为参数

• useState 中也可以传入一个函数做为参数(初始值可能需要经过一些计算而得)
• 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

格式：

const [name, setName] = useState(()=>{

// 编写计算逻辑 return ‘计算之后的初始值’

})

eg:

父组件

import React from 'react'
import { useState } from 'react'
import Son from './pages/Son'export default function App() {const [count, setCount] = useState(0)const countEdit = (num) => {setCount(num)}return (
App
() => countEdit(10)}>10() => countEdit(20)}>20count}>
)
}

子组件

import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'export default function Son(props) {const [c, setc] = useState(() => props.count)useEffect(() => {setc(props.count)}, [props])return (
Son -- {c}
)
}

useEffect

• useEffect函数的作用就是为react函数组件提供副作用处理的
• useEffect都是在组件dom渲染更新完毕之后才执行的

副作用

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）

常见的副作用

1. 数据请求 ajax发送
2. 手动修改dom
3. localstorage操作

执行时机

1.不添加依赖项

• 组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行
  1. 组件初始渲染
  2. 组件更新 （不管是哪个状态引起的更新）

useEffect(()=>{console.log('副作用执行了')
})

2. 添加空数组

• 组件只在首次渲染时执行一次

useEffect(()=>{console.log('副作用执行了')
},[])

3. 添加特定依赖项

• 副作用函数在首次渲染时执行，在依赖项发生变化时重新执行
  1. 组件初始渲染
  2. 依赖项发生变化时

function App() {  const [count, setCount] = useState(0)  const [name, setName] = useState('zs') useEffect(() => {    console.log('副作用执行了')  }, [count])  return (    <>      () => { setCount(count + 1) }}>{count}      () => { setName('cp') }}>{name}      )
}

注意事项

• useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

清除副作用

• 在组件被销毁时，如果有些副作用操作需要被清除(比如定时器)

语法：

useEffect(() => {

​ // 副作用操作…

​ return () => {

​ // 写清除副作用的代码

​ }

})

eg: 清除定时器案例

父组件

import React from 'react'
import { useState } from 'react'
import Son from './pages/Son'export default function App() {const [flag, setFlag] = useState(true)return (
App
() => setFlag(!flag)}>显示/隐藏组件{flag && }
)
}

子组件

import React, { useEffect } from 'react'export default function Son() {// 组件进来的时候触发一个定时器useEffect(() => {let timer = setInterval(() => {console.log('定时器执行了')}, 1000)// 组件销毁时清除定时器return () => {// 在return里面的函数里写清除操作clearInterval(timer)}}, [])return (
Son
)
}

useEffect 发送网络请求

• 依赖项要是一个空数组，因为依赖项为空数组时只会在页面初始化时触发一次

import React from 'react'
import { useEffect } from 'react'export default function App() {const getData = () => {fetch('https://cnodejs.org/api/v1/topics').then((response) => response.json()).then((data) => console.log(data.data))}useEffect(() => {getData()}, [])return (
App
)
}

案例1

• 求卷去头部距离的hook

import { useState } from 'react'export default function useWindowScroll() {const [y, sety] = useState('')window.addEventListener('scroll', function () {sety(this.document.documentElement.scrollTop)})return [y]
}使用
import React from 'react'
import useWindowScroll from './hook/useWindowScroll'export default function App() {const [y] = useWindowScroll()return (
{ height: 1600 }}>
App -- {y}
)
}

案例2

• 数据改变，会同步到本地

import { useEffect, useState } from 'react'export default function useLocalStorage(key, defaultVal) {const [val, setVal] = useState(defaultVal)// 只要val发生变化，就同步到本地useEffect(() => {localStorage.setItem(key, val)}, [val, key])return [val, setVal]
}使用
import React from 'react'
import useWindowScroll from './hook/useWindowScroll'
import useLocalStorage from './hook/useLocalStorage'export default function App() {const [y] = useWindowScroll()const [val, setVal] = useLocalStorage('val', 0)const add = () => {setVal(val + 1)}return (
{ height: 1600 }}>
App -- {y} -- {val}
add}>+1
)
}

useRef

• 可以获取元素的真实Dom

import React, { useEffect, useRef } from 'react'export default function App() {const ipt = useRef(null)useEffect(() => {console.log(ipt.current.value)}, [])return (
App
ipt} />
)
}

useContext

• 传输的数据是响应式的，跨组件传输数据用
• 如果传递的数据，只需要在整个应用初始化的时候传递一次就可以，则可以在index.js文件中提供数据
• 如果传递的数据需要状态维护，则可以在app.js中提供数据

使用步骤

1. 创建一个context的文件
2. 使用createContext创建Context对象，并导出
3. 在顶层组件引入，通过Provider提供数据
4. 在底层组件引入，通过useContext函数获取数据

举例

context.js

import { createContext } from 'react'const Context = createContext()export default Context

上层组件

import React, { useState } from 'react'
import Son from './pages/Son'
// 1. 引入Context
import Context from './utils/context.js'export default function App() {const [msg] = useState('根组件传递的数据')return (<>{/* 2. 使用Provider包裹上层组件提供数据 */}msg}>{/* 根组件 */}
App
)
}

下层组件

import React, { useContext } from 'react'
import Context from '../utils/context.js'export default function Son() {let val = useContext(Context)return (
Son
从根组件得到的数据 --- {val}
)
}

补充

• document.title 可以获取网页最左上的标题