React@16.3 全新的Context API进阶教程

站长

2024年04月09日 23:35 · 阅读数 58

前言

最近看了下React16.3的新文档，发现官方悄悄地改了很多东西了。其中我最感兴趣的自然就是这个全新的Context API了。所以写了这篇文章来总结分享一下。其他的变动在这篇文章里或许会提及。

本文你可以在我的github上面找到，转载请标注这个地址就行了。

什么是Context API

Context API是React提供的一种跨节点数据访问的方式。众所周知，React是单向数据流的，Vue里面的props也借鉴了这一思想。

但是很多时候，这种单向数据流的设定却变得不是那么友好。我们往往需要从更高层的节点获取一些数据，如果使用传统的prop传递数据，就需要每一层都手动地向下传递。对于层次很高的组件，这种方法十分地烦人，极大地降低了工作效率。

于是，React使用了Context API。Context API存在已久，但是旧的Context API存在很多问题，并且使用起来也并不是特别方便，官方并不建议使用老版本的Context API。于是很多开发者选择了Redux之类的状态管理工具。

受到Redux的影响，React在16.3.0版本中推出了全新的Context API。

一些你需要提前知道的东西

众所周知，长期起来JavaScript一直没有模块系统。nodejs使用require作为弥补方法。ECMAScript6之后，引入了全新的import语法标准。import语法标准有个尤为重要的不同（相比较require），那就是：import导入的数据是引用的。这意味着多个文件导入同一个数据，并不是导入的拷贝，而是导入的引用。
react@16.3的声明文件(d.ts)貌似没有更新，意味着如果你现在使用Typescript，那么可能会报错。
React现在推荐使用render props，render props为组件渲染的代码复用以及代码传递提供了新的思路，其实本质上就是通过props传递HOC函数来控制组件的渲染。
或许你曾经听过“Context API是用来替代Redux”之类的传闻，然而事实并非如此。Redux和Context API解决的问题并不一样，会造成那样的错觉可能是因为他们的使用方法有点儿一样。
React16.3有几个新特性，最主要的变化是Context，还有就是废除了几个生命周期，比如ComponentWillReceiveProps（说实话，实际项目中，这个生命周期完全可以用ComponentWillUpdate来替换）
React16.3中的refs不再推荐直接传递一个函数了，而是使用了全新的React.createRef来替代。当然以前的方法依旧适用，毕竟是为了兼容。

开始使用

React.createContext

createContext用来创建一个Context，它接受一个参数，这个参数会作为Context传递的默认值。需要注意的是，如果你传入的参数是个对象，那么当你更改Context的时候，内部会调用Object.is来比较对象是否相等。这会导致一些性能上的问题。当然，这并不重要，因为大部分情况下，这点儿性能损失可以忽略。

我们看下这个例子，这是一个提供主题（Light/Dark）类型的Context。

// context.js
import * as React from 'react';
// 默认主题是Light
export const { Provider, Consumer } = React.createContext("Light");

接下来我们只需要在需要的文件里import就行了

Provider

Provider是需要使用Context的所有组件的根组件。它接受一个value作为props，它表示Context传递的值，它会修改你在创建Context时候设定的默认值。

import { Provider } from './context';
import * as React from 'react';
import { render } from 'react-dom';
import App from './app';


const root = (
    <Provider value='Dark'>
        <App />
    </Provider>
);

render(root, document.getElementById('root'));

Consumer

Consumer表示消费者，它接受一个render props作为唯一的children。其实就是一个函数，这个函数会接收到Context传递的数据作为参数，并且需要返回一个组件。

// app.jsx

import { Consumer } from './context';
import * as React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <Consumer>
                {
                    theme => <div>Now, the theme is { theme }</div>
                }
            </Consumer>
        )
    }
}

一些需要注意的地方

多层嵌套

Context为了确保重新渲染的快速性，React需要保证每个Consumer都是独立的节点。

const ThemeContext = React.createContext('light');
const UserContext = React.createContext();

function Toolbar(props) {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;

    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Toolbar />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}

当层次更加复杂的时候，会变得很烦人。因此推荐当层次超过两层之后，创建一个自己的render prop或许是个不错的主意。在实际工程中，其实并不建议多层嵌套。更为适合的时，提供一对Provier和Consumer对，传递状态管理工具对应的实例就行了。

在生命周期中使用

在之前的Context API中，在一些声明周期中会暴露一个context的参数，以供开发者更为方便的访问。新版API并没有这个参数传递了，更为推荐的方式是直接把Context的值通过props传递给组件。具体来说，就像下面这个官方的例子这样。

class Button extends React.Component {
  componentDidMount() {
    // ThemeContext value is this.props.theme
  }

  componentDidUpdate(prevProps, prevState) {
    // Previous ThemeContext value is prevProps.theme
    // New ThemeContext value is this.props.theme
  }

  render() {
    const {theme, children} = this.props;
    return (
      <button className={theme ? 'dark' : 'light'}>
        {children}
      </button>
    );
  }
}

export default props => (
  <ThemeContext.Consumer>
    {theme => <Button {...props} theme={theme} />}
  </ThemeContext.Consumer>
);

不像以前那样，可以直接通过this.context访问，新版本的Context只能在render方法里面访问。因为Context只暴露在Consumer的render prop里面。个人觉得这是这个版本API的一个缺点。所以只有采用上面这种折中的方式，再包装一个函数组件来封装到props里面去。相比较而言，还是麻烦了一点儿。在组件树里面多了一个函数组件，也是一个缺点。

Consumer封装

当一个Context的值多个组件都在使用的时候，你需要手动地每次都写一次Consumer和redner prop。这是很烦的，程序员都是很懒的（至少我是这样），因此这个时候利用一下React的HOC来封装一下来简化这个过程。

const ThemeContext = React.createContext('light');

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme} {...props} />}
    </ThemeContext.Consumer>
  );
}

接下来，当你需要使用Context的时候，就不需要在写什么Consumer了

export default props => (
    ThemeButton(props)
);

转发refs

当你封装完一个Consumer之后，或许你想要用ref来获取Consumer里面根组件的实例或者对应的DOM。如果直接在Consumer上使用ref，是得不到想要的结果的。于是在React16.3里面，使用了一种全新的技术（不确定是不是16.3才引入的），叫做转发refs 。不仅仅用在Context里面，实际上，在任何你想要把ref传递给组件内部的子组件的时候，你都可以使用转发refs。

具体来说，你需要使用一个新的API：React.forwardRef((props, ref) => React.ReactElement)，以下面这个为例：

class FancyButton extends React.Component {}

// Use context to pass the current "theme" to FancyButton.
// Use forwardRef to pass refs to FancyButton as well.
export default React.forwardRef((props, ref) => (
  <ThemeContext.Consumer>
      {
        theme => (
            <FancyButton {...props} theme={theme} ref={ref} />
        )
      }
  </ThemeContext.Consumer>
));

React.forwardRef()接受一个函数作为参数。实际上，你可以将这个函数当做一个函数组件，它的第一个参数和函数组件一样。不同的地方在于，它多了一个ref。这意味着如果你在React.forwardRef创建的组件上使用ref的话，它并不会直接被组件消化掉，而是向内部进行了转发，让需要消化它的组件去消化。

如果你觉得难以理解，其实这种方法完全可以用另一种方法替代。我们知道，在React中，ref并不会出现在props中，它被特殊对待。但是换个名字不就行了吗。

需要提一下的是，以前我们获取ref是传递一个函数（不推荐使用字符串，这是一个历史遗留的问题，ref会在某些情况下无法获取到正确的值。vuejs可以使用，不要搞混了）。但是这个过程很烦的，我们只需要把实例或者DOM赋值给对应的变量就行了，每次都写一下这个一样模板的代码，很烦人的好吗。“千呼万唤”中，React终于听到了。现在只需要React.createRef就可以简化这个过程了。

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    render() {
        return <div ref={this.myRef} />;
    }
}

使用方法就这么简单，没什么特别的地方。

回到上面的话题，现在我们用props来实现转发refs的功能。

class Input extends React.Component {

    reder() {
		return (
			<label>Autofocus Input:</label>
			<input ref={this.props.forwardRef} type="text" />
		)
    }

}

function forwardRef(Component, ref) {
	return (<Component forwardRef={ref} />);
}

// 使用forwardRef
let input = React.createRef();

forwardRef(Input, input);


// 当组件绑定成功之后
 input.current.focus();

React.createRef返回的值中，current属性表示的就是对应的DOM或者组件实例。forwardRef并没有什么特殊的含义，就是一个简单的props。这个用法就像是状态提升一样。

转载自:https://juejin.cn/post/6844903587819044877