The state of React.js 2016

5IFTUBUFPG3FBDUKT IUNMKWPM !LPCB

w XJMMCFIFMEJO+VOF "3FBDUKTNFFUVQPSHBOJ[FS

3FBDU&VSPQFJO1BSJT✈

8IPVTFT3FBDUKT

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

*OTUBHSBN

/FUqJY

5XJUUFS NPCJMF

BJSCOC

3FBDUKTJTBCBUUMFUFTUFEMJCSBSZ GBDFCPPLVTFT3FBDUPONBTUFSCSBODIBUGBDFCPPLDPN

5IFIJTUPSZPG3FBDUKT

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 …

8IZ3FBDU

w *UIJOLUIFSFBTPONBOZQFPQMFVTF3FBDUJT/05B QFSGPSNBODF w 'PSQSFEJDUBCMF6*NBOBHFNFOUCZl%FDMBSBUJWFBOEQVSF $PNQPOFOUzBOEl&YQMJDJUEBUBqPXzXJUIMFTT QFSGPSNBODFEFHSBEBUJPO w 1SPWJEJOHFTDBQFIBUDIFT 8IZ3FBDU

$PNQPOFOU

w :PVDBODSFBUFNPTUDPNQPOFOUTBT4UBUFMFTT'VODUJPO $PNQPOFOUT 4'$ w 4'$EPFTO`UIBTBCBDLJOHJOTUBODF w /PTUBUF /PMJGFDZDMFNFUIPET
/PSFGT w 1FSGPQUJNJTBUJPOTGPS4'$XJMMCFJOUIFGVUVSF 4UBUFMFTT'VODUJPO$PNQPOFOUT const Item = ({item}) => ( <div> <div>{item.name}×{item.count}</div> </div> ); // <Item item={{name: ‘foo’, count: 1}} />

%PZPVOFFETUBUFTPSMJGFDZDMF NFUIPETJOZPVSDPNQPOFOUT ↪︎&4$MBTTFT$PNQPOFOUT

&4$MBTTFT class Counter extends React.Component { constructor(…args) {  super(…args); this.state
= { count: 0 }; this.onClick = this.onClick.bind(this); } onClick() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <button onClick={this.onClick}>++<button> <div>{this.state.count}</div> </div> ); }

w 4VQQPSUJOHNJOJNVN"1*T w *UEPFTO`UTVQQPSUSFQMBDF4UBUF JT.PVOUFE w .JYJOTBSFEFBE -POHMJWF)JHI0SEFS$PNQPOFOUT )0$ &4$MBTTFT$PNQPOFUT
import shallowCompare from ‘react-addons-shallow-compare’; const pure = Component => class PureComponent extends React.Component { shouldComponentUpdate(nextProps, nextState) { return shallowCompare(this, nextProps, nextState); } render () { return <Component {…this.props} /> } }; const Item = ({item}) => <div>{item.name}×{item.count}</div>; const PureItem = pure(Item);

w 3FBDUDSFBUF$MBTTGFFMTPVUEBUFE w *UIBTGFBUVSFTUIBUJTDPOWFOJFOUGPSEFWFMPQFST w NJYJOH‎)JHI0SEFS$PNQPOFOUT w BVUPCJOEJOH‎&4$MBTT'JFMET4UBUJD1SPQFSUJFT w
*UNBZCFDPNFBTFQBSBUFQBDLBHF 3FBDUDSFBUF$MBTT class Button extends React.Component { onClick = () => this.setState({count: this.state.count + 1}); } Stage1

DPSFOPUFT.BZ

w "TJNQMFCFODINBSLGPS&4$MBTTFT XJUI TIPVME$PNQPOFOU6QEBUF WT4'$ w IUUQTKTpEEMFOFULPCBKNL &4$MBTTFTWT4'$

"EE3FBDU1VSF$PNQPOFOU JOIFSJUQVSJUZGPS GVODUJPOBMDPNQPOFOUT WIP PureComponent was merged as #7195. It’s
a PureRenderMixin for ES Classes.

"EE3FBDU1VSF$PNQPOFOU JOIFSJUQVSJUZGPS GVODUJPOBMDPNQPOFOUT class Post extends React.PureComponent { // or
React.Component render() { return ( <div className="post"> <PostHeader model={this.props.model} /> <PostBody model={this.props.model} /> </div> ); } } function PostHeader(props) { // ... } function PostBody(props) { // ... } Pure Pure This wasn’t merged

"QJUGBMMPGTIPVME$PNQPOFOU6QEBUF import shallowCompare from ‘react-addons-shallow-compare’; class Item extends React.Component {
shouldComponentUpdate(nextProps, nextState) { return shallowCompare(this, nextProps, nextState); } render() { return ( <div> <p>{this.props.name}</p> <button onClick={this.props.onClick}>click</button> </div> ); } } <Item name=“foo” onClick={() => console.log(‘click’)} />

SFBDUBEEPOTQFSG w 1FSGIBTSFXSJUUFOCZ%BO"CSBNPWBUW w QSJOU%0.SFOBNFEUPQSJOU0QFSBUJPOT w :PVDBO 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);

XIZEJEZPVVQEBUF w IUUQTHJUIVCDPNHBSCMFTXIZEJEZPVVQEBUF w zJGEFpOFB$PNQPOFOUIBTDPNQPOFOU%JE6QEBUF UIF XIZEJEZPVVQEBUFXJMMOPUXPSLz import React from
‘react’; import {whyDidYouUpdate} from 'why-did-you-update'; whyDidYouUpdate(React); // monkey patches for React

w 1SPQTJTJNNVUBCMF Wʙ w 0CKFDUGSFF[F!EFW Wʙ w "EEFE3FBDUDMPOF&MFNFOU
Wʙ w TFU1SPQTBOESFQMBDF1SPQTIBWFHPOF W w 1SPQ5ZQFTJTBMFHBDZGFBUVSF w :PVDBOVTF'MPXPS5ZQF4DSJQUJOTUFBE JNDPNQBUJCMF w *UNBZCFDPNFBTFQBSBUFEQBDLBHF 1SPQT

DPSFOPUFT.BZ

w TFU4UBUFCFIBWFTBTCBUDIFE6QEBUFTJO&WFOU-JTUFOFS BOEMJGFDZDMFNFUIPET w :PVDBOQBTTBGVODUJPOUPTFU4UBUFGPSUSBOTBDUJPOBM VQEBUFT Wʙ 4UBUF onClick() {
this.setState((state, props) => ({count: state.count + 1})); this.setState((state, props) => ({count: state.count + 1})); }

w UIFGPMMPXJOHFYBNQMF SFOEFSPDDVSTUXPUJNFT w /PCBUDIFE6QEBUFT "QJUGBMMPGCBUDIFE6QEBUFT onClick() { fetch(API_URL) .then(res
=> res.json()) .then(json => { this.setState({user: json.user}); // … this.setState({completed: true}); }); }

w 3FBDU%0.VOTUBCMF@CBUDIFE6QEBUFTQSPWJEFT CBUDIFE6QEBUFT:PVDBOBWPJEVOOFDFTTBSZSFOEFST w *U`TVOTUBCMF#VUUIF"1*JTVTFECZ3FMBZFUD VOTUBCMF@CBUDIFE6QEBUFT onClick() { fetch(API_URL) .then(res
=> res.json()) .then(json => { ReactDOM.unstable_batchedUpdates(() => { this.setState({user: json.user}); // … this.setState({completed: true}); }); }); }

3FBDU&MFNFOU

w 3FBDUDSFBUF&MFNFOUSFUVSOTQMBJOPCKFDU Wʙ w /PNPSFTQBOBOEEBUBSFBDUJE FYDFQU443 Wʙ 3FBDU&MFNFOU
// <div>Hello {name}</div> <div data-reactid=".0"> <span data-reactid=".0.0">Hello </span> <span data-reactid=".0.1">React</span> </div> <div data-reactroot> Hello  React </div>

3FG%0.

w 4USJOH3FGJTMFHBDZ:PVTIPVMEVTFDBMMCBDL3FG w %0.$PNQPOFOUTSFUVSOJUT%0./PEFBT3FG w HFU%0./PEFTIBTHPOF W w 3FBDU%0.pOE%0./PEFTSFUVSOTB%0./PEFGSPN
$PNQPTJUF$PNQPOFOUT 3FG%0. render() { let text; return ( <div> <input type=“text” ref={c => c && c.focus()} /> <input type=“text” ref={c => text = c} /> </div> ); }

$POUFYU

w $POUFYUCFDPNFTBEPDVNFOUFEGFBUVSF w IUUQGBDFCPPLHJUIVCJPSFBDUEPDTDPOUFYUIUNM w *U`TBGFBUVSFGPS3FBDUMJCSBSJFT $POUFYU const Item =
({item}, {settings}) => ( <div className={settings.theme}>{item.name}</div> ); Item.contextTypes = { settings: React.PropTypes.object };

w 8FDBOHFU4IBMMPX3FOEFSFS W w :PVDBOUFTUGPS3FBDU$PNQPOFOUTPO/PEF FOWJSPONFOU w *UEPFTO`UTVQQPSU3FGBOEMJGFDZDMFNFUIPETDPNQMFUFMZ w
*U`TBl4IBMMPXzSFOEFSJOH 5FTU const shallowRenderer = TestUtils.createRenderer(); const elementTree = shallowRenderer.render(<YourComponent />); assert(elementTree.props.children[0].type === ‘div’);

w 5FTUJOHVUJMJUJFTGPS3FBDU$PNQPOFOUT w TIBMMPX NPVOU SFOEFS w :PVDBOUFTUGPS3FBDU$PNQPOFOUFBTJMZBOE NBJOUBJOBCMF BJSCOCFO[ZNF
import {shallow} from ‘enzyme’; const wrapper = shallow(<YourComponent />); assert(wrapper.find(Link).prop(‘to’) === ‘/foo’); wrapper.find(‘button’).simulate(‘click’);

w %PFT&O[ZNFCFDPNFUIFP⒏DJBM5FTU6UJMT BJSCOCFO[ZNF core-notes May 05.

&4-JOU3FBDU

w &4-JOUIFMQTZPVUPDSFBUF3FBDU$PNQPOFOUT w FTMJOUQMVHJOSFBDU w 3FBDUTQFDJpDMJOUJOHSVMFTGPS&4-JOU w IUUQTHJUIVCDPNZBOOJDLDSFTMJOUQMVHJOSFBDU w FTMJOUQMVHJOKTYBZ
w 4UBUJD"45DIFDLFSGPSBDDFTTJCJMJUZSVMFTPO+49FMFNFOUT w IUUQTHJUIVCDPNFWDPIFOFTMJOUQMVHJOKTYBZ &4-JOU3FBDU

&4-JOU3FBDU

&4-JOU3FBDU w OPTUSJOHSFGT w QSFGFSFTDMBTT w QSFGFSTUBUFMFTTGVODUJPO w OPEJSFDUNVUBUJPOTUBUF w
TPSUDPNQ w KTYOPCJOE w KTYLFZ

3FBDU/BUJWF

w 3FBDU/BUJWFIBTBIVHFFDPTZTUFN w 'BDFCPPLJTVTJOH3FBDU/BUJWFJO'BDFCPPLBQQ 3FBDU/BUJWF

3FBDU/BUJWF

w 3FBDU/BUJWFJTKVTUBSFOEFSFS 3FBDU/BUJWF import React, {Component} from 'react'; import {TabBarIOS,
NavigatorIOS} from ‘react-native’; class App extends Component { render() { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); } }

w 3FBDU/BUJWFJTKVTUBSFOEFSFS 3FBDU/BUJWF (facebook/react) src !"" isomorphic # !"" children
# !"" classic # $"" modern !"" renderers # !"" art # !"" dom # # !"" client # # !"" server # # $"" shared # !"" native # !"" noop # $"" shared !"" shared

NBLFJUPQFODPN

"SDIJUFDUVSF

w IUUQTHJUIVCDPNSFBDUKTSFBDUCBTJD SFBDUCBTJT

w IUUQTHJUIVCDPNJBNEVTUBOUJOZSFBDUSFOEFSFS w "NJOJNVNJNQMFNFOUBUJPOPG3FBDU3FOEFSFS 5JOZ3FBDU3FOEFSFS

'VUVSF

w :PVTIPVMEXBUDISFBDUKTDPSFOPUFT w 3FBDUXJMMSFMFBTFOFXNJOPSPSQBUDIWFSTJPOTFWFSZUXP XFFLT w 5PBEPQU&NCFSMJLF3'$QSPDFTT w &YQFSJNFOUJOHXJUI4UZMF4IFFUDSFBUF
POUIFXFC w /FX3FDPODJMFS w 3FBDU$PSFJTNPSFTJNQMFS 'VUVSF

<8*1>/FX$PSF"MHPSJUIN

/FX$PSF"MHPSJUIN

/FX3FDPODJMFS*OGSB

<'JCFS>$IJME3FDPODJMFS /FX$PSPVUJOFT 1SJNJUJWF

w 4DIFEVMJOH3FBDUSFDVSTJWFSFOEFSJOH w $VSSFOUMZ SFDVSTJWFSFOEFSJOHJTTZODISPOPVT XIJDIJTB SFBTPO3FBDUJTTMPX <8*1>/FX3FDPODJMFS //
src/renderers/noop/ReactNoop.js var NoopRenderer = ReactFiberReconciler({ createHostInstance() { }, scheduleHighPriCallback(callback) { scheduledHighPriCallback = callback; }, scheduleLowPriCallback(callback) { scheduledLowPriCallback = callback; },

<8*1>/FX3FDPODJMFS function Continuation({ isSame }) { return <span>{isSame ? 'foo==bar'
: 'foo!=bar'}</span>; } function Child({ bar }) { return ReactCoroutine.createYield({ bar: bar, }, Continuation, null); } function Indirection() { return [<Child bar={true} />, <Child bar={false} />]; } function HandleYields(props, yields) { return yields.map(y => <y.continuation isSame={props.foo === y.props.bar} /> ); } function Parent(props) { return ReactCoroutine.createCoroutine( props.children, HandleYields, props ); } function App() { return <div><Parent foo={true}><Indirection /></Parent></div>; } ReactNoop.render(<App />); ReactNoop.flush();

<8*1>/FX3FDPODJMFS

<8*1>/FX3FDPODJMFS w 3FTPVSDFT w IUUQTHJUIVCDPNSFBDUKTSFBDUCBTJD w IUUQTHJUIVCDPNSFBDUKTSFBDUGVUVSFCMPCNBTUFS -BZPVUQSPUPUZQFJOEFYKT

5IBOLZPV TQFBLFSEFDLDPNLPCB

The state of React.js 2016

The state of React.js 2016

More Decks by koba04

Other Decks in Programming

Featured

Transcript