详解React中的ref和context

发布于:2021-06-11 03:44:26

React中的ref和context
前端设计到的两个重要问题:变化和异步。这两个总结起来就是:前端的状态管理。
状态管理主要分为三个方面的问题:


输入====》状态====》输出


前端的状态管理有很多解决方案。无非就是一点,如何有逻辑、有层次地管理前端的状态。(毕竟,要实现一个功能很简单,如果瀑布流的代码编程,给代码维护者是一种灾难。)
本文重点讲述React中的状态管理。react组件的状态,主要由两个参数决定,state和props,最好的组件设计方式是,组件的输出只和props相关,就是函数式组件。(不多讲了)
对于编程人员,从程序的角度,经常用到的是:
1、获取组件的内部参数
2、跨组件传递参数
React中通过层层回调函数当然可以实现上面的功能,但是React还提供了其他的方式。



1、ref
官方解释


Refs provide a way to access DOM nodes or React elements created in the render method.

翻译:refs提供了获取DOM节点或者在React组件中创建的元素。
众所周知,在组件渲染完成之前获取DOM,是获取不到的,因为组件还没有加载到页面上,只有在componentDidUpdate或者componentDidiMount之后才能获取到。
refs的使用方式


//一般在构造函数中声明
constructor(props) {
super(props);
this.myRef = React.createRef();
}
//传递给子组件
render() {
return

;
}
//如果要获取组件的的相关状态怎么办?
this.myref.current,就可以了

那么取到的值是哪个?
1)如果传递给html元素,那么取到的就是ihtml元素
2)如果是自定义组件,那就是装载后(mount)的实例
还有另一种写法:
ref=“字符串“的形式,存在一些问题ref问题
当然ref除了传递字符串之外,还可以传递callback函数
就像正常传递一样,但是callback函数会
在component装载之后,componentDidMount之前调用,
在componentDidUnmounted之后调用为null,
所以会调用两次
那么子组件怎么获得callback呢?
React.forwardRef


const FancyButton = React.forwardRef((props, ref) => (

));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
ref}>Click me!;
像传递callback和props传递callback有什么区别呢?

区别在于:ref不会当作props传递下去,只会在最外层
所以通常会用在HOCs中。
注意:对函数组件没有用处
总的来说,ref对于组件来说,就是函数的中的key:value



2、context
为了避免在层层组件中传递参数
API


React.createContext:创造全局的context变量
const {Provider, Consumer} = React.createContext(defaultValue);
Provider:用来包裹consumer的
/* some value */}>
consumer:获取context的值,返回一个React的组件

{value => /* render something based on the context value */}

使用起来就是,
1、创建context变量
2、使用provider包裹consumer组件


参考文献:React官网

相关推荐

最新更新

猜你喜欢