React中不常用的功能——Context

Posted 2023-04-24

参考技术A

React源码版本16.8

跨层级通信 Context

React.createContext创建context对象

Context.Provider父级创建provider传递参数

子组件消费

该 API 订阅单一 context

useContext只可以用在函数组件中或者自定义hook，且第二个参数不会覆盖第一个

ReactContext.js 中的createContext

ReactFiberClassComponent.js 中的constructClassInstance
即Class 组件 构造函数初始化

从上可知若contextType是对象 且不为null 则将contextType赋值给this.context

从构造函数可以知晓Consumer跟Provider是指向同一个context的，所以实现了跨级访问

在ReactFiberHooks.js中 声明了

在HooksDispatcherOnMount或HooksDispatcherOnUpdate中，useContext实际调用的都是readContext

ReactFiberNewContext.js中的readContext

readContext返回context._currentValue

总结
context实现跨级读取访问的根本性就是通过Context组件维护一个稳定对象，在对象内维护一个可变的_currentValue值，供Consumer访问

React源码
React-Context-文档
react组件化——context

如何在组件外部访问React Context？

我正在尝试实现一个通过功能性React组件中的按钮调用的函数。

应该从我自己的数据库中删除用户。但是我需要来自Firebase的访问令牌才能对此后端进行受保护的API调用。

现在，我正在通过Context API提供firebase实例，但似乎无法找到从React Component外部访问该实例的方法。

我遇到此错误：

第10行：预期分配或函数调用，而是看到一个表达式

我是用错误的方式进行这种处理吗？

import React from 'react';
import axios from 'axios';

import { PasswordForgetForm } from '../PasswordForgetForm/PasswordForgetForm';
import PasswordChangeForm from '../PasswordChangeForm/PasswordChangeForm';
import { AuthUserContext, withAuthorization } from '../../services/Session';
import { FirebaseContext } from '../../services/Firebase';

const deletUser = (authUser) => {
  {
    firebase => {
      const token = firebase.doGetIdToken();
      console.log(token);
      axios.delete('/api/users/' + authUser.uid, {
        headers: {
          authorization: `Bearer ${token}`
        }
      })
        .then(res => {
          //this.props.history.push('/dashboard');
          console.log(res);
        })
    }
  }

}

const AccountPage = () => (
  <AuthUserContext.Consumer>
    {authUser => (
      <div>
        <h1>Account: {authUser.email}</h1>
        <PasswordForgetForm />
        <PasswordChangeForm />
        <button type="button" onClick={() => deletUser(authUser)}>Delete Account</button>
      </div>
    )}
  </AuthUserContext.Consumer>
);

const condition = authUser => !!authUser;

export default withAuthorization(condition)(AccountPage);

感谢您的帮助！

答案

代码声明一个匿名对象，内部语法不正确

 const deletUser = (authUser) => {
  {//anonymous   object
    firebase => {//There is no key for the member of the object
      const token = firebase.doGetIdToken();
      console.log(token);
      axios.delete('/api/users/' + authUser.uid, {
        headers: {
          authorization: `Bearer ${token}`
        }
      })
        .then(res => {
          //this.props.history.push('/dashboard');
          console.log(res);
        })
    }
  }//You never call or return anything of your object 

}