React应用数据传递的方式
1. props属性
典型的React应用,数据通过props按照自上而下(父->子)的顺序传递数据。
2. Context传值
1. 应用场景
对于一些应用中全局性的属性(如UI主题、语言、登陆用户等),通过props传递会很繁琐。
Context的出现可以在组件之间(父->子)共享这些属性。
2. 使用方法
1. 创建Context对象(写入一个单独的文件)
const ThemeContext = React.createContext(defaultValue)
const ThemeContext = React.createContext({
theme: themes.dark,
changeTheme: () => {}
});
2. 使用Provider提供数据,数据可以是原始类型,也可以是对象;
可以是常量也可以是变量;
注意: 如果是对象,通过state值传入,否则每次渲染都是新的对象。
<ThemeContext.Provider value={this.state}>
<Toolbar />
</ThemeContext.Provider>
3. 使用Consumer获取数据
<ThemeContext.Consumer>
{({theme, changeTheme}) => <div style={{background: theme.backgroundColor}}>
<button onClick={changeTheme}>切换主题</button>
</div>}
</ThemeContext.Consumer>
4. 也可以通过赋值静态属性contextType后,通过this.context获取值
static contextType = ThemeContext;
render() {
return (
<div style={{background: this.context.theme.backgroundColor}}>
<button onClick={this.context.changeTheme}>切换主题</button>
</div>
3. createRef API生成的Refs(React V16.3+)
将ref自动的通过组件传递到子组件。然后通过ref获取子组件的DOM。
1. Refs应用场景
1. 对于那些高可复用的,诸如<Button><SelectInput>等“叶”组件,经常会需要获取
DOM节点,实现管理焦点、文本选择、播放动画等。
2. 对于触发强制动画。
3.对于集成第三方DOM库。
注意: 高级组件不能通过属性转发ref
2. 访问ref的current属性
1. 对于HTML元素,current属性指向底层的DOM元素。
2.对于class组件元素,current属性指向组件的实例对象(即this)。
这样可以在父组件中,通过this.ref.current调用子组件的实例方法
class App extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componnetDidMount() {
// this.ref.current指向子组件的实例对象this
this.ref.current.resetData()
}
render() {
// 只能是类子组件
return <Child ref={this.ref}>
}
} class Child extends React.Component {
resetData = () => {
// TODO
}
render() {
return <div></div>
}
}
3. 不能在函数组件上使用ref,因为它没有实例。
function FunComponent(props) {
return <div></div>
}
// 错误!函数组件上不能使用ref属性
<FunComponent ref={this.myref}/>
但是可以在函数组件内部使用,只要它指向DOM或者类组件。
function CustomTextInput(props) {
// 这里必须声明 textInput,这样 ref 才可以引用它
let textInput = React.createRef();
function handleClick() {
textInput.current.focus();
}
return (
<div>
<input
type="text"
ref={textInput} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
3. Refs转发方法
1. 非高阶组件转发
class App extends React.Component{
constructor(props) {
super(props);
this.ref = React.createRef(); //初始化一个变量
}
componentDidMount() {
console.log(this.ref.current); // <div id="toolbar">Toolbar</div>
}
render() {
return (
<div>
<Toolbar ref={this.ref} />
<div>App</div>
</div>
)
}
}
// 传递到子组件后给其赋值
const Toolbar = React.forwardRef((props, ref) => (
<div ref={ref} id="toolbar">
Toolbar
</div>
));
2. 高阶组件转发refs
当使用{...this.props}进行透传时,因为ref不是属性,所以不能通过其透传。
但是可以在高阶组件内部,通过React.forwardRef()进行转发。
// 高阶组件代码
function logProps(WrappedComponent) {
class LogProps extends React.Component {
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('prevProps-->',prevProps)
console.log('this.props-->',this.props)
}
render() {
const {forwardRef, ...rest} = this.props;
// ref指向被包裹的组件
return <WrappedComponent {...rest} ref={forwardRef} />
}
}
return React.forwardRef((props, ref) => {
return <LogProps {...props} forwardRef={ref} />
});
}
export default logProps; // 被包裹组件代码
import React from 'react';
import logProps from './logProps';
class Toolbar extends React.Component {
render() {
return (
<div>Toolbar</div>
)
}
}
export default logProps(Toolbar) // 父组件代码
import Toolbar from './toolbar'; class App extends React.Component{
constructor(props) {
super(props);
this.ref = React.createRef();
this.state = {num: 1}
}
componentDidMount() {
console.log(this.ref.current); //Toolbar
}
add = () => {
this.setState(state => ({
num: state.num + 1
}))
}
render() {
return (
<div>
<Toolbar ref={this.ref} />
<div onClick={this.add}>{this.state.num}</div>
</div>
)
}
}
4. 回调函数Refs
ref还可以接收一个回调函数,作为ref的属性内容。
<div ref={(element) => this.ref = element}></div>
使用回调函数也ref可以获取子组件的DOM节点。
function FunComponent(props) {
return <div ref={props.funRef}>函数组件</div>
}
class App extends React.Component {
componentDidMount() {
// 获取到函数子组件的DOM节点
console.log(this.ref); //<div>函数组件</div>
}
render() {
return(
<FunComponent funRef={(element) => {this.ref = element}} />
)
}
}
React应用数据传递的方式的更多相关文章
- ios应用view之间数据传递的方式
对于不同的viewcontroller之间数据的共享和处理 采用代理的方式,子viewcontroller设计代理协议,并定义协议接口,父viewcontroller实现协议接口,实现子视图控制器退出 ...
- react渲染数据3种方式
直接渲染,()类似于模板字符串,包裹一个dom元素 ReactDOM.render( (<div> <h2>现在时间:{new Date().toLocaleTimeStrin ...
- MVC中Control和View之间数据传递的方式
1:ViewBag和ViewData 具体区别不做讨论,本处只演示ViewData的具体示例: Controler代码:ViewData["Employee"] = emp; Vi ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- react生命周期,中间件、性能优化、数据传递、mixin的使用
https://github.com/lulujianglab/blog/issues/34 一.生命周期 1,初始化的执行顺序,初始生命周期执行过程详解 class initSate extends ...
- Android数据传递,使用广播BroadcastReceiver;
Android数据传递有很多种,Intent意图传递或使用Bundle去传递,接口监听回调传递数据,也可以把数据保存起来,使用的时候去读取等等等...,"当你知道足够多的数据传递的方式之后, ...
- React Native移动开发实战-3-实现页面间的数据传递
React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...
- React学习(2)—— 组件的运用和数据传递
React官方中文文档地址: https://doc.react-china.org/ 了解了组件之后,就需要理解“Props”和“State”的用法.首先来介绍State,State按照字面意 ...
- react之组件数据挂在方式
1.属性(props) 组件间传值,在React中是通过只读属性 props 来完成数据传递的. props:接受任意的入参,并返回用于描述页面展示内容的 React 元素. import React ...
随机推荐
- QT 创建一个线程播放监控视频
1.创建一个线程类(PlayVideoThread): PlayVideoThread.h头文件 #pragma once #include <QObject> #include &quo ...
- (转)FFMPEG类库打开流媒体的方法(需要传参数的时候)
本文链接:https://blog.csdn.net/leixiaohua1020/article/details/14215393 使用ffmpeg类库进行开发的时候,打开流媒体(或本地文件)的函数 ...
- Nginx学习笔记(五):高级数据结构
目录 动态数组 单向链表 双端队列 红黑树 缓冲区 数据块链 键值对 动态数组 ngx_array_t 表示一块连续的内存,其中存放着数组元素,概念上和原始数组很接近 // 定义在 core/ng ...
- 微信小程序DEMO——面包旅行的代码
API 集合在一起写了一个页面,并导出, const apiURL = 'http://xxx.xxxx.com'; const trip = { hot(data,callback){ wx.req ...
- 关于Git无法提交 index.lock的解决办法
今天提交代码时,在一次提交,莫名其妙没成功后,再次用git commit -a命令时,出现以下错误,无论是用git还是TortoiseGit都会出现以下这个问题.. $ git commit -a f ...
- HTML认识一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- ORA-00001:unique constraint violated解决
转自:https://www.2cto.com/database/201211/172340.html ORA-00001:unique constraint violated解决 今天往数据库中插入 ...
- Java软件编码习惯
1.再删除某个类时候,一定别忘记把对应的import也删除掉: 可以手动删除,也可以 Ctrl+Shift+O快捷键自动删除和导入.
- 如何使用python自定义命令
dir.tree.cd等等,都是我们常见的命令.这些命令是开发者开发出来的,如果我们自己想按照自己的想法开发一个命令,应该怎么做呢? 以python语言来实现,问题就是:如何使用python自定义命令 ...
- SQLSEVER刚建表时主键自增
alter table 表名 drop column ID alter table 表名 add ID int identity(1,1)