2.1-组件之间数据传递

Create by fall on 2021-11-12
Recently revised in 2022-06-15

组合，继承

包含关系

就是可以把标签内的数据直接传递给 prop 中特定的值，children ，React 定义的标签，如果存在

function MsgContainer(props){
  return (
    <div>
      <span>下面会出现一段话：</span>
      {props.children}
    </div>)
}
// 组件之间的内容，会默认地被 props.children 所接收，无论是标签还是其他的表达式
function App(){
  return(<MsgContainer>
      <h1>这是啥？</h1>
    </MsgContainer>)
}

prop

因为 react 没有“插槽”（slot）的概念，但在 React 中没有“插槽”这一概念的限制，因为本质是对象，所以你可以将任何组件作为 props 进行传递。

传输子组件的话，直接就当做 prop 传入就行了

// function 式语法
function MsgContainer(props){
  return (<div>
      <span>下面会出现一段话：</span>
      {props.top}
    </div>)
}
function App(){
  return(<MsgContainer top={<TopButton/>}>
    </MsgContainer>)
}

Context

应用场景：多层组件通信

无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。一般会在主题颜色时使用。

注意事项：由于更新的时候，每一次都是根据引用标识来决定何时进行渲染，本质上是 value 属性值的浅比较，因此如果传入数据都是对象的形式，会导致额外的渲染，所以传入的数据，应该为 this.state.value

useContext

import React, { useContext } from 'react'
const Context = React.createContext({ age: 22, name: '咯嗷嗷嗷' })
const DemoContext = () => {
  const value: any = useContext(Context)
  /* my name is alien */
  return <div> my name is {value.name}</div>
}
/* 用Context.Consumer 方式 */
const DemoContext1 = () => {
  return <Context.Consumer>
    {/*  my name is alien  */}
    {(value) => <div> my name is {value.name}</div>}
  </Context.Consumer>
}
export default () => {
  return <div>
    <Context.Provider value={{ name: 'alien', age: 18 }} >
      <DemoContext />
      <DemoContext1 />
    </Context.Provider>
  </div>
}