10.2.context-hooks.md

title
Fyrirlestur 10.2 — Context & hooks

Fyrirlestur 10.2

Context & hooks

Vefforritun 2 — HBV403G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Context

• Context er leið til að senda gögn gegnum componenta tré án þess að senda sem props
  • Svipað og flux/redux
• Hentugt fyrir hluti sem margir þurfa að hafa aðgang að
  • T.d. þema, tungumál, upplýsingum um notanda

---

• Componentar sem nota context verða coupled við contextið og þ.a.l. minnkar möguleiki á endurnýtingu
  • Ættum að íhuga hvort aðrar leiðir virki betur áður en við notum fyrir eitthvað sem er ekki notað af mörgum componentum

---

• Búum til context með React.createContext(defaultValue)
  • defaultValue er upprunagildi fyrir context
• Context hefur providers og consumers

---

Provider

• Hvert context hefur provider sem lætur components sem consumea vita af breytingum á context
• Fær value prop sem er sent til consumera
• Það geta margir consumeað frá provider
• Geta verið margir providerar fyrir context

---

• Allir consumerar sem eru afkomendur provider re-rendera ef value breytist
  • Jafnvel þó shouldComponentUpdate skili false einhversstaðar

---

Consumer

• Áskrifandi að breytingum í provider
• Nýtir render prop til að birta upplýsingar úr contexti
• Fær upplýsingar frá næsta provider fyrir ofan í tré
  • Ef engin, upprunagildi fyrir context

---

App og context

• Þurfum að skilgreina provider á einhverjum stað
• Ef allt app, setjum utan um allt
• Annars hægt að setja á viðeigandi greinar

---

const defaultTheme = 'dark';

export const ThemeContext = React.createContext({
  theme: defaultTheme,
  toggleTheme: () => {},
});

---

class ThemeProvider extends Component {
  state = { theme: defaultTheme }
  toggleTheme = () => { /* .. */ }
  render() {
    return (
      <ThemeContext.Provider value={{
        theme: this.state.theme,
        toggleTheme: this.toggleTheme,
      }}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

---

import { ThemeContext } from './Theme';
function Button(props) {
  return (
    <ThemeContext.Consumer>
      {({ theme }) => {
        const style = { /* .. */ };
        return (
          <button style={style}>
            {this.props.children}
          </button>
        );
      }}
    </ThemeContext.Consumer>
  );
}

---

Hooks

• Hooks eru viðbót í React 16.8 sem leyfa okkur að nota state og aðra virkni án class
• Kemur ekki í staðinn fyrir classes
• Viðbót sem getur stytt kóða töluvert mikið

---

• Leyfa okkur að „hooka“ okkur inn í React state og lifecycle methods frá functional componentum
• React skilgreinir fyrir grunnaðgerðir og aðrar sem geta verið nytsamlegar
• Nánar um hooks

---

useState

• useState leyfir okkur að nota state í functional components
• Áður þurftum við að breyta þeim í class component
  • Mikill auka kóði
• Skilar tvennd í fylki, fyrra er gildið, seinna er fall til að breyta gildi

---

• Sendum inn upphafsgildi þegar við skilgreinum state fyrst
• const [count, setCount] = useState(0);
  • Notar array destructuring
• Getum skilgreint eins mörg useState og við þurfum í component

---

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

---

useEffect

• useEffect leyfir okkur að framkvæma hliðarverkanir í functional components
• Svipað og componentDidMount, componentDidUpdate og componentWillUnmount
• Keyrir öðruvísi en lifecycle föllin, mun ekki blokka eins og þau geta gert
  • Meira responsive UI

---

• useEffect keyrir eftir hvert render
• Ef við þurfum að taka til eftir okkur skilum við falli
  • Sama og componentWillUnmount gerir

---

import React, { useState,useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
    return () => { /* cleanup */ };
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button></div>
  );}

---

Hooks reglur

• Aðeins kalla í hooks yst í falli
  • Ekki í lykkjum, flæðistýringum eða innriföllum
• Aðeins kalla í hooks úr React componentum
  • Ekki úr „venjulegum“ JavaScript föllum

---

Meira um hooks

• React skaffar fleiri hooks, t.d. useContext og useRef
• Getum skilgreint okkar eigin hooks!