Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactの最新動向とベストプラクティス

koba04
September 03, 2016

 Reactの最新動向とベストプラクティス

koba04

September 03, 2016
Tweet

More Decks by koba04

Other Decks in Programming

Transcript

  1. 3FBDUͷ࠷৽ಈ޲ͱϕετϓϥΫςΟε
    )5.-$POGFSFODF

    !LPCB

    View Slide

  2. !LPCB

    View Slide

  3. 3FBDUࣄྫ

    View Slide

  4. 'BDFCPPL
    http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html

    View Slide

  5. *OTUBHSBN

    View Slide

  6. /FUqJY

    View Slide

  7. 5XJUUFS NPCJMF

    View Slide

  8. "CFNBUW

    View Slide

  9. )ZQFSUFSN
    w IUUQTIZQFSUFSNPSH
    w IUUQTHJUIVCDPN[FJUIZQFSUFSN

    View Slide

  10. +FOLJOT%FTJHO-BOHVBHF
    w IUUQTHJUIVCDPNKFOLJOTDJKFOLJOTEFTJHOMBOHVBHF

    View Slide

  11. 3FBDU͸zࠓz࢖ΘΕ͍ͯΔϥΠϒϥϦʔ

    View Slide

  12. 3FBDUͷ͜Ε·Ͱ

    View Slide

  13. 2013 2014 2015 2016
    Flux
    v0.13
    ReactNative
    for iOS
    GraphQL Redux Relay
    React Native
    for Android
    v0.14
    React Native
    for Windows
    v15.0.0

    React.Component
    Stateless
    Functional

    Component
    No more

    span and

    data-reactid
    React.

    PureComponent

    (v15.3.0ʙ)

    View Slide

  14. 3FBDUͷಛ௃

    View Slide

  15. 3FBDUͷಛ௃

    View Slide

  16. class App extends React.Component {
    constructor(…args) {
    super(…args);
    this.state = {
    text: ‘’,
    };
    }
    render() {
    return (
    text={this.state.text}
    onChange={text => this.setState({text})}
    />
    );
    }
    }
    const TextBox = (text, onChange) => (

    onChange(e.target.value} />
    {text}

    );
    ReactDOM.render(
    ,
    document.getElementById(‘app’)
    );

    View Slide

  17. w 7JFX$PNQPOFOU 4UBUF

    w $PNQPOFOU͸4UBUF͔Β7JFX 3FBDU&MFNFOU
    Λ࡞Δ
    w $PNQPOFOU͸7JFXΛ࡞Δؔ਺
    w 3FBDU͕ࠩ෼Λܭࢉͯ͠%0.ʹ൓ө͢Δ
    w *'͸1SPQT
    w એݴతʹ7JFXΛߏங͢Δ
    w એݴతʁ
    3FBDUͷಛ௃

    View Slide

  18. 3FBDUͷಛ௃
    State
    View
    Function Component
    4UBUFΛߋ৽
    4UBUFΛ
    $PNQPOFOU
    ʹ౉͢
    ࠩ෼Λ%0.
    ʹ൓ө
    ΠϕϯτʹΑΔ
    ߋ৽ॲཧ

    View Slide

  19. 3FBDUͷಛ௃
    State
    View
    Function Component
    4UBUFΛߋ৽
    4UBUFΛ
    $PNQPOFOU
    ʹ౉͢
    ࠩ෼Λ%0.
    ʹ൓ө
    ΠϕϯτʹΑΔ
    ߋ৽ॲཧ
    Կ͕ى͖͍ͯΔͷ͔Θ͔Δ

    View Slide

  20. w ʮมԽʯͰ͸ͳ͘ʮঢ়ଶʯΛఆٛ͢Δ
    એݴతʁ
    // ໋ྩత
    // elͷมԽΛॻ͍͍ͯΔ
    button.on(‘click’, () => el.append(child));
    // એݴత
    // stateʹର͢Δ͋Δ΂͖දࣔΛॻ͍͍ͯΔ
    render = state => {
    el.innerHTML = state.map(child => `${child}`).join(‘’);
    };
    button.on(‘click’, () => {
    state.push(child);
    render(state);
    }

    View Slide

  21. w ॳظදࣔ΋ߋ৽΋ৗʹ$PNQPOFOU 4UBUF
    Ͱ7JFXΛ࡞Δ
    એݴతʁ
    // ೖྗʹରͯ͠ৗʹಉ͡ग़ྗΛฦ͢
    const CommentBox = ({comment, onChange}) => (

    {comment}
    type=“text”
    value={comment}
    onChange={e => onChange(e.target.value)}
    />

    );
    const render = comment => (
    ReactDOM.render(
    ,
    document.getElementById(‘app’)
    )
    );

    View Slide

  22. $PNQPOFOUΛ࡞Δ

    View Slide

  23. w 4UBUFMFTT'VODUJPOBM$PNQPOFOUT
    w 3FBDU$PNQPOFOU
    w 3FBDU1VSF$PNQPOFOU
    w 3FBDUDSFBUF$MBTT
    $PNQPOFOUͷఆٛํ๏

    View Slide

  24. w 'JSTU$IPJDF
    w Πϯελϯε΋࣋ͨͳ͍ͨͩͷؔ਺
    w 3FBDU&MFNFOU$PNQPOFOU 1SPQT

    w /PTUBUF /PMJGFDZDMFNFUIPET /PSFGT
    w কདྷతͳ࠷దԽ΋
    4UBUFMFTT'VODUJPO$PNQPOFOUT 4'$

    // PropsΛड͚औΓɺReactElementΛฦؔ͢਺
    const Item = ({item}) => (

    {item.name}×{item.count}

    );
    //

    View Slide

  25. w 4UBUF΍ϥΠϑαΠΫϧϝιου͕ඞཁʹͳͬͨΒ
    3FBDU$PNQPOFOU
    class App extends React.Component {
    constructor(…args) {

    super(…args);
    this.state = {
    user: null,
    };
    }
    componentDidMount() {
    fetch(‘/api/user’)
    .then(res => res.json())
    .then(user => this.setState({user}))
    ;
    }
    render() {
    if (this.state.user == null) return ;
    return (



    );
    }

    View Slide

  26. w 4UBUFʹ͸දࣔʹඞཁͳσʔλ͚ͩ
    3FBDU$PNQPOFOU
    class App extends React.Component {
    constructor(…args) {

    super(…args);
    // this.state = {
    // timerId: null,
    // };
    }
    componentDidMount() {
    this.timerId = setInterval(() => {}, 1000);
    // this.setState({
    // timerId: setInterval(() => {}, 1000)
    // });
    }
    componentWillMount() {
    clearInterval(this.timerId);
    // clearInterval(this.state.timerId);
    }
    render() {
    }
    }

    View Slide

  27. w 4IPVME$PNQPOFOU6QEBUFʹ1SPQTͱ4UBUFʹର͢Δ
    4IBMMPX&RVBM͕ద༻͞ΕΔ
    w কདྷతʹ͸$IJMESFOͷ4'$ʹରͯ͠ͷ࠷దԽ͕ೖΔ͔΋
    3FBDU1VSF$PNQPOFOU Wʙ

    class Counter extends React.PureComponent {
    constructor(…args) {
    super(…args);
    this.state = {count: 0};
    }
    render() {
    return (

    {this.props.label}:{this.state.count}
    onClick={() => this.setState({count: this.state.count + 1})
    />

    );
    }
    }

    View Slide

  28. 1VSF$PNQPOFOUͷམͱ݀͠
    class Item extends React.PureComponent {
    render() {
    return (

    {this.props.name}
    click
    {this.props.children}

    );
    }
    }
    // props.onClick !== nextProps.onClick
    console.log(‘click’)} />
    // props.children !== nextProps.children

    foo

    View Slide

  29. ਪଌ͢ΔͳܭଌͤΑ
    w SFBDUBEEPOTQFSG
    import Perf from ‘react-addons-perf’;
    Perf.start();
    ReactDOM.render(, el);
    setTimeout(() => {
    ReactDOM.render(, el);
    Perf.stop();
    Perf.printWasted();
    }, 1000);

    View Slide

  30. w ͔ͭͯͷ࡞੒ํ๏ɻ؇΍͔ʹඇਪ঑΁
    w ࠷ऴతʹ͸ผύοέʔδʹʁ
    w 'BDFCPPL಺෦΋3FBDU$PNQPOFOU΁ͷҠߦத
    w 3FBDUDSFBUF$MBTTͷศརػೳͷϚΠάϨʔγϣϯύε
    w NJYJO⾣)JHI0SEFS$PNQPOFOUT
    w BVUPCJOEJOH⾣1VCMJD$MBTT'JFMET
    3FBDUDSFBUF$MBTT
    class Button extends React.Component {
    onClick = () => this.setState({count: this.state.count + 1});
    }
    Stage2

    View Slide

  31. $PNQPOFOUΛ֦ு͢Δ

    View Slide

  32. w $PNQPTJUJPOPWFS*OIFSJUBODF
    w )JHIFS0SEFS'VODUJPO
    )JHIFS0SEFS$PNQPOFOUT
    // Կ͔͢Δؔ਺Λड͚औͬͯɺ݁ՌΛϩάग़ͯ͠ฦ͢
    const logger = operation => (…args) => {
    const result = operation(…args);
    console.log(result);
    return result;
    };
    const add = logger((a, b) => a + b);
    add(10, 20);
    // 30

    View Slide

  33. w )JHIFS0SEFS$PNQPOFOUT
    )JHIFS0SEFS$PNQPOFOUT
    // ComponentΛड͚औͬͯɺPureComponentͰϥοϓͯ͠ฦ͢
    const pure = Component => class Pure extends React.PureComponent {

    render() {
    return ;
    }
    }
    const Item = ({name}) => {name};
    const PureItem = pure(Item);
    //

    View Slide

  34. w BDEMJUFSFDPNQPTF
    w )JHIFS0SEFS$PNQPOFOUTͷVUJMJUZू
    w IUUQTHJUIVCDPNBDEMJUFSFDPNQPTF
    )JHIFS0SEFS$PNQPOFOUTΛ࢖͏
    // isLoadedʹΑͬͯComponentΛग़͠෼͚Δ
    const enhance = branch(
    props => props.isLoaded,
    Component => Component,
    () => Loading
    );
    const LoadUser = enhance(User);
    //

    View Slide

  35. w SFBDUKTSFBDUSPVUFS XJUI3PVUFS

    w SFBDUKTSFBDUSFEVY DPOOFDU

    )JHIFS0SEFS$PNQPOFOUTࣄྫ
    const MyPage = ({router}) => hoge;
    const WithRouterMyPage = withRouter(MyPage);
    const MyPage = ({user, updateName}) => {user.name};
    const ConnectedMyPage = connect(
    mapStateToProps,
    mapDispatchToProps
    )(MyPage);

    View Slide

  36. w QSPQTDIJMESFOʹؔ਺Λ౉͢͜ͱͰ֦ு͢Δ
    w ແବͳ$PNQPOFOUʹΑΔϥοϓ͕ൃੜ͠ͳ͍
    w 1SPQTͱͷিಥΛߟ͑ͳ͍͍ͯ͘
    w ࠷దԽ͕೉͍͠
    w SFBDUNPUJPO
    w IUUQTNFEJVNDPNNFSSJDLDISJTUFOTFOGVODUJPOBTDIJME
    DPNQPOFOUTGBBDF
    'VODUJPOBT$IJME$PNQPOFOUT
    FuncAsChild = props => {props.children(‘foo’)};
    // {foo => {foo}}

    View Slide

  37. 4UBUFΛ؅ཧ͢Δ

    View Slide

  38. w ΞϓϦέʔγϣϯͷঢ়ଶ͸ͳΔ΂͘ҰՕॴʹɻ
    w ਌ͷ$PNQPOFOU
    w ਌͸ࢠʹσʔλͱૢ࡞ʢؔ਺ʣΛ౉͢ɻࢠ͸ͦΕΒΛ࢖͏ͩ
    ͚
    w ׬શʹ$PNQPOFOU಺ʹด͡Δঢ়ଶ͸$PNQPOFOUͷ4UBUFʹ͢
    Δ͜ͱ΋ߟ͑Δ
    w ΞϓϦέʔγϣϯ͕େ͖͘ͳΔͱɺ਌ͷ$PNQPOFOUͰ؅ཧ͠
    ͖Εͳ͘ͳΔ
    4UBUF؅ཧ

    View Slide

  39. %BUBqPX
    EBUBΛ1SPQTͰ
    ౉͢
    IBOEMFSͰ
    ΠϕϯτΛ఻೻

    View Slide

  40. %BUBqPX
    EBUBΛ1SPQTͰ
    ౉͢
    IBOEMFSͰ
    ΠϕϯτΛ఻೻
    ΞϓϦέʔγϣϯͷن໛͕
    େ͖͘ͳ͖ͬͯͨΒʁ

    View Slide

  41. w 4UBUFΛ$PNQPOFOU͔Β੾Γ཭͢
    w ΞϓϦέʔγϣϯͷঢ়ଶʢ4UBUFʣΛ4JOHMF4UPSFͰ؅ཧ
    w 4UBUFͷߋ৽Λ"DUJPOͱͯ͠දݱ͢Δ
    w 4UBUF͸"DUJPOͰߋ৽͞ΕΔ
    w 4UBUFͷߋ৽͸3FEVDFSͱݺ͹ΕΔ1VSF'VODUJPOͰ
    w $POUBJOFS$PNQPOFOUͱ1SFTFOUBUJPOBM$PNQPOFOU
    3FEVY

    View Slide

  42. w 4UBUFΛ$PNQPOFOU͔Β੾Γ཭͢
    w ΞϓϦέʔγϣϯͷঢ়ଶʢ4UBUFʣΛ4JOHMF4UPSFͰ؅ཧ
    w 4UBUFͷߋ৽Λ"DUJPOͱͯ͠දݱ͢Δ
    w 4UBUF͸"DUJPOͰߋ৽͞ΕΔ
    w 4UBUFͷߋ৽͸3FEVDFSͱݺ͹ΕΔ1VSF'VODUJPOͰ
    w $POUBJOFS$PNQPOFOUͱ1SFTFOUBUJPOBM$PNQPOFOU
    3FEVY
    ඞཁʹͳΔ·Ͱ࢖͏ඞཁ͸ͳ͍

    View Slide

  43. %BUBqPX
    State

    View Slide

  44. w ಉ͡$PNQPOFOUͰ΋໾ׂ͸શ͘ҟͳΔ
    $POUBJOFS$PNQPOFOUͱ1SFTFOUBUJPOBM
    $PNQPOFOU
    Presentational Component

    w 7JFXͷߏஙΛ୲͏
    w 4'$
    w %PNBJO-PHJDΛ஌Βͳ͍
    w 4UBUF؅ཧͷ͜ͱ͸஌Βͳ͍
    Container Component

    w ߋ৽ॲཧɺঢ়ଶ؅ཧΛ୲͏
    w 3FBDU 1VSF
    $PNQPOFOU
    w %0.Λ஌Βͳ͍
    w DPOOFDUͰ࡞੒ 3FEVY

    View Slide

  45. Middleware
    3FEVY
    State
    Action

    Creator
    &WFOU
    Reducer
    "DUJPO
    4UBUF
    Selector
    4UBUF
    1SPQT
    IO

    View Slide

  46. 3FEVY
    w BDUJPO"DUJPO$SFBUPS

    w ΞϓϦέʔγϣϯͰൃੜ͢ΔΠϕϯτ
    w OFX4UBUF3FEVDFS TUBUF BDUJPO

    w ΞϓϦέʔγϣϯͷঢ়ଶߋ৽
    w QSPQT4FMFDUPS TUBUF

    w 7JFXʹඞཁͳσʔλ

    View Slide

  47. 3FEVY
    w ୯Ұͷ4UBUFʹશ͕ͯ٧·͍ͬͯΔ
    w ⾣4UBUFΛݟΕ͹ΞϓϦέʔγϣϯͷঢ়ଶ͕Θ͔Δ
    w ⾣7JFX$PNQPOFOU 4UBUF

    w σʔλͱϩδοΫͷ෼཭
    w ଟ͘ͷ෦෼͕෭࡞༻ͷͳ͍ؔ਺ʹͳΔͷͰςετ͕؆୯
    w ෭࡞༻͸ʁʁ

    View Slide

  48. 3FEVY.JEEMFXBSF
    w ෭࡞༻΍ඇಉظॲཧ͸ɺ.JEEMFXBSFΛ࢖ͬͯॲཧ͢Δ
    w .JEEMFXBSFͰ͸ɺ3FEVDFS͕"DUJPOΛॲཧ͢ΔલޙʹׂΓ
    ࠐΈɺ"DUJPOͷՃ޻΍Ωϟϯηϧɺผͷ"DUJPOͷൃߦͳͲ
    ͕Մೳ
    w SFEVYUIVOL SFEVYQSPNJTF SFEVYTBHB SFEVY
    PCTFSWBCMF SFEVYMPPQ SFEVYF⒎FDUTʜ
    w SFEVYQFSTJTU SFEVYMPHHFS SFEVYBOBMZUJDT

    View Slide

  49. $PNQPOFOUΛςετ͢Δ

    View Slide

  50. w 5FTU6UJMTSFOEFS*OUP%PDVNFOU
    w %0.͕ඞཁͳςετ
    w 5FTU6UJMT4IBMMPX3FOEFS
    w $PNQPOFOUͷ୯ମςετ
    w SFBDUUFTUSFOEFS
    w $PNQPOFOU5SFFʹର͢Δςετ
    5FTU

    View Slide

  51. w $PNQPOFOU୯ମʹର͢Δςετ͕Մೳ
    w ࢠ$PNQPOFOU͸SFOEFS͞Εͳ͍
    w /PEF؀ڥͰςετ͕ՄೳʢKTEPNͳͲ͸ෆཁʣ
    w 3FGT͸ະαϙʔτɺ-JGFDZDMF.FUIPET͸Ұ෦ͷΈαϙʔτ
    w l4IBMMPXz3FOEFSJOH
    4IBMMPX3FOEFS
    const shallowRenderer = TestUtils.createRenderer();
    const elementTree = shallowRenderer.render();
    assert(elementTree.props.children[0].type === ‘div’);

    View Slide

  52. w 3FBDU$PNQPOFOUTʹର͢Δςετͷ6UJMJUZ
    w TIBMMPX NPVOU SFOEFS
    w 5FTU6UJMTͷ"1*Λ࢖͏ΑΓɺ؆୯ʹɺΘ͔Γ΍͘͢ॻ͘͜ͱ͕
    Մೳ
    BJSCOCFO[ZNF
    import {shallow} from ‘enzyme’;
    const wrapper = shallow();
    assert(wrapper.find(Link).prop(‘to’) === ‘/foo’);
    wrapper.find(‘button’).simulate(‘click’);

    View Slide

  53. w 3FBDU&MFNFOUͷπϦʔΛ+40/ʹͯ͠ฦ͢
    w /PUl4IBMMPXz
    w -JGFDZDMF.FUIPET΋αϙʔτ͞Ε͍ͯΔ
    w "1*͸·ͩ·ͩ੔උத
    w +FTUͷTOBQTIPUUFTUJOHͰ࢖ΘΕ͍ͯΔ
    SFBDUUFTUSFOEFSFS Wʙ

    import renderer from ‘react-test-renderer’;
    const tree = renderer.create().toJSON();
    assert(tree.props.children[0].type === ‘div’);

    View Slide

  54. ։ൃΛαϙʔτ͢Δπʔϧ

    View Slide

  55. w FTMJOUQMVHJOSFBDU
    w 3FBDUʹؔ͢Δ&4-JOUͷϧʔϧू
    w 3FBDUͷϕετϓϥΫςΟεΛ஌Δ͜ͱ͕Ͱ͖Δ
    w IUUQTHJUIVCDPNZBOOJDLDSFTMJOUQMVHJOSFBDU
    w FTMJOUQMVHJOKTYBZ
    w +49ʹର͢ΔBDDFTTJCJMJUZͷνΣοΫ͕Ͱ͖Δ
    w IUUQTHJUIVCDPNFWDPIFOFTMJOUQMVHJOKTYBZ
    &4-JOU3FBDU

    View Slide

  56. &4-JOU3FBDU

    View Slide

  57. &4-JOU3FBDU
    w OPTUSJOHSFGTʜจࣈྻʹΑΔ3FGTࢦఆͷېࢭ
    w QSFGFSTUBUFMFTTGVODUJPOʜ4'$ʹΑΔఆٛΛ༏ઌ͢Δ
    w OPEJSFDUNVUBUJPOTUBUFʜUIJTTUBUFΛ௚઀ߋ৽Λېࢭ
    w TPSUDPNQʜ$PNQPOFOU಺ͷϝιουఆٛॱΛνΣοΫ
    w KTYOPCJOEʜ1SPQTͰͷCJOE
    ΍"SSPX'VODUJPOͷېࢭ
    w KTYLFZʜLFZͷ1SPQT͕ඞཁͳ৔໘Ͱࢦఆ͞Ε͍ͯΔ͔
    w 4FFNPSFSVMFT
    w IUUQTHJUIVCDPNZBOOJDLDSFTMJOUQMVHJOSFBDU

    View Slide

  58. 3FBDU4UPSZ#PPL
    w IUUQTHFUTUPSZCPPLJP
    w $PNQPOFOUΛΞϓϦέʔγϣϯ͔Β੾Γ཭ͨ͠ܗͰ։ൃͰ͖
    Δ
    w 4UPSZͱͯ͠$PNQPOFOUͷදࣔύλʔϯΛఆٛͰ͖Δ
    w 4UPSZCPPLTJP
    w IUUQTTUPSZCPPLTJP

    View Slide

  59. 3FBDU%FWFMPQFS5PPMT
    w 3FBDU&MFNFOUͷ5SFFΛJOTQFDUͰ͖Δ
    w 4UBUFͷॻ͖׵͑΋Մೳ

    View Slide

  60. 3FBDU%FWFMPQFS5PPMT
    w 3FBDU&MFNFOUͷ5SFFΛJOTQFDUͰ͖Δ
    w 4UBUFͷॻ͖׵͑΋Մೳ

    View Slide

  61. 3FEVY%FW5PPMT
    w IUUQTHJUIVCDPNHBFBSPOSFEVYEFWUPPMT
    w λΠϜτϥϕϧσόοΪϯά
    w "DUJPOͷॻ͖׵͑
    w IUUQTUXJUUFSDPNEBO@BCSBNPWTUBUVT

    View Slide

  62. 3FEVY%FW5PPMT&YUFOTJPO
    w IUUQTHJUIVCDPN[BMNPYJTVTSFEVYEFWUPPMTFYUFOTJPO
    w ཤྺͷ&YQPSU*NQPSUɺςετέʔεͷ࡞੒ʜ

    View Slide

  63. 3FBM8PSMEͱ3FBDU

    View Slide

  64. 'BDFCPPLͱ3FBDU
    w 3FBDU͸'BDFCPPL͕࢖͏ͨΊʹ࡞ΒΕ͍ͯΔϥΠϒϥϦʔ
    w PWFS DPNQPOFOUT
    w l8FPOMZPQFOTPVSDFXIBUXFVTFz
    w 044ͱͯ͠ͷ3FBDU
    w 47( DVTUPNFMFNFOUT
    w GBDFCPPLJODVCBUPSDSFBUFSFBDUBQQ
    w SFBDUKTDPSFOPUFT

    View Slide

  65. 3FBM8PSMEͱ3FBDU
    w %FQSFDBUF1SPDFTT
    w ͭલͷϝδϟʔόʔδϣϯͰܯࠂ͔ͯ͠Βഇࢭ͞ΕΔ
    w ҠߦύεΛఏڙ
    w (SBEVBM"EPQUJPO
    w طଘͷΞϓϦέʔγϣϯʹ૊ΈࠐΈ΍͍͢"1*ͷఏڙ
    w 3FBDUXJUIK2VFSZ $BOWBTʜ
    w &TDBQF)BUDIFT
    w 3FGT EBOHFSPVTMZ4FU*OOFS)5.- $POUFYU

    View Slide

  66. 'VUVSF

    View Slide

  67. 3FBDU$PSF
    w $PSF͸ͲΜͲΜখ͘͞"1*͸࠷௿ݶʹ
    w SFBDU
    w $PNQPOFOU΍3FBDU&MFNFOUΛ࡞੒͢Δ
    w SFOEFSFS
    w $PNQPOFOUΛϓϥοτϑΥʔϜʹԠͯ͡ॲཧ͢Δ
    w %0.΋ͨͩͷλʔήοτ
    w SFBDUEPN SFBDUOBUJWF SFBDUBSUʜ

    View Slide

  68. % tree src -L 3 -d
    .
    !"" addons
    !"" isomorphic
    # !"" children
    # !"" classic
    # !"" hooks
    # $"" modern
    !"" renderers
    # !"" art
    # !"" dom
    # # !"" client
    # # !"" fiber
    # # !"" server
    # # $"" shared
    # !"" native
    # !"" noop
    # !"" shared
    # # !"" fiber
    # # !"" hooks
    # # !"" shared
    # # !"" stack
    # # $"" utils
    # $"" testing
    !"" shared
    !"" test
    $"" umd

    View Slide

  69. <8*1>3FBDU'JCFS
    w ಺෦ΞϧΰϦζϜͷશ໘ॻ͖׵͑ 3FDPODJMFS

    w ༏ઌ౓ʹԠͯ͡εέδϡʔϦϯά͞Εͨඇಉظͳ7JFXͷߋ৽
    w ݱࡏ͸ࠩ෼ͷݕग़ɾద༻͕ಉظతʹߦͳΘΕ͍ͯΔ
    w NTҎ಺Λ໨ࢦͦ͏ͱ͢Δͱʜ
    w ༏ઌ౓ͷߴ͍ॲཧ SFRVFTU"OJNBUJPO'SBNF

    w ༏ઌ౓ͷ௿͍ॲཧ SFRVFTU*EMF$BMMCBDL

    View Slide

  70. <8*1>3FBDU'JCFS
    // renderers/shared/fiber/ReactPriorityLevel.js
    module.exports = {
    // No work is pending.
    NoWork: 0,
    // For controlled text inputs. Synchronous side-effects.
    SynchronousPriority: 1,
    // Needs to complete before the next frame.
    AnimationPriority: 2,
    // Interaction that needs to complete pretty soon to feel responsive.
    HighPriority: 3,
    // Data fetching, or result from updating stores.
    LowPriority: 4,
    // Won't be visible but do the work in case it becomes visible.
    OffscreenPriority: 5,
    };

    View Slide

  71. 4FTTJPOBVUIPSl!LPCBz
    খ͘͞͸͡ΊͯɺඞཁʹԠͯ͡ΤίγεςϜΛ
    ར༻͠·͠ΐ͏ʂ
    4FTTJPO
    TQFBLFSEFDLDPNLPCB

    View Slide