搜索引擎排名优化包括哪些方面_云开发低码_免费b站推广网站链接_公司推广策划方案

1、Context 使用creatContext() 和 useContext() Hook 实现多层级传值

概述：
在我们想要每个层级都需要某一属性，或者祖孙之间需要传值时，我们可以使用 props 一层一层的向下传递，或者我们使用更便捷的方案，用 creatContext() 和 useContext() 进行隔代之间传值，这种情况下，我们只需要在使用的组件中书写，而不用每一层级都进行书写；

使用中注意事项：
a、必须使用 Provider 组件，必须使用 value 接收要传递的 属性：
b、下级会向上找最近 的 Provider 获取其传入的 value
c、传入的 value 可以是任意类型的属性

extport default function MyPar(){return(<><MyCom.Provider value={属性}></MyCom.Provider></>)
}

1.1、基本用法实现上下级数据共享

首先创建通用 ComContext文件

import { createContext } from "react";
// 创建一个 UserInfoContext 组件
export const UserInfoContext = createContext()

其次创建最终使用组件 UserInfo

import {useContext} from 'react'
import { UserInfoContext } from './ComContext'
export default function UseInfo() {// 通过 useContext Hook 接收上级 UserInfoContext 传入的内容，总是获取距离最近的 Provider 的 value 值const userInfo = useContext(UserInfoContext)console.log('==userInfo===', userInfo)return (<div><h3>用户信息</h3><p>名称：{userInfo.name}</p><p>年龄：{userInfo.age}</p></div>)
}

最后在父组件中调用上面两个组件

import { UserInfoContext } from './ComContext'
import UseInfo from './UseInfo'
export default function MyContext2() {const userInfo = {name: 'Andy',age: 18}return (<><h2>第一级：</h2>{/* 将普通对象传给下级 */}<UserInfoContext.Provider value={userInfo}>{/* 这里 不管写多少个 UseInfo 组件，都可以接收到 传入的 userInfo 对象 */}<UseInfo></UseInfo><UseInfo></UseInfo><UseInfo></UseInfo></UserInfoContext.Provider></>)
}

1.2、Context 与 useState() 使用

通过 useState() 动态修改 userInfo 数据，

import { useState} from 'react'
import { UserInfoContext } from './ComContext'
import UseInfo from './UseInfo'
export default function MyContext2() {const [userInfo, setUseInfo] = useState({name: 'Andy',age: 18})const hanldeChangeUserInfo = () => {setUseInfo({...userInfo, name: `${userInfo.name} + 1`})}return (<><h2>第一级：</h2><button onClick={hanldeChangeUserInfo}>修改name</button><UserInfoContext.Provider value={userInfo}>{/* 在下级接收的 userInfo 会实时更新 */}<UseInfo></UseInfo></UserInfoContext.Provider></>)
}

未完待续