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

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

Transcript

1. 3FBDUͷ࠷৽ಈ޲ͱϕετϓϥΫςΟε )5.-
   $POGFSFODF
   
   
   !LPCB
   
2. !LPCB
3. 3FBDUࣄྫ
4. 'BDFCPPL http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html
5. *OTUBHSBN
6. /FUqJY
7. 5XJUUFS
   NPCJMF
8. "CFNBUW
9. )ZQFSUFSN w IUUQTIZQFSUFSNPSH
   w IUUQTHJUIVCDPN[FJUIZQFSUFSN
10. +FOLJOT
    %FTJHO
    -BOHVBHF w IUUQTHJUIVCDPNKFOLJOTDJKFOLJOTEFTJHOMBOHVBHF
11. 3FBDU͸zࠓz࢖ΘΕ͍ͯΔϥΠϒϥϦʔ
    
12. 3FBDUͷ͜Ε·Ͱ
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ʙ)
14. 3FBDUͷಛ௃
15. 3FBDUͷಛ௃
16. class App extends React.Component { constructor(…args) { super(…args); this.state = { text: ‘’, }; } render() { return ( <TextBox text={this.state.text} onChange={text => this.setState({text})} /> ); } } const TextBox = (text, onChange) => ( <div> <input type=“text” onChange={e => onChange(e.target.value} /> <p>{text}</p> </div> ); ReactDOM.render( <App />, document.getElementById(‘app’) );
17. w 7JFX
    
    $PNQPOFOU 4UBUF
    w $PNQPOFOU͸4UBUF͔Β7JFX 3FBDU&MFNFOU Λ࡞Δ
    w $PNQPOFOU͸7JFXΛ࡞Δؔ਺
    w 3FBDU͕ࠩ෼Λܭࢉͯ͠%0.ʹ൓ө͢Δ
    w *'͸1SPQT
    w એݴతʹ7JFXΛߏங͢Δ
    w એݴతʁ 3FBDUͷಛ௃
18. 3FBDUͷಛ௃ State View Function Component 4UBUFΛߋ৽ 4UBUFΛ
    $PNQPOFOU
    ʹ౉͢ ࠩ෼Λ%0.
    ʹ൓ө ΠϕϯτʹΑΔ
    ߋ৽ॲཧ
19. 3FBDUͷಛ௃ State View Function Component 4UBUFΛߋ৽ 4UBUFΛ
    $PNQPOFOU
    ʹ౉͢ ࠩ෼Λ%0.
    ʹ൓ө ΠϕϯτʹΑΔ
    ߋ৽ॲཧ Կ͕ى͖͍ͯΔͷ͔Θ͔Δ
20. w ʮมԽʯͰ͸ͳ͘ʮঢ়ଶʯΛఆٛ͢Δ એݴతʁ // ໋ྩత // elͷมԽΛॻ͍͍ͯΔ button.on(‘click’, () => el.append(child)); // એݴత // stateʹର͢Δ͋Δ΂͖දࣔΛॻ͍͍ͯΔ render = state => { el.innerHTML = state.map(child => `<div>${child}</div>`).join(‘’); }; button.on(‘click’, () => { state.push(child); render(state); }
21. w ॳظදࣔ΋ߋ৽΋ৗʹ$PNQPOFOU 4UBUF Ͱ7JFXΛ࡞Δ એݴతʁ // ೖྗʹରͯ͠ৗʹಉ͡ग़ྗΛฦ͢ const CommentBox = ({comment, onChange}) => ( <div> <p>{comment}</p> <input type=“text” value={comment} onChange={e => onChange(e.target.value)} /> </div> ); const render = comment => ( ReactDOM.render( <CommentBox comment={comment} onChange={render} />, document.getElementById(‘app’) ) );
22. $PNQPOFOUΛ࡞Δ
23. w 4UBUFMFTT
    'VODUJPOBM
    $PNQPOFOUT
    w 3FBDU$PNQPOFOU
    w 3FBDU1VSF$PNQPOFOU
    w 3FBDUDSFBUF$MBTT $PNQPOFOUͷఆٛํ๏
24. w 'JSTU
    $IPJDF
    w Πϯελϯε΋࣋ͨͳ͍ͨͩͷؔ਺
    w 3FBDU&MFNFOU
    
    $PNQPOFOU 1SPQT
    w /P
    TUBUF
    /P
    MJGFDZDMF
    NFUIPET
    /P
    SFGT
    w কདྷతͳ࠷దԽ΋ 4UBUFMFTT
    'VODUJPO
    $PNQPOFOUT 4'$ // PropsΛड͚औΓɺReactElementΛฦؔ͢਺ const Item = ({item}) => ( <div> <div>{item.name}×{item.count}</div> </div> ); // <Item item={{name: ‘foo’, count: 1}} />
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 <Loading />; return ( <div> <User user={this.state.user} /> </div> ); }
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() { } }
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 ( <div> <p>{this.props.label}:{this.state.count}</p> <button onClick={() => this.setState({count: this.state.count + 1}) /> </div> ); } }
28. 1VSF$PNQPOFOUͷམͱ݀͠ class Item extends React.PureComponent { render() { return ( <div> <p>{this.props.name}</p> <button onClick={this.props.onClick}>click</button> {this.props.children} </div> ); } } // props.onClick !== nextProps.onClick <Item name=“foo” onClick={() => console.log(‘click’)} /> // props.children !== nextProps.children <Item name=“foo” onClick={onClick}> <div>foo</div> </Item>
29. ਪଌ͢ΔͳܭଌͤΑ w SFBDUBEEPOTQFSG import Perf from ‘react-addons-perf’; Perf.start(); ReactDOM.render(<App name="React" />, el); setTimeout(() => { ReactDOM.render(<App name="React" />, el); Perf.stop(); Perf.printWasted(); }, 1000);
30. w ͔ͭͯͷ࡞੒ํ๏ɻ؇΍͔ʹඇਪ঑΁
    w ࠷ऴతʹ͸ผύοέʔδʹʁ
    w 'BDFCPPL಺෦΋3FBDU$PNQPOFOU΁ͷҠߦத
    w 3FBDUDSFBUF$MBTTͷศརػೳͷϚΠάϨʔγϣϯύε
    w NJYJO
    ⾣
    )JHI
    0SEFS
    $PNQPOFOUT
    w BVUPCJOEJOH
    ⾣
    1VCMJD
    $MBTT
    'JFMET 3FBDUDSFBUF$MBTT class Button extends React.Component { onClick = () => this.setState({count: this.state.count + 1}); } Stage2
31. $PNQPOFOUΛ֦ு͢Δ
32. w $PNQPTJUJPO
    PWFS
    *OIFSJUBODF
    w )JHIFS
    0SEFS
    'VODUJPO )JHIFS
    0SEFS
    $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
33. w )JHIFS
    0SEFS
    $PNQPOFOUT )JHIFS
    0SEFS
    $PNQPOFOUT // ComponentΛड͚औͬͯɺPureComponentͰϥοϓͯ͠ฦ͢ const pure = Component => class Pure extends React.PureComponent {
 render() { return <Component …{this.props} />; } } const Item = ({name}) => <div>{name}</div>; const PureItem = pure(Item); // <PureItem name=“foo” />
34. w BDEMJUFSFDPNQPTF
    w )JHIFS
    0SEFS
    $PNQPOFOUTͷVUJMJUZू
    w IUUQTHJUIVCDPNBDEMJUFSFDPNQPTF )JHIFS
    0SEFS
    $PNQPOFOUTΛ࢖͏ // isLoadedʹΑͬͯComponentΛग़͠෼͚Δ const enhance = branch( props => props.isLoaded, Component => Component, () => Loading ); const LoadUser = enhance(User); // <LoadUser isLoaded={isLoaded} user={user} />
35. w SFBDUKTSFBDUSPVUFS
    XJUI3PVUFS
    w SFBDUKTSFBDUSFEVY
    DPOOFDU )JHIFS
    0SEFS
    $PNQPOFOUTࣄྫ const MyPage = ({router}) => <div>hoge</div>; const WithRouterMyPage = withRouter(MyPage); const MyPage = ({user, updateName}) => <div>{user.name}</div>; const ConnectedMyPage = connect( mapStateToProps, mapDispatchToProps )(MyPage);
36. w QSPQTDIJMESFOʹؔ਺Λ౉͢͜ͱͰ֦ு͢Δ
    w ແବͳ$PNQPOFOUʹΑΔϥοϓ͕ൃੜ͠ͳ͍
    w 1SPQTͱͷিಥΛߟ͑ͳ͍͍ͯ͘
    w ࠷దԽ͕೉͍͠
    w SFBDUNPUJPO
    w IUUQTNFEJVNDPNNFSSJDLDISJTUFOTFOGVODUJPOBTDIJME DPNQPOFOUTGBBDF
    'VODUJPO
    BT
    $IJME
    $PNQPOFOUT FuncAsChild = props => <div>{props.children(‘foo’)}</div>; // <FuncAsChild>{foo => <span>{foo}</span>}</FuncAsChild>
37. 4UBUFΛ؅ཧ͢Δ
38. w ΞϓϦέʔγϣϯͷঢ়ଶ͸ͳΔ΂͘ҰՕॴʹɻ
    w ਌ͷ$PNQPOFOU
    w ਌͸ࢠʹσʔλͱૢ࡞ʢؔ਺ʣΛ౉͢ɻࢠ͸ͦΕΒΛ࢖͏ͩ ͚
    w ׬શʹ$PNQPOFOU಺ʹด͡Δঢ়ଶ͸$PNQPOFOUͷ4UBUFʹ͢ Δ͜ͱ΋ߟ͑Δ
    w ΞϓϦέʔγϣϯ͕େ͖͘ͳΔͱɺ਌ͷ$PNQPOFOUͰ؅ཧ͠ ͖Εͳ͘ͳΔ 4UBUF؅ཧ
39. %BUBqPX EBUBΛ1SPQTͰ
    ౉͢ IBOEMFSͰ
    ΠϕϯτΛ఻೻
40. %BUBqPX EBUBΛ1SPQTͰ
    ౉͢ IBOEMFSͰ
    ΠϕϯτΛ఻೻ ΞϓϦέʔγϣϯͷن໛͕ େ͖͘ͳ͖ͬͯͨΒʁ
41. w 4UBUFΛ$PNQPOFOU͔Β੾Γ཭͢
    w ΞϓϦέʔγϣϯͷঢ়ଶʢ4UBUFʣΛ4JOHMF
    4UPSFͰ؅ཧ
    w 4UBUFͷߋ৽Λ"DUJPOͱͯ͠දݱ͢Δ
    w 4UBUF͸"DUJPOͰߋ৽͞ΕΔ
    w 4UBUFͷߋ৽͸3FEVDFSͱݺ͹ΕΔ1VSF
    'VODUJPOͰ
    w $POUBJOFS
    $PNQPOFOUͱ1SFTFOUBUJPOBM
    $PNQPOFOU 3FEVY
42. w 4UBUFΛ$PNQPOFOU͔Β੾Γ཭͢
    w ΞϓϦέʔγϣϯͷঢ়ଶʢ4UBUFʣΛ4JOHMF
    4UPSFͰ؅ཧ
    w 4UBUFͷߋ৽Λ"DUJPOͱͯ͠දݱ͢Δ
    w 4UBUF͸"DUJPOͰߋ৽͞ΕΔ
    w 4UBUFͷߋ৽͸3FEVDFSͱݺ͹ΕΔ1VSF
    'VODUJPOͰ
    w $POUBJOFS
    $PNQPOFOUͱ1SFTFOUBUJPOBM
    $PNQPOFOU 3FEVY ඞཁʹͳΔ·Ͱ࢖͏ඞཁ͸ͳ͍
43. %BUBqPX State
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
    
45. Middleware 3FEVY State Action Creator &WFOU Reducer "DUJPO 4UBUF Selector 4UBUF 1SPQT IO
46. 3FEVY w BDUJPO
    
    "DUJPO$SFBUPS <FWFOU> 
    w ΞϓϦέʔγϣϯͰൃੜ͢ΔΠϕϯτ
    w OFX4UBUF
    
    3FEVDFS TUBUF
    BDUJPO 
    w ΞϓϦέʔγϣϯͷঢ়ଶߋ৽
    w QSPQT
    
    4FMFDUPS TUBUF 
    w 7JFXʹඞཁͳσʔλ
47. 3FEVY w ୯Ұͷ4UBUFʹશ͕ͯ٧·͍ͬͯΔ
    w ⾣4UBUFΛݟΕ͹ΞϓϦέʔγϣϯͷঢ়ଶ͕Θ͔Δ
    w ⾣7JFX
    
    $PNQPOFOU 4UBUF
    w σʔλͱϩδοΫͷ෼཭
    w ଟ͘ͷ෦෼͕෭࡞༻ͷͳ͍ؔ਺ʹͳΔͷͰςετ͕؆୯
    w ෭࡞༻͸ʁʁ
48. 3FEVY
    .JEEMFXBSF w ෭࡞༻΍ඇಉظॲཧ͸ɺ.JEEMFXBSFΛ࢖ͬͯॲཧ͢Δ
    w .JEEMFXBSFͰ͸ɺ3FEVDFS͕"DUJPOΛॲཧ͢ΔલޙʹׂΓ ࠐΈɺ"DUJPOͷՃ޻΍Ωϟϯηϧɺผͷ"DUJPOͷൃߦͳͲ ͕Մೳ
    w SFEVYUIVOL
    SFEVYQSPNJTF
    SFEVYTBHB
    SFEVY PCTFSWBCMF
    SFEVYMPPQ
    SFEVYF⒎FDUTʜ
    w SFEVYQFSTJTU
    SFEVYMPHHFS
    SFEVYBOBMZUJDT
49. $PNQPOFOUΛςετ͢Δ
50. w 5FTU6UJMTSFOEFS*OUP%PDVNFOU
    w %0.͕ඞཁͳςετ
    w 5FTU6UJMT4IBMMPX3FOEFS
    w $PNQPOFOUͷ୯ମςετ
    w SFBDUUFTUSFOEFS
    w $PNQPOFOU
    5SFFʹର͢Δςετ 5FTU
51. w $PNQPOFOU୯ମʹର͢Δςετ͕Մೳ
    w ࢠ$PNQPOFOU͸SFOEFS͞Εͳ͍
    w /PEF؀ڥͰςετ͕ՄೳʢKTEPNͳͲ͸ෆཁʣ
    w 3FGT͸ະαϙʔτɺ-JGFDZDMF
    .FUIPET͸Ұ෦ͷΈαϙʔτ
    w l4IBMMPXz
    3FOEFSJOH 4IBMMPX3FOEFS const shallowRenderer = TestUtils.createRenderer(); const elementTree = shallowRenderer.render(<YourComponent />); assert(elementTree.props.children[0].type === ‘div’);
52. w 3FBDU
    $PNQPOFOUTʹର͢Δςετͷ6UJMJUZ
    w TIBMMPX
    NPVOU
    SFOEFS
    w 5FTU6UJMTͷ"1*Λ࢖͏ΑΓɺ؆୯ʹɺΘ͔Γ΍͘͢ॻ͘͜ͱ͕ Մೳ BJSCOCFO[ZNF import {shallow} from ‘enzyme’; const wrapper = shallow(<YourComponent />); assert(wrapper.find(Link).prop(‘to’) === ‘/foo’); wrapper.find(‘button’).simulate(‘click’);
53. w 3FBDU&MFNFOUͷπϦʔΛ+40/ʹͯ͠ฦ͢
    w /PU
    l4IBMMPXz
    w -JGFDZDMF
    .FUIPET΋αϙʔτ͞Ε͍ͯΔ
    w "1*͸·ͩ·ͩ੔උத
    w +FTUͷTOBQTIPU
    UFTUJOHͰ࢖ΘΕ͍ͯΔ SFBDUUFTUSFOEFSFS
    Wʙ import renderer from ‘react-test-renderer’; const tree = renderer.create(<YourComponent />).toJSON(); assert(tree.props.children[0].type === ‘div’);
54. ։ൃΛαϙʔτ͢Δπʔϧ
55. w FTMJOUQMVHJOSFBDU
    w 3FBDUʹؔ͢Δ&4-JOUͷϧʔϧू
    w 3FBDUͷϕετϓϥΫςΟεΛ஌Δ͜ͱ͕Ͱ͖Δ
    w IUUQTHJUIVCDPNZBOOJDLDSFTMJOUQMVHJOSFBDU
    w FTMJOUQMVHJOKTYBZ
    w +49ʹର͢ΔBDDFTTJCJMJUZͷνΣοΫ͕Ͱ͖Δ
    w IUUQTHJUIVCDPNFWDPIFOFTMJOUQMVHJOKTYBZ &4-JOU
    
    3FBDU
56. &4-JOU
    
    3FBDU
57. &4-JOU
    
    3FBDU w OPTUSJOHSFGT
    ʜ
    จࣈྻʹΑΔ3FGTࢦఆͷېࢭ
    w QSFGFSTUBUFMFTTGVODUJPO
    ʜ
    4'$ʹΑΔఆٛΛ༏ઌ͢Δ
    w OPEJSFDUNVUBUJPOTUBUF
    ʜ
    UIJTTUBUFΛ௚઀ߋ৽Λېࢭ
    w TPSUDPNQ
    ʜ
    $PNQPOFOU಺ͷϝιουఆٛॱΛνΣοΫ
    w KTYOPCJOE
    ʜ
    1SPQTͰͷCJOE ΍"SSPX'VODUJPOͷېࢭ
    w KTYLFZ
    ʜ
    LFZͷ1SPQT͕ඞཁͳ৔໘Ͱࢦఆ͞Ε͍ͯΔ͔
    w 4FF
    NPSF
    SVMFT
    w IUUQTHJUIVCDPNZBOOJDLDSFTMJOUQMVHJOSFBDU
58. 3FBDU
    4UPSZ#PPL w IUUQTHFUTUPSZCPPLJP
    
    w $PNQPOFOUΛΞϓϦέʔγϣϯ͔Β੾Γ཭ͨ͠ܗͰ։ൃͰ͖ Δ
    w 4UPSZͱͯ͠$PNQPOFOUͷදࣔύλʔϯΛఆٛͰ͖Δ
    w 4UPSZCPPLTJP
    w IUUQTTUPSZCPPLTJP
59. 3FBDU
    %FWFMPQFS
    5PPMT w 3FBDU&MFNFOUͷ5SFFΛJOTQFDUͰ͖Δ
    w 4UBUFͷॻ͖׵͑΋Մೳ
60. 3FBDU
    %FWFMPQFS
    5PPMT w 3FBDU&MFNFOUͷ5SFFΛJOTQFDUͰ͖Δ
    w 4UBUFͷॻ͖׵͑΋Մೳ
61. 3FEVY
    %FW5PPMT w IUUQTHJUIVCDPNHBFBSPOSFEVYEFWUPPMT
    w λΠϜτϥϕϧσόοΪϯά
    w "DUJPOͷॻ͖׵͑
    w IUUQTUXJUUFSDPNEBO@BCSBNPWTUBUVT 
62. 3FEVY
    %FW5PPMT
    &YUFOTJPO w IUUQTHJUIVCDPN[BMNPYJTVTSFEVYEFWUPPMTFYUFOTJPO
    w ཤྺͷ&YQPSU*NQPSUɺςετέʔεͷ࡞੒ʜ
63. 3FBM
    8PSMEͱ3FBDU
64. 'BDFCPPLͱ3FBDU w 3FBDU͸'BDFCPPL͕࢖͏ͨΊʹ࡞ΒΕ͍ͯΔϥΠϒϥϦʔ
    w PWFS
     
    DPNQPOFOUT
    w l8F
    POMZ
    PQFO
    TPVSDF
    XIBU
    XF
    VTFz
    w 044ͱͯ͠ͷ3FBDU
    w 47(
    DVTUPN
    FMFNFOUT
    w GBDFCPPLJODVCBUPSDSFBUFSFBDUBQQ
    w SFBDUKTDPSFOPUFT
65. 3FBM
    8PSMEͱ3FBDU w %FQSFDBUF
    1SPDFTT
    w ͭલͷϝδϟʔόʔδϣϯͰܯࠂ͔ͯ͠Βഇࢭ͞ΕΔ
    w ҠߦύεΛఏڙ
    w (SBEVBM
    "EPQUJPO
    w طଘͷΞϓϦέʔγϣϯʹ૊ΈࠐΈ΍͍͢"1*ͷఏڙ
    w 3FBDU
    XJUI
    K2VFSZ
    $BOWBTʜ
    w &TDBQF
    )BUDIFT
    w 3FGT
    EBOHFSPVTMZ4FU*OOFS)5.-
    $POUFYU
66. 'VUVSF
67. 3FBDU$PSF w $PSF͸ͲΜͲΜখ͘͞"1*͸࠷௿ݶʹ
    w SFBDU
    w $PNQPOFOU΍3FBDU&MFNFOUΛ࡞੒͢Δ
    w SFOEFSFS
    w $PNQPOFOUΛϓϥοτϑΥʔϜʹԠͯ͡ॲཧ͢Δ
    w %0.΋ͨͩͷλʔήοτ
    w SFBDUEPN
    SFBDUOBUJWF
    SFBDUBSU
    ʜ
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
69. <8*1>3FBDU'JCFS
    w ಺෦ΞϧΰϦζϜͷશ໘ॻ͖׵͑ 3FDPODJMFS
    w ༏ઌ౓ʹԠͯ͡εέδϡʔϦϯά͞Εͨඇಉظͳ7JFXͷߋ৽
    w ݱࡏ͸ࠩ෼ͷݕग़ɾద༻͕ಉظతʹߦͳΘΕ͍ͯΔ
    w NTҎ಺Λ໨ࢦͦ͏ͱ͢Δͱʜ
    w ༏ઌ౓ͷߴ͍ॲཧ SFRVFTU"OJNBUJPO'SBNF
    w ༏ઌ౓ͷ௿͍ॲཧ SFRVFTU*EMF$BMMCBDL
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, };
71. 4FTTJPO
    BVUIPSl!LPCBz
    
    
    খ͘͞͸͡ΊͯɺඞཁʹԠͯ͡ΤίγεςϜΛ
    
    
    ར༻͠·͠ΐ͏ʂ
    4FTTJPO TQFBLFSEFDLDPNLPCB