入门React第二天（函数式组件传值）

常规传值

父 =》子

import React, { useState } from 'react'function Child(props) {return <h2>子组件{props.num}</h2>
}
export default function Father() {return <Child num={123}/>
}

子 =》父

function Child(props) {return (<><h2>子组件{props.num}</h2><button onClick={()=>props.changeNum(321)}></button></>)
}
export default function Father() {const [num, setNum] = useState(123)// 提供给子组件用来修改 num 的函数const changeNumFn = (num) => setNum(num)return <Child num={num} changeNumFn={changeNum}/>
}

跟 Vue 不同的地方是：

父传子没太大区别
子传父：
- Vue 是通过触发器将值传出，父组件对子组件进行监听
- React 是将处理函数传递给子组件

跨代传值

import React, { useState, createContext } from 'react'// 创建上下文空间 （Provider 提供者，Consumer 消费者）
const NumContext = createContext()function Child() {return (<NumContext.Consumer>{({num, setNum})=>{return (<><h2>子组件{num}</h2><button onClick={()=>setNum(456)}>修改Num</button></>)}     }</NumContext.Consumer>)
}const Father() => <Child />// 顶级组件
export default function App() {const [num, setNum] = useState(123);return (<NumContext.Provider value={{num, setNum}}><Father></NumContext.Provider>)
}

可以使用 hooks 优化

import React, { useState, createContext, useContext } from 'react'// 创建上下文空间 （Provider 提供者，Consumer 消费者）
const NumContext = createContext()function Child() {const { num, setNum } = useContext(NumContext);return (<><h2>子组件{num}</h2><button onClick={()=>setNum(456)}>修改Num</button></>)
}const Father() => <Child />// 顶级组件
export default function App() {const [num, setNum] = useState(123);return (<NumContext.Provider value={{num, setNum}}><Father></NumContext.Provider>)
}

入门React第二天（函数式组件传值）相关推荐

react函数式组件传值之父传子
今天我们主要说下react函数式组件如何进行父组件向子组件传值.在开发过程中,为了提高可读性或者复用性,我们会进行组件的拆分.先说下,我们在引入子组件时,子组件的名字一定要大写,否则会报错(这是个ba ...
react讲解（函数式组件，react hook）
文章目录前言一.函数式组件理解: 作用代码示例: 函数组件注意事项二.React hook React Hooks 优势 Hook 使用规则 2.常用的hook useState useEf ...
为什么react选择了函数式组件（剖析原理）
不好意思,这是知乎上我写的文章,就不再csdn发布了.如果需要阅读,请点击: 为什么react选择了函数式组件(剖析原理) 最近,发现知乎的连接出问题了,所以,暂时把内容放在此处.如果知乎上好了的话, ...
react梳理之函数式组件
函数式组件的基本意义就是,组件实际上是一个函数,不是类一.react的类组件前端概念中的类前端中实际上是没有类也没有继承的,但是我们后来也有了前端独有的一种类的模式,实际上我们都知道是语法糖 c ...
React 学习之父子组件传值
父组件可以通过props.原型方法向子组件通信,子组件可以通过回调函数.事件冒泡向父组件通信. 1. 父组件向子组件通信父组件向子组件传值之props方法: 父组件 import React fro ...
react中类组件传值，函数组件传值：父子组件传值、非父子组件传值
父子组件传值.非父子组件传值: 类组件传值父子组件传值子传父: 子组件:事件的触发sendMsg=()=>{this.props.person();}父组件:<Child per ...
第一章：Reac入门与第二章：React面向组件编程
目录一.jsx语法规则二.React中定义组件 1.函数式组件: 2.类式组件:*有关类复习的知识点前往React知识铺垫查看https://blog.csdn.net/m0_61927991/a ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...

入门React第二天（函数式组件传值）

常规传值

跨代传值

可以使用 hooks 优化

入门React第二天（函数式组件传值）相关推荐

最新文章

热门文章