详解React中的ref和context

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 <div ref={this.myRef} />;
  }
//如果要获取组件的的相关状态怎么办？
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) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

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

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

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

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

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

参考文献：React官网

详解React中的ref和context

猜你喜欢