详解React中的ref和context

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

1
2
3
1               输入====》状态====》输出

2

3

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

1、ref
官方解释

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

2

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

1
2
3
4
5
6
7
8
9
10
11
12
1//一般在构造函数中声明

2constructor(props) {

3    super(props);

4    this.myRef = React.createRef();

5  }

6//传递给子组件

7render() {

8    return <div ref={this.myRef} />;

9  }

10//如果要获取组件的的相关状态怎么办？

11this.myref.current，就可以了

12

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

1
2
3
4
5
6
7
8
9
10
11
1const FancyButton = React.forwardRef((props, ref) => (

2  <button ref={ref} className="FancyButton">

3    {props.children}

4  </button>

5));

6

7// You can now get a ref directly to the DOM button:

8const ref = React.createRef();

9<FancyButton ref={ref}>Click me!</FancyButton>;

10像传递callback和props传递callback有什么区别呢？

11

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

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

1
2
3
4
5
6
7
8
9
1React.createContext:创造全局的context变量

2     const {Provider, Consumer} = React.createContext(defaultValue);

3Provider：用来包裹consumer的

4    <Provider value={/* some value */}>

5consumer：获取context的值，返回一个React的组件

6    <Consumer>

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

8</Consumer>

9

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

参考文献：React官网