【React】react组件传参

【React】react组件传参

一、props:父组件向子组件传参

1、将普通的参数作为props传递

javascript 复制代码
function Child(props: { name: String }) {
  const { name } = props;
  return (
    <div  style={{border:'1px solid'}}>
      <h3>我的子页面</h3>
      {name}
    </div>
  );
}
function App() {
  return (
    <div>
      <h2>标题:父组件向子组件传参</h2>
      <Child name={"我是父组件传过来的参数"} />
    </div>
  );
}

2、将jsx作为props传递(组件插槽)

父组件可以向子组件传递一些普通的值以外,还可以传递以下jsx,那这就不得不提到组件插槽

待补充

二、自定义事件:子父组件向父组件传参

待补充

三、context进行多级组件传参

javascript 复制代码
import { createContext,useContext } from 'react';

createContext:在任意组件外调用 createContext 创建一个上下文,createContext 返回一个上下文对象
useContext: 是一个 React Hook,可以让你读取和订阅组件中的 context。

javascript 复制代码
import React, {useContext,createContext } from 'react';
//创建 context对象
//createContext 参数  可以进行初始化操作
const MyContext= createContext(null);

//Child子组件
//const 公共数据 = useContext(Context) 这里的公共数据就是根组件value的值
function Child() {
  const color = useContext(MyContext);
  return <div>
    <h3>我的子页面</h3>
    颜色值是:{color}
    <hr />
    <Child1 />
  </div>
}

//Child1子子组件
//const 公共数据 = useContext(Context) 这里的公共数据就是根组件value的值
function Child1() {
  const color = useContext(MyContext);
  return <div>
    <h3>我的子子页面</h3>
    颜色值是:{color}
  </div>
}

function App() {
  return (
    // value={ 这里放要传递的数据 }
    <MyContext.Provider value={"yellow"}>
      <div>
        <h2>useContext</h2>
        <Child />
      </div>
    </MyContext.Provider>
  )
}
export default App;

结论:

  • Child和Child1都拿到了"yellow"
  • useContext会在context值变化时重新渲染,<MyContext.Provider>的value发生变化时,包裹着的子组件无论是否使用value值,都会重新渲染。
    可以使用memo对未使用value的子组件进行优化,在组件更新的时候memo会检测自身包裹的组件是否有数据更新,如果没有,就会阻止自身组件的重新渲染,减少性能损耗。

四、redux全局状态管理

待补充

相关推荐
待磨的钝刨2 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端