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

HTML5 Conference 2016
http://events.html5j.org/conference/2016/9/session/#session_id_h1

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