é¢æ°ã³ã³ããŒãã³ãã¯ã¯ã©ã¹ãšã©ãéãã®ã?
2019幎3æ3æ¥ â¢ âïžâïžâïžâïž 19 min read
Translated by readers into: Español ⢠Français ⢠Polski ⢠Português do Brasil ⢠æ¥æ¬èª ⢠ç®äœäžæ ⢠íêµìŽ
Read the original ⢠Improve this translation ⢠View all translated posts
Reactã®é¢æ°ã³ã³ããŒãã³ãã¯Reactã®ã¯ã©ã¹ãšã©ãéãã®ã§ãããïŒ
ãã°ããã®éããã®æšæºçãªåçã¯ãã¯ã©ã¹ã¯ïŒstateã®ãããªïŒããå€ãã®æ©èœãžã®ã¢ã¯ã»ã¹ãæäŸããããšãããã®ã§ãããHooksã«ãã£ãŠãããã¯ããæ£ããåçã§ã¯ãªããªããŸããã
ãã®ã©ã¡ãããããã©ãŒãã³ã¹ã«ãããŠåªããŠãããšèããããšããããããããŸãããã©ã¡ãã®ããšã§ãããïŒãããã®ãã³ãããŒã¯ã®å€ãã«ã¯äžåãããã®ã§ãç§ã¯ãã®çµè«ãäžãã®ã«æ éã§ããããã©ãŒãã³ã¹ã¯ãé¢æ°ãéžã¶ãã¯ã©ã¹ãéžã¶ããšããããšãããããããäž»ãšããŠãã®ã³ãŒããããŠããããšã«äŸåããŠããŸããç§ãã¡ã®èŠãŠããéããæé©åã®æŠç¥ã¯å°ã ç°ãªããšã¯ããããã®ããã©ãŒãã³ã¹ã®éãã¯ãããã§ãã
ã©ã¡ãã®ã±ãŒã¹ã§ããããã®ä»ã«çç±ãããããã¢ãŒãªãŒã¢ããã¿ãŒã§ããããšãæ°ã«ããªãéãã¯ããã§ã«ååšããŠããã³ã³ããŒãã³ããæžãçŽãããšã¯æšå¥šããŠããŸãããHooksã¯ïŒ2014幎ã®Reactãããã ã£ãããã«ïŒæªã æ°ãããããã¹ããã©ã¯ãã£ã¹ãã®ããã€ãã¯ãã©ããã¥ãŒããªã¢ã«ã«çµã¿èŸŒãã¹ãããŸã èŠã€ããããŠããªãã®ã§ãã
ã§ã¯ç§ãã¡ã«äœãã§ããã®ã§ãããïŒReactã®é¢æ°ãšã¯ã©ã¹ã«äœãæ ¹æ¬çãªéãã¯ããã®ã§ããããïŒãã¡ãããããŸã â ããã¯ã¡ã³ã¿ã«ã¢ãã«ã«ããã®ã§ãããã®ãã¹ãã§ã¯ããããã®æã倧ããªéãã«ã€ããŠèŠãŠãããŸããããã¯2015幎ã«é¢æ°ã³ã³ããŒãã³ããå°å ¥ãããæããååšãããã®ã§ãããå€ãã®å ŽåèŠèœãšãããŠããŸãã:
é¢æ°ã³ã³ããŒãã³ãã¯ã¬ã³ããªã³ã°ãããå€ãæç²ããŸãã
ãã®æå³ãçŽè§£ããŠãããŸãããã
泚: ãã®ãã¹ãã¯ã¯ã©ã¹ãããã¯é¢æ°ã«å¯Ÿãã䟡å€å€æãè¡ããã®ã§ã¯ãããŸãããç§ã¯Reactã«ãããããã2ã€ã®ããã°ã©ãã³ã°ã¢ãã«ã®éãã説æããŠããã ãã§ããé¢æ°ãããåºãæ¡çšããããšã«é¢ãã質åã«ã€ããŠã¯ãHooksã«ã€ããŠã®ãããã質åãåç §ããŠãã ããã
以äžã®ã³ã³ããŒãã³ãã«ã€ããŠèããŠãã ãã:
function ProfilePage(props) {
const showMessage = () => {
alert('Followed ' + props.user);
};
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return (
<button onClick={handleClick}>Follow</button>
);
}
ãã®ã³ã³ããŒãã³ãã¯ããããã¯ãŒã¯ãªã¯ãšã¹ããsetTimeout
ã«ãã£ãŠã·ãã¥ã¬ãŒãããŠã確èªã®ã¢ã©ãŒããåºããã¿ã³ã衚瀺ããŸããäŸãã°ãããprops.user
ã'Dan'
ãªãã3ç§åŸã«'Followed Dan'
ãšè¡šç€ºããŸããã·ã³ãã«ã§ãã
(äžèšã®äŸã§ã¢ããŒé¢æ°åŒã䜿ããfunctionåŒã䜿ãããšããã®ã¯åé¡ã§ã¯ãããŸãããfunction handleClick()
ã¯å
šãåãããã«åãã§ãããã)
ã§ã¯ãããã¯ã©ã¹ãšããŠã¯ã©ã®ããã«æžãã§ãããïŒåçŽã«å€æãããšä»¥äžã®ããã«ãªããŸã:
class ProfilePage extends React.Component {
showMessage = () => {
alert('Followed ' + this.props.user);
};
handleClick = () => {
setTimeout(this.showMessage, 3000);
};
render() {
return <button onClick={this.handleClick}>Follow</button>;
}
}
ããã2ã€ã®ã³ãŒãã®ã¹ããããã¯äžè¬çã«åçã®ãã®ã ãšèããããŠããŸãã人ã ã¯å€ãã®å Žåããããã®ãã¿ãŒã³éãèªç±ã«ãªãã¡ã¯ã¿ããŸãããããåŒãèµ·ããçµæã«æ°ãã€ããã«:
ãããããããã®2ã€ã®ã¹ããããã¯åŸ®åŠã«ç°ãªããã®ãªã®ã§ããããèŠãŠãã ããããããã®éããããããŸãããïŒå人çã«ã¯ãæ°ãã€ããŸã§ã«ãã°ããæéãããããŸããã
ãã®å ã«ãã¿ãã¬ããããŸããèªåã§è§£ãæãããã人ã®ããã«ãã©ã€ãã㢠ãçšæããŸããããã®èšäºã®æ®ãã¯ãã®éããšãªããããåé¡ãªã®ããã説æããŠããŸãã
ããããå ãç¶ããåã«ãããã§èª¬æããéãã¯Reactã®Hooksãšæ¬è³ªçã«ã¯äœãé¢ä¿ããªãããšããããšã匷調ããŠããããã§ããäžèšã®äŸã«è³ã£ãŠã¯Hooksã䜿ã£ãŠããããŸããïŒ
以äžã¯å šãŠReactã«ãããé¢æ°ãšã¯ã©ã¹ã®éãã«ã€ããŠã§ããããããªããReactã®ã¢ããªã±ãŒã·ã§ã³ã§ããé »ç¹ã«é¢æ°ã䜿ãã€ãããªããç解ãããšãããšæããŸãã
Reactã®ã¢ããªã±ãŒã·ã§ã³ã§äžè¬çã«èŠããããã°ãçšããŠãã®éãã解説ããŸãããã
ãã®ãµã³ãã«ã®ãµã³ãããã¯ã¹ãéããŠèŠãŠãã ãããçŸåšã®ãããã£ãŒã«ã®ããã®ã»ã¬ã¯ã¿ããããäžã«èšèŒãã2çš®é¡ã®å®è£
ã®ProfilePage
ãããããããã©ããŒãã¿ã³ãã¬ã³ããªã³ã°ããŠããŸãã
以äžã®äžé£ã®åäœãããããã®ãã¿ã³ã§è©ŠããŠèŠãŠãã ãã:
- ãã©ããŒãã¿ã³ã®ã©ã¡ãã1ã€ãã¯ãªãã¯ããã
- 3ç§ä»¥å ã«ãããã£ãŒã«ã®éžæãå€æŽããã
- ã¢ã©ãŒãã®ããã¹ããèªãã
åŠãªéãã«æ°ãã€ãã§ããã:
- é¢æ°ã®
ProfilePage
ã®å Žåã Danã®ãããã£ãŒã«ã§ãã©ããŒãã¯ãªãã¯ããŠãSophieã®ãããã£ãŒã«ã«ç§»åããŠããã¢ã©ãŒãã¯'Followed Dan'
ã®ãŸãŸã§ãã - ã¯ã©ã¹ã®
ProfilePage
ã®å Žåãã¢ã©ãŒãã¯'Followed Sophie'
ãšãªããŸã:
ãã®äŸã§ã¯ãæåã®æåãæ£ãããã®ã§ããããç§ããã人ããã©ããŒããŠããã®åŸå¥ã®äººã®ãããã£ãŒã«ã«ç§»åãããšããŠããã³ã³ããŒãã³ãã¯ç§ã誰ããã©ããŒããã®ãééããŠã¯ãããŸããããã®ã¯ã©ã¹ã®å®è£ ã¯æããã«ãã°ã£ãŠããŸãã
(åœç¶Sophieããã©ããŒãã¹ãã ãšã¯æããŸããã)
ã§ã¯ã¯ã©ã¹ã®äŸã¯ãªããã®ããã«æ¯ãèãã®ã§ãããïŒ
ã¯ã©ã¹å
ã®showMessage
ã¡ãœãããããèŠãŠãŸããã:
class ProfilePage extends React.Component {
showMessage = () => {
alert('Followed ' + this.props.user); };
ãã®ã¯ã©ã¹ã¡ãœããã¯this.props.user
ãèªã¿åã£ãŠããŸããpropsã¯Reactã«ãããŠã¯ã€ãã¥ãŒã¿ãã«ãªã®ã§ãå€åããŸãããããããthis
ã¯ä»ããã§ã¯ããããŠãããŸã§ãããã¥ãŒã¿ãã«ãªã®ã§ãã
å®éããããããã¯ã©ã¹ã«ãããthis
ã®ç®çãªã®ã§ããReactèªäœããããæã«å¿ããŠæžãæããããšã§ãrender
ãã©ã€ããµã€ã¯ã«ã¡ãœããã®äžã§ãã®æ°é®®ãªããŒãžã§ã³ãèªã¿åãããšãã§ããã®ã§ãã
ãªã®ã§ããªã¯ãšã¹ãã®éä¿¡äžã«ã³ã³ããŒãã³ããå床ã¬ã³ããªã³ã°ãããšãthis.props
ã¯å€åããŸãããããŠshowMessage
ã¡ãœããã¯ãæ°ãããããprops
ããuser
ãèªã¿åãããšã«ãªããŸãã
ããã¯ãŠãŒã¶ã€ã³ã¿ãã§ãŒã¹ã®æ§è³ªã«ãããèå³æ·±ãç¥èŠãæããã«ããŠããŸãããããUIãæŠå¿µçã«ã¯ã¢ããªã±ãŒã·ã§ã³ã®çŸåšã®ç¶æ ãè¡šãæ©èœã§ããããšãããšãã€ãã³ããã³ãã©ã¯ããã®èŠãç®äžã®çµæåæ§ãã¬ã³ããªã³ã°çµæã®äžéšã§ããã€ãã³ããã³ãã©ã¯ç¹å®ã®propsãšstateãçšããç¹å®ã®renderã«ãå±ããŠããŸããã
ããããthis.props
ãèªã¿åãã³ãŒã«ããã¯ãæã£ãtimeoutãã¹ã±ãžã¥ãŒãªã³ã°ããããšã¯ããã®é£æºãç Žå£ããŸããshowMessage
ãšããã³ãŒã«ããã¯ã¯ãããã®renderãšããçŽã¥ããããšããªããæ£ããpropsããèŠå€±ã£ãŠããŸããã®ã§ããthis
ããã®èªã¿åãããããã®é£çµãåãé¢ããŸãã
é¢æ°ã³ã³ããŒãã³ããååšããªããšããŸãããã ã©ããã£ãŠãã®åé¡ã解決ã§ããã§ãããïŒ
æ£ããpropsãçšããrender
ãšãããã®propsãèªã¿åãshowMessage
ã³ãŒã«ããã¯ãšã®é£çµãã©ãã«ãã修埩ããããã§ããã©ããéäžã§props
ã¯éã«è¿·ã£ãŠããŸã£ãŠããŸãã
ãã®æ¹æ³ã®1ã€ã¯this.props
ãã€ãã³ãã®æ©ãå°ç¹ã§èªã¿åããtimeoutãå®æããããã³ãã©ã«ããããæ瀺çã«æž¡ãããšã§ã:
class ProfilePage extends React.Component {
showMessage = (user) => { alert('Followed ' + user);
};
handleClick = () => {
const {user} = this.props; setTimeout(() => this.showMessage(user), 3000);
};
render() {
return <button onClick={this.handleClick}>Follow</button>;
}
}
ããã¯ããŸããããŸãããããããã®ã¢ãããŒãã¯ã³ãŒããããªãåé·ã«ããæéãçµã€ã«ã€ãã«ãšã©ãŒãèµ·ãããããããŸãããã1ã€ä»¥äžã®propãå¿
èŠã«ãªã£ããã©ããªãã§ãããïŒããstateã«ã¢ã¯ã»ã¹ããå¿
èŠãã§ãŠãããïŒããshowMessage
ãå¥ã®ã¡ãœãããåŒãã§ããããŠãã®ã¡ãœãããthis.props.something
ãthis.state.something
ãèªã¿åãã®ã ãšããããå
šãåãåé¡ã«å床çŽé¢ããããšã«ãªããŸãããããŠshowMessage
ããåŒã°ããŠããå
šãŠã®ã¡ãœããã«this.props
ãšthis.state
ãåŒæ°ãšããŠæž¡ããªããã°ãªããªããªãã§ãããã
ããããããšã¯ã¯ã©ã¹ãéåžžããããã¯ãã®äººéå·¥åŠãæã¡è² ããããšã«ãªããŸãããŸããããããããšãèŠããŠããã匷å¶ããã®ã¯é£ããããšã§ããã ããå€ãã®å Žåã¯ä»£ããã«ãã°ãäœãããšã§æãæã€ããšã«ãªãã®ã§ãã
åãããã«ãhandleClick
ã®å
éšã«alert
ãã€ã³ã©ã€ã³åããããšã¯ãã倧ããªåé¡ãžã®åçã«ãªããŸãããç§ãã¡ã¯ãããå€ãã®ã¡ãœããã«åå²ã§ãããããªããæ¹ã§ããããŠããã ãã§ã¯ãªãããã®åŒã³åºãã«é¢é£ããrenderã«å¯Ÿå¿ããpropsãšstateãèªã¿åãããããªããæ¹ã§ãã³ãŒããæ§ç¯ãããã®ã§ãããã®åé¡ã¯Reactã«ç¹æã®åé¡ã§ã¯ãããŸããã - this
ã®ãããªãã¥ãŒã¿ãã«ãªãªããžã§ã¯ãã«ããŒã¿ã眮ãããããUIã©ã€ãã©ãªã§ãåçŸã§ããåé¡ã§ãã
ãããããŠãã¡ãœãããã³ã³ã¹ãã©ã¯ã¿å ã§bindã§ããã§ããããïŒ
class ProfilePage extends React.Component {
constructor(props) {
super(props);
this.showMessage = this.showMessage.bind(this); this.handleClick = this.handleClick.bind(this); }
showMessage() {
alert('Followed ' + this.props.user);
}
handleClick() {
setTimeout(this.showMessage, 3000);
}
render() {
return <button onClick={this.handleClick}>Follow</button>;
}
}
ãããããã¯äœã修埩ããŠããŸãããåé¡ã¯this.props
ããèªã¿åãã®ãé
ãããããšã«ããã®ãæãåºããŠãã ãããã©ã®ã·ã³ã¿ãã¯ã¹ã䜿ã£ãŠããã®ããåé¡ã§ã¯ãªãã®ã§ãïŒãããããã®åé¡ã¯ç§ãã¡ãJavaScriptã®ã¯ããŒãžã£ã«å®å
šã«é Œã£ãŠããŸãã°æ¶ãå»ãã®ã§ãã
ã¯ããŒãžã£ã¯å€ãã®å Žåé¿ããããŠããŸãããªããªãæéã®çµéãšå ±ã«æžãæãããåŸãå€ã«ã€ããŠèããã®ã¯å°é£ã ããã§ãããããReactã§ã¯ãpropsãšstateã¯ã€ãã¥ãŒã¿ãã«ã§ãïŒïŒãããã¯å°ãªããšããããã§ããããšã匷ãæšå¥šãããŠããŸããïŒãã®ããšã¯ã¯ããŒãžã£ã«ãããäž»èŠãªfootgunãåãé€ããŸãã
ããã¯ãããç¹å®ã®renderã§çºçããpropsãstateãéã蟌ããã°ããããããã€ã§ãåããã®ã ãšã¿ãªããããšãæå³ããŸã:
class ProfilePage extends React.Component {
render() {
// propsãæç²ããŸããã! const props = this.props;
// 泚: ããã¯*renderå
éš*ã§ãã
// ãªã®ã§ãããã¯ã¯ã©ã¹ã¡ãœããã§ã¯ãããŸããã
const showMessage = () => {
alert('Followed ' + props.user); };
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return <button onClick={handleClick}>Follow</button>;
}
}
ããªãã¯renderã®ç¬éã®propsããæç²ãããã®ã§ã:
ããããããšã§ãïŒshowMessage
ãå«ãïŒãã®å
éšã®ããããã³ãŒãã¯ãç¹å®ã®renderã®ããã®propsãèŠãããšãä¿èšŒãããŸããããReactããããŒãºãæ¶ããŠããŸããããšã¯ãããŸããã
ãã®äžã§ããã®å éšã«ãã«ããŒé¢æ°ã奜ããªã ãè¿œå ããããšã§ããŸãããããã¯å šãŠæç²ãããpropsãšstateã䜿ããŸããã¬ã¹ãã¥ãŒ(解æŸ)ãžãšéããã¯ããŒãžã£(éé)ãªã®ã§ãïŒ
äžèšã®äŸã¯æ£ããã®ã§ãããäžéå端ã«èŠããŸããããã¯ã©ã¹ã¡ãœããã䜿ã代ããã«render
å
éšã«é¢æ°ãå®çŸ©ãããªããã¯ã©ã¹ãæã€ããšã®æ矩ã¯äœã§ããããïŒ
確ãã«ããã®åšãã®ã¯ã©ã¹ãšãããæ®»ããåãé€ãããšã§ãã³ãŒããã·ã³ãã«ã«ããããšãå¯èœã§ã:
function ProfilePage(props) {
const showMessage = () => {
alert('Followed ' + props.user);
};
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return (
<button onClick={handleClick}>Follow</button>
);
}
å
ã«æããäŸã®ããã«ãprops
ã¯æç²ãããŠããŸã - ReactãããããåŒæ°ãšããŠæž¡ããŸããthis
ãšã¯ç°ãªããprops
ãªããžã§ã¯ãèªäœã¯Reactã«ãã£ãŠæžãæããããããšã¯ãããŸããã
é¢æ°å®çŸ©å
ã§props
ãåå²ãããšããã®ããšãããå°ãæçœã«ãªããŸã:
function ProfilePage({ user }) { const showMessage = () => {
alert('Followed ' + user); };
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return (
<button onClick={handleClick}>Follow</button>
);
}
芪ã³ã³ããŒãã³ããå¥ã®propsã§ProfilePage
ãã¬ã³ããªã³ã°ããæãReactã¯ProfilePage
é¢æ°ãå床åŒã³åºããŸãããããç§ãã¡ãæ¢ã«ã¯ãªãã¯ãããã®ã€ãã³ããã³ãã©ã¯ãã以åã®renderã«ãå±ããŠãããŸãããããŠãã¡ãã¯ç¬èªã®user
ã®å€ã䜿ã£ãŠããããã®showMessage
ã³ãŒã«ããã¯ã¯ãã®å€ãèªã¿åã£ãŠããŸãããããã¯ãã®ãŸãŸæ®ã£ãŠããã®ã§ãã
ãããããã®é¢æ°ããŒãžã§ã³ã®ãã¢ã«ãããŠãSophieã®ãããã£ãŒã«ã«ãŠãã©ããŒãã¯ãªãã¯ããŠããã®åŸSunilã«éžæãå€ããŠã'Followed Sophie'
ãšã¢ã©ãŒããã§ãçç±ã§ã:
ãã®æåã¯æ£ãããã®ã§ãã(Sunilããã©ããŒããæ¹ããããšæãã®ã§ããïŒ)
ããã§Reactã«ãããé¢æ°ãšã¯ã©ã¹ã®å€§ããªéããç解ã§ããŸãã:
é¢æ°ã³ã³ããŒãã³ãã¯ã¬ã³ããªã³ã°ãããå€ãæç²ããŸãã
Hooksã䜿ãã°ãåãååãstateã«ãé©å¿ã§ããŸãã以äžã®äŸãèããŠã¿ãŠäžãã:
function MessageThread() {
const [message, setMessage] = useState('');
const showMessage = () => {
alert('You said: ' + message);
};
const handleSendClick = () => {
setTimeout(showMessage, 3000);
};
const handleMessageChange = (e) => {
setMessage(e.target.value);
};
return (
<>
<input value={message} onChange={handleMessageChange} />
<button onClick={handleSendClick}>Send</button>
</>
);
}
(ãã¡ãã ã©ã€ããã¢ã§ãã)
ããã¯ããã§ããã¡ãã»ãŒãžã¢ããªã®UIã§ã¯ãããŸããããåããã€ã³ãã説æããŠããŸã: ããç§ãç¹å®ã®ã¡ãã»ãŒãžãéãå Žåããã®ã³ã³ããŒãã³ãã¯ã©ã®ã¡ãã»ãŒãžãéãããããééããã¹ãã§ã¯ãããŸããããã®é¢æ°ã³ã³ããŒãã³ãã®message
ã¯ããã©ãŠã¶ã«åŒã³åºãããã¯ãªãã¯ãã³ãã©ãè¿åŽããrenderã«ãå±ãããstateãæç²ããŸãããªã®ã§message
ã¯ç§ããSendããã¯ãªãã¯ããæã®å
¥åã«ãã£ããã®ã«ãªããŸãã
Reactã®é¢æ°ãããã©ã«ãã§propsãšstateãæç²ããããšã¯ããã£ããšæããŸããããããããç§ãã¡ãããã®ç¹å®ã®renderã«å±ããŠããªãææ°ã®propsãããã¯stateãèªã¿åãããå Žåã¯ã©ããªãã§ãããïŒããç§ãã¡ããæªæ¥ããããããèªã¿åããããå Žåã¯ã©ãã§ãããïŒ
ã¯ã©ã¹ã«ãããŠã¯ãthis.props
ãããã¯this.state
ãèªã¿åãããšã§ãããã§ããã§ãããããªããªãthis
èªäœããã¥ãŒã¿ãã«ã ããã§ããReactããããæžãæããŸããé¢æ°ã³ã³ããŒãã³ãã«ãããŠããããããã³ã³ããŒãã³ãã®renderã«å
±æããããã¥ãŒã¿ãã«ãªå€ãæã€ããšãå¯èœã§ããããã¯ãrefããšåŒã°ããŠããŸã:
function MyComponent() {
const ref = useRef(null);
// `ref.current`ã®èªã¿åãããããã¯ãæžã蟌ã¿ãå¯èœã§ãã
// ...
}
ããããªãããrefã¯ããªããèªåã§ç®¡çããå¿ èŠããããŸãã
refã¯ã€ã³ã¹ã¿ã³ã¹ãã£ãŒã«ããšåã圹å²ãæã¡ãŸããããã¯ãã¥ãŒã¿ãã«ã§åœä»€åã®äžçãžã®è±åºå£ã§ãããDOMã®refããšããèãã«éŠŽæã¿ããããããããŸãããããã®ã³ã³ã»ããã¯ã¯ããã«æ±çšçã§ããããã¯äžã«äœããå ¥ããããã®åãªãå ¥ãç©ãªã®ã§ãã
èŠèŠçã«ããthis.something
ã¯something.current
ã®é¡ã®ããã§ãããããã¯åãã³ã³ã»ãããè¡šããŠããŸãã
ããã©ã«ãã§ã¯ãReactãé¢æ°ã³ã³ããŒãã³ãå ã§ææ°ã®propsãstateã®ããã®refãäœãããšã¯ãããŸãããå€ãã®å Žåãããã¯å¿ èŠãããŸããããããããã¢ãµã€ã³ããã®ã¯ç¡é§ãªä»äºã§ããããããããããããããããã°ãã®å€ãæåã§è¿œè·¡ããããšã¯å¯èœã§ã:
function MessageThread() {
const [message, setMessage] = useState('');
const latestMessage = useRef('');
const showMessage = () => {
alert('You said: ' + latestMessage.current); };
const handleSendClick = () => {
setTimeout(showMessage, 3000);
};
const handleMessageChange = (e) => {
setMessage(e.target.value);
latestMessage.current = e.target.value; };
showMessage
å
ã®message
ãèªã¿åããšãSendãã¿ã³ãæŒããæã®messageãèŠãããšã«ãªãã§ãããããããlatestMessage.current
ãèªã¿åããšãããšãSendãã¿ã³ãæŒãããåŸã«ã¿ã€ãã³ã°ãç¶ãããšããŠãããã®ææ°ã®å€ãååŸãããŸãã
èªåã§ãã®éããèŠãããã°ããã®2ã€ã®ãã¢ãæ¯èŒã§ããŸããrefã¯ã¬ã³ããªã³ã°ã®äžè²«æ§ãããªããã¢ãŠããããæ¹æ³ã§ãããå Žåã«ãã£ãŠã¯äŸ¿å©ãªãã®ã§ãã
äžè¬çã«ãã¬ã³ããªã³ã°ã®éäžã§refãèªã¿åã£ããã»ãããããããããšã¯é¿ããã¹ãã§ãããªããªãããã¯ãã¥ãŒã¿ãã«ã ããã§ããç§ãã¡ã¯ã¬ã³ããªã³ã°ãäºæž¬å¯èœãªãã®ã«ä¿ã¡ãããšæã£ãŠããŸããããããããç¹å®ã®propãstateã®ææ°ã®å€ãååŸããããªããæåã§refãæŽæ°ããã®ã¯é¢åã§ããããå¯äœçš(effect)ã䜿ãããšã§ãããèªååããããšãå¯èœã§ã:
function MessageThread() {
const [message, setMessage] = useState('');
// ææ°ã®å€ã远跡ãç¶ãã const latestMessage = useRef(''); useEffect(() => { latestMessage.current = message; });
const showMessage = () => {
alert('You said: ' + latestMessage.current); };
(ãã¢ã¯ãã¡ãã)
DOMãæŽæ°ãããåŸã«ã®ã¿refã®å€ãå€åããããã«ãå¯äœçšã®å éšã§ã¢ãµã€ã³ãè¡ããŸãããã®ããšã¯ã¬ã³ããªã³ã°ãå²ã蟌ã¿å¯èœã§ããããšã«äŸåããŠããTime SlicingãSuspenseã®ãããªæ©èœãããã®æžãæããå£ããªãããšãä¿èšŒããŸãã
ãã®ãããªåœ¢ã§refã䜿ãããšã¯ããŸãå¿ èŠã«ãªããŸãããéåžžã®å Žåpropsãstateãæç²ããããšãããè¯ãããã©ã«ãã§ããããããintervalsãsubscriptionsã®ãããªåœä»€åã®APIãæ±ãæã«ã¯ãããã¯äŸ¿å©ãªãã®ã«ãªãåŸãŸããã©ã®ãããªå€ã§ã远跡ã§ããããšããããšãèŠããŠãããŠãã ããã1ã€ã®propãstateå€æ°ãpropsãªããžã§ã¯ãå šäœããããã¯é¢æ°ã§ããããã§ãã
ãã®ãã¿ãŒã³ã¯ãuseCallback
ã®äžèº«ãé »ç¹ã«å€ãããããªå Žåãªã©ã§ã®ãæé©åã«ãããŠãæçšã§ãããã ãreducerã䜿ãããšãå€ãã®å Žåã¯ããè¯ããœãªã¥ãŒã·ã§ã³ã§ããïŒããã¯ä»åŸã®ããã°ãã¹ãã®ãããã¯ã§ãïŒïŒ
ãã®ãã¹ãã§ã¯ãã¯ã©ã¹ã«ãããäžè¬çãªå£ãæ¹ã®ãã¿ãŒã³ãããããŠã¯ããŒãžã£ãããã修埩ããã®ã«ã©ãã ã圹ç«ã€ããèŠãŠããŸããããããäŸåããé åãæå®ããããšã§Hooksãæé©åããããšãããšãã¯ããŒãžã£ãå€ããªã£ãŠããŸããšãããã°ã«ééãåŸãããšã«æ°ã¥ãããããããŸãããããã¯ã¯ããŒãžã£ãåé¡ã ãšããããšã§ããããïŒç§ã¯ããã¯æããŸããã
ãããŸã§ã§èŠãŠããããã«ãã¯ããŒãžã£ã¯æ°ãã€ãã®ãé£ããç¹çŽ°ãªåé¡ãå®éã«ä¿®åŸ©ããŸããåæ§ã«ã䞊åã¢ãŒãã§æ£ããåãã³ãŒããæžãã®ãã¯ããã«å®¹æã«ããŸãããããå¯èœã«ãªãã®ã¯ããã®ã³ã³ããŒãã³ãã®ããžãã¯ãã¬ã³ããªã³ã°ãããæã®æ£ããpropsãšstateãéã蟌ããããã§ãã
ç§ããããŸã§èŠãŠããããããã±ãŒã¹ã«ãããŠããå€ããªã£ãã¯ããŒãžã£ãåé¡ã¯ãé¢æ°ã¯å€åããªããããpropsã¯åžžã«åãã ããšãã誀ã£ãæ³å®ã®ããã§èµ·ããŠããŸãããªã®ã§ããã®ãã¹ãããããã¯ã£ãã説æããããšã®å©ãã«ãªãã°ãšæãã®ã§ãããã¯ããŒãžã£ãåé¡ã ãšããã®ã¯æ£ãããããŸããã
é¢æ°ã¯ãã®propsãšstateãéã蟌ããŸã - ã ããããããäžè²«ããŠããããšã¯åæ§ã«éèŠãªããšãªã®ã§ããããã¯ãã°ã§ã¯ãªããé¢æ°ã³ã³ããŒãã³ãã®æ©èœã§ããé¢æ°ã¯ãäŸãã°useEffect
ãuseCallback
ã®ãäŸåããé
åãããé€å€ãããã¹ãã§ã¯ãããŸãããïŒé©åãªä¿®æ£ã¯éåžžuseReducer
ãäžèšã®useRef
ãšãããœãªã¥ãŒã·ã§ã³ã§ã - ãã®ã©ã¡ããéžã¶ã¹ããã«ã€ããŠã¯è¿ããã¡ã«ããã¥ã¡ã³ãåããŸããïŒ
Reactã®å€§åã®ã³ãŒããé¢æ°ã§æžãæãç§ãã¡ã¯ã³ãŒãã®æé©åãæéã®çµéãšå ±ã«å€ããå€ã«ã€ããŠã®èªåã®çŽæã調æŽããå¿ èŠãã§ãŠããŸãã
ãããŸã§ã§æ°ãã€ããHooksã䜿ãéã®ãã¹ããªã¡ã³ã¿ã«ã«ãŒã«ã¯ãããããå€ãããããæã«å€ããåŸããã®ããã«ã³ãŒããæžããã ã
é¢æ°ããã®ã«ãŒã«ã®äŸå€ã§ã¯ãããŸããããããReactã®åŠç¿è³æã§å ±éã®ãã¬ããžã«ãªãã«ã¯æéããããã§ããããã¯ã©ã¹ã®ãã€ã³ãã»ããããã®èª¿æŽãå¿ èŠã«ãªããŸããã§ãããã®èšäºããã®ããšãæ°é®®ãªç®ã§èŠãããšã®å©ãã«ãªãã°ãšæã£ãŠããŸãã
Reactã®é¢æ°ã¯åžžã«ãã®å€ãæç²ããŸã - ãããŠãããããªãã ããããããã£ãã§ãããã
圌ãã¯å®å šã«å¥çš®ã®ãã±ã¢ã³ãªã®ã§ãã