קונטקסט

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // "ערכת נושא" prop-קומפוננטת התפריט צריכה לקבל את ה  // זה יכול להפוך את הקוד ."ThemedButton" ולהעביר אותו לכפתור  // למסורבל אם כל כפתור באפליקציה צריך לדעת על ערכת הנושא בצורה זו  // כי נאלץ להעביר אותה דרך כל הקומפוננטות.  return (
    <div>
      <ThemedButton theme={props.theme} />    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

// קונטקסט נותן לנו להעביר ערך עמוק לתוך עץ הקומפוננטות// בלי להעביר אותו באופן מפורש לכל קומפוננטה.// (צור קונטקסט לערכת הנושא (עם ברירת מחדל ״בהירה״const ThemeContext = React.createContext('light');
class App extends React.Component {
  render() {
    // כדי להעביר את ערכת הנושא לעץ הקומפוננטות Provider-נשתמש ב    // כל קומפוננטה יכולה להשתמש בו, לא משנה באיזה עומק.    // בדוגמא הבאה, נעביר ״כהה״ כערך לערכת הנושא.    return (
      <ThemeContext.Provider value="dark">        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// קומפוננטת ביניים כבר לא צריכה להעביר// את ערכת הנושא.function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // contextType-נקרא את ערך ערכת הנושא מהקונטקסט ב.  // ימצא את ספק ערכת הנושא הקרוב ויקרא את ערך ערכת הנושא React  // בדוגמא הזאת, הערך הוא ״כהה״.  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;  }
}

<Page user={user} avatarSize={avatarSize} />
// ... שמרנדרת ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... שמרנדרת ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... שמרנדרת ...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// :עכשיו, יש לנו
<Page user={user} avatarSize={avatarSize} />
// ... שמרנדרת ...
<PageLayout userLink={...} />
// ... שמרנדרת ...
<NavigationBar userLink={...} />
// ... שמרנדרת ...
{props.userLink}

function Page(props) {
  const user = props.user;
  const content = <Feed user={user} />;
  const topBar = (
    <NavigationBar>
      <Link href={user.permalink}>
        <Avatar user={user} size={props.avatarSize} />
      </Link>
    </NavigationBar>
  );
  return (
    <PageLayout
      topBar={topBar}
      content={content}
    />
  );
}

const MyContext = React.createContext(defaultValue);

<MyContext.Provider value={/* some value */}>

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* MyContext-בשימוש בערך ה mount-יגרום לתופעת לואי בזמן ה */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /*MyContext-ירנדר משהו שמבוסס על ערך ה */
  }
}
MyClass.contextType = MyContext;

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* רינדור משהו בהתאם לערך */
  }
}

<MyContext.Consumer>
  {value => /* רינדור משהו בהתאם לערך */}
</MyContext.Consumer>

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext(  themes.dark // ברירת מחדל);

import {ThemeContext} from './theme-context';

class ThemedButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;

import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';

// ThemedButton-רכיב ביניים שמשתמש ב
function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme
    </ThemedButton>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.light,
    };

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
  }

  render() {
    // בתוך ספק ערכת הנושא ThemedButton-כפתור ה    // והכפתור החיצוני ,state-משתמש בערכת הנושא מה    // משתמש בברירת המחדל של ערכת הנושא הכהה    return (
      <Page>
        <ThemeContext.Provider value={this.state.theme}>          <Toolbar changeTheme={this.toggleTheme} />        </ThemeContext.Provider>        <Section>
          <ThemedButton />        </Section>
      </Page>
    );
  }
}

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<App />);

// createContext-שים לב שצורת הערך של ברירת המחדל שמועבר ל
// זהה לצורת הערכים שהצרכנים מצפים לקבל!
export const ThemeContext = React.createContext({
  theme: themes.dark,  toggleTheme: () => {},});

import {ThemeContext} from './theme-context';

function ThemeTogglerButton() {
  // מקבל לא רק את ערכת הנושא Theme Toggler-כפתור ה  // מהקונטקסט כדי לעדכן את ערכה toggleTheme אלא גם את הפונקציה  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          Toggle Theme
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default ThemeTogglerButton;

import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };

    // מכיל גם את פונקצית העדכון state-ה    // שתועבר לספק הקונטקסט    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,    };
  }

  render() {
    // בשלמותו מועבר לספק state-ה    return (
      <ThemeContext.Provider value={this.state}>        <Content />
      </ThemeContext.Provider>
    );
  }
}

function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<App />);

// קונטקסט ערכת הנושא עם ברירת מחדל בהירה
const ThemeContext = React.createContext('light');

// קונטקסט המשתמש המאומת
const UserContext = React.createContext({
  name: 'Guest',
});

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

    // קומפוננטה שמספקת ערכי ברירת מחדל לקונטקסט
    return (
      <ThemeContext.Provider value={theme}>        <UserContext.Provider value={signedInUser}>          <Layout />
        </UserContext.Provider>      </ThemeContext.Provider>    );
  }
}

function Layout() {
  return (
    <div>
      <Sidebar />
      <Content />
    </div>
  );
}

// קומפוננטה יכולה לצרוך יותר מקונטקסט אחד
function Content() {
  return (
    <ThemeContext.Consumer>      {theme => (        <UserContext.Consumer>          {user => (            <ProfilePage user={user} theme={theme} />          )}        </UserContext.Consumer>      )}    </ThemeContext.Consumer>  );
}

class App extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{something: 'something'}}>        <Toolbar />
      </MyContext.Provider>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},    };
  }

  render() {
    return (
      <MyContext.Provider value={this.state.value}>        <Toolbar />
      </MyContext.Provider>
    );
  }
}