react Context

关注

原创最新推荐文章于 2026-03-02 16:52:28 发布 231 阅读 AI 写同款· GEO 优化 ›

WorkBuddy结合DeepSeek与Skill：文献检索自动化与Token成本控制实战 Agent工具与大模型API的结合正重塑知识工作者的日常流程。在实际工程中，调用大模型处理批量任务常面临Token消耗过快、成本不可控的痛点，而国产大模型DeepSeek以极低的API定价和兼容OpenAI接口的特性，为规模化文本处理提供了“Token自由”的可能。同时，可复用的Skill机制能够将特定领域的工作流固化为标准化步骤，让Agent自动执行检索式生成、文献筛选与摘要归纳等复杂操作。本文从这一技术背景出发，以科研文献检索为应用场景，演示如何利用WorkBuddy、DeepSeek API与自建文献阅读详情

1、父组件

父组件：
import PropTypes from 'prop-types'

  // 声明Context对象属性
  static childContextTypes = {
    propA: PropTypes.string,
    methodA: PropTypes.func
  }
  
  // 返回Context对象，方法名是约定好的
  getChildContext () {
    return {
      propA: 'propA',
      methodA: () => 'methodA'
    }
  }

子组件：Ï

 // 为了在子组件中抓取context, 我们需要告诉React我们想要访问context
    // 我们通过在子组件中定义 contextTypes 和 React交流
    static contextTypes = {
        users: PropTypes.array
    }
    render(){
    const {users} = this.context
    }

方式2:react16.3之后有了新的方法

父组件
// export const { Provider, Consumer } = React.createContext("默认名称");

<Provider value={{background:red}}>
        <div style={{ border: '1px solid red', width: '30%', margin: '50px auto', textAlign: 'center' }}>
          <p>父组件定义的值:{camera}</p>
          <Parent />
        </div>
      </Provider>
      <Parent />Ï

自组件
import { Consumer } from "./index";//引入父组件的Consumer容器
           <Consumer>
        {(context) =>
          <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
            <p>子组件。获取父组件的值:{context}</p>
            {/* 孙组件内容 */}
            <Child></Child>
          </div>
        }
      </Consumer>