react 中的 createRef，createContext，forwardRef

系统管理员 2024-04-19 10:45 36阅读 0赞

#### createRef ####

react 即将抛弃 `<div ref = 'myDiv' />`这种 `string ref`的用法，将来只能使用俩种方式来使用 ref

class App extends React.Component{ 
    	constructor(){ 
    		this.ref = React.createRef()
    	}
    	render(){ 
    		return <div ref = { this.ref} />
    		//or
    		return <div ref = { (node) => this.funRef = node} />
    	}
    }

#### createContext ####

`createContext`是官方定稿的 context 方案，老的`context API`都是 React 不推荐的 API，现在新的 API 释出。

const { Provider,Consumer} = React.createContext('defaultValue')
    const ProviderComp = (props) => (
    	<Provider value = { 'realValue'}>
    		{ props.children}
    	</Provider>
    )
    const ConsumerComp = () => (
    	<Consumer>
    		{ (value) => <p>{ value}</p>}
    	<Consumer>
    )

#### forwardRef ####

`forwardRef`是用来解决 HOC 组件传递 ref 的问题的，HOC 是 `Higher Order Component`，比如使用`redux`时，我们用`connect`来给组件绑定需要的`state`，这其中其实就是给我们的组件在外部包了一层组件，然后通过`...props`的方式把外部的`props`传入到实际组件。

const TargetComponent = React.forwardRef((props,ref) => { 
    	<TargetComponent ref={ ref} />
    })

> 这时候，如果使用`string ref`就没法当做参数传递了，所以提供`createRef`作为新的 ref 使用

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 React中的路由配置。 react-router-dom

（1）安装： > npm install react-router-dom --save // 安装路由（2）找到根组件App.js文件： //

小灰灰/ 2023年05月29日 03:35/ 0 赞/ 1 阅读

相关 React中ref的使用

一、类式组件使用Ref 1、字符串 Refs > 官方目前`不推荐使用`这种方式创建Ref，因为这种方式存在一些问题，影响效率，可能会在后续版本移除 step

ゝ一世哀愁。/ 2022年11月15日 11:29/ 0 赞/ 256 阅读

相关 React-Native中导航组件react-navigation的使用

写在开头的话最近使用React-Native开发新应用，一开始使用的导航器是navigator，后来发现navigator有很多不足之处，而且官方也建议使用react-

Myth丶恋晨/ 2022年06月10日 12:35/ 0 赞/ 522 阅读

相关 React实战-React中this的用法

Javascript中的this是一个令人讨厌的东西，对于有着面向对象编程经历的程序员来说更是如此，那么在ReactJs中，this是如何使用的呢。 Javascript从出

墨蓝/ 2022年06月10日 07:09/ 0 赞/ 307 阅读

相关 React中的DVA（1）

注：本文所有内容都参考自Ant Design 团队的官方教程，只是部分改动与精炼，特此申明！ 0. DVA的简单介绍 ![watermark_type_ZmF

古城微笑少年丶/ 2022年04月18日 06:33/ 0 赞/ 376 阅读

相关 React中的DVA（2）

注：本文所有内容都参考自Ant Design 团队的官方教程，只是做了部分改动与精炼，特此申明！在前面的章节中，我们体验了 model 的使用。如果说 model

Bertha 。/ 2022年04月17日 01:06/ 0 赞/ 225 阅读

相关 React -- react中关于构造函数中super(props)的问题

用react开发有一段时间了，有一个疑惑，为什么构造函数中需要写super(props)？第一种情况，假如我们不写会怎么样？ import React, { Co

约定不等于承诺〃/ 2022年04月05日 05:00/ 0 赞/ 273 阅读

相关 react中的坑

1.state的异步更新有时候更新数据，state不会立即更新，但又无法阻止后续操作进行，所以有时候很蛋疼。如何解决？可以使用回调函数的形式。 t

- 日理万妓/ 2022年01月19日 21:09/ 0 赞/ 239 阅读

相关 React 中的setState

React 中的setState(arg1,arg2)异步操作 arg1可传入两种参数: 一种是对象 this.setState({ isAu

た入场券/ 2021年09月18日 16:00/ 0 赞/ 405 阅读

相关 react-native 中的 react-navigation 身份验证流程

react-native 中的 react-navigation 身份验证流程如何实现登录功能当用户第一次打开 APP 时将会进入到登录页面，在此页面输入正确的用户名

Love The Way You Lie/ 2021年09月08日 15:06/ 0 赞/ 515 阅读