واجهة برمجة تطبيقات سياق React

تعد واجهة برمجة تطبيقات السياق طريقة رائعة لتمرير الحالة عبر التطبيق دون الحاجة إلى استخدام الدعائم

الواجهة برمجة تطبيقات السياقتم تقديمه للسماح لك بتمرير الحالة (وتمكين الحالة من التحديث) عبر التطبيق ، دون الحاجة إلى استخدام الدعائم لذلك.

يقترح فريق React التمسك بالدعائم إذا كان لديك فقط مستويات قليلة من الأطفال لتمريرها ، لأنها لا تزال واجهة برمجة تطبيقات أقل تعقيدًا من واجهة برمجة تطبيقات السياق.

في كثير من الحالات ، يمكننا تجنب استخدامإعادة، وتبسيط تطبيقاتنا كثيرًا ، وكذلك تعلم كيفية استخدام React.

كيف يعمل؟

يمكنك إنشاء سياق باستخدامReact.createContext()، والذي يعيد كائن سياق:

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

ثم تقوم بإنشاء مكون غلاف يقوم بإرجاع ملفمزود، وتضيف كأطفال جميع المكونات التي تريد الوصول إلى السياق منها:

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      something: 'hey'
    }
  }

render() { return ( <Provider value={{ state: this.state }}>{this.props.children}</Provider> ) } }

class HelloWorld extends React.Component { render() { return ( <Container> <Button /> </Container> ) } }

لقد استخدمت Container كاسم لهذا المكون لأن هذا سيكون مزودًا عالميًا. يمكنك أيضًا إنشاء سياقات أصغر.

داخل مكون ملفوف في الموفر ، يمكنك استخدام ملفمستهلكمكون للاستفادة من السياق:

class Button extends React.Component {
  render() {
    return (
      <Consumer>
        {context => <button>{context.state.something}</button>}
      </Consumer>
    )
  }
}

يمكنك أيضًا تمرير الوظائف إلى قيمة الموفر ، وسيتم استخدام هذه الوظائف بواسطة المستهلك لتحديث حالة السياق:

<Provider value={{
  state: this.state,
  updateSomething: () => this.setState({something: 'ho!'})}}>
  {this.props.children}
</Provider>

/* … */ <Consumer> {(context) => ( <button onClick={context.updateSomething}>{context.state.something}</button> )} </Consumer>

يمكنك رؤية هذا في العملفي هذا الخلل.

يمكنك إنشاء سياقات متعددة ، لجعل حالتك موزعة عبر المكونات ، مع كشفها وجعلها قابلة للوصول إليها من خلال أي مكون تريده.

عند استخدام ملفات متعددة ، يمكنك إنشاء المحتوى في ملف واحد ، واستيراده في جميع الأماكن التي تستخدمه فيها:

//context.js
import React from 'react'
export default React.createContext()

//component1.js import Context from ‘./context’ //… use Context.Provider //component2.js import Context from ‘./context’ //… use Context.Consumer

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: