React Refs ćå ę¬ēć«č§£čŖ¬ććuseRef 㨠createRef ć«ē¦ē¹ćå½ć¦ć¾ććć°ćć¼ćć«ć¢ććŖć±ć¼ć·ć§ć³ć«ćććå¹ēēćŖć³ć³ćć¼ćć³ćē®”ēćØDOMć¢ćÆć»ć¹ć«ććććććć©ć®ććć«ććć¤ä½æēØććććå¦ć³ć¾ćććć
React Refsļ¼useRef 㨠createRef ć®č§£ę
Reactéēŗć®ćć¤ććććÆćŖäøēć§ćÆćć³ć³ćć¼ćć³ćć®ē¶ę
ćå¹ēēć«ē®”ēććDocument Object Modelļ¼DOMļ¼ćØććåćććććØćäøåÆę¬ ć§ććReact RefsćÆćDOMč¦ē“ ć¾ććÆReactć³ć³ćć¼ćć³ćć«ē“ę„ć¢ćÆć»ć¹ććć³ęä½ććććć®ć”ć«ććŗć ćęä¾ćć¾ććRefsćä½ęććććć®2ć¤ć®äø»č¦ćŖę¹ę³ć«ćÆćuseRefćØcreateRefćććć¾ććć©ć”ććRefsćä½ęććē®ēćęććć¾ćććå®č£
ćØć¦ć¼ć¹ć±ć¼ć¹ćē°ćŖćć¾ćććć®ć¬ć¤ććÆććććć®2ć¤ć®ć¢ććć¼ććč§£ęććē¹ć«ć°ćć¼ćć«ćŖćŖć¼ćć£ćØć³ć¹åćć«éēŗććéć«ćReactćććøć§ćÆćć§ćććććå¹ęēć«ćć¤ćć©ć®ććć«ę“»ēØćććć«ć¤ćć¦ć®ę確åćęä¾ććććØćē®ēćØćć¦ćć¾ćć
React Refsć®ēč§£
Refļ¼referenceć®ē„ļ¼ćÆćReactćDOMćć¼ćć¾ććÆReactć³ć³ćć¼ćć³ćć«ē“ę„ć¢ćÆć»ć¹ć§ććććć«ććę©č½ć§ćććććÆć仄äøć®ćććŖå “åć«ē¹ć«å½¹ē«ć”ć¾ćć
- å „åćć£ć¼ć«ćć«ćć©ć¼ć«ć¹ćććŖć©ćDOMč¦ē“ ćē“ę„ęä½ććć
- åć³ć³ćć¼ćć³ćć®ć”ć½ććć¾ććÆććććć£ć«ć¢ćÆć»ć¹ććć
- åć¬ć³ććŖć³ć°ćå¼ćčµ·ććććØćŖććć¬ć³ćć¼éć§ęē¶ććå¤ćē®”ēććļ¼ćÆć©ć¹ć³ć³ćć¼ćć³ćć®ć¤ć³ć¹ćæć³ć¹å¤ę°ć«ä¼¼ć¦ćć¾ćļ¼ć
ReactćÆćUIćē¶ę ćØćććććéćć¦ē®”ēććć宣čØēćŖć¢ććć¼ććęØå„Øćć¦ćć¾ćććē“ę„ęä½ćåæ č¦ćŖē¶ę³ćććć¾ććRefsćÆćReactć®å®£čØēćŖę§č³ŖćØå½ä»¤ēćŖDOMęä½ć®éć®ć®ć£ćććåććę¹ę³ćęä¾ćć¾ćć
createRefļ¼ćÆć©ć¹ć³ć³ćć¼ćć³ćć®ć¢ććć¼ć
createRefćÆReactć«ćć£ć¦ęä¾ćććć”ć½ććć§ććäø»ć«ćÆć©ć¹ć³ć³ćć¼ćć³ćå
ć§Refsćä½ęććććć«ä½æēØććć¾ćććÆć©ć¹ć³ć³ćć¼ćć³ććć¤ć³ć¹ćæć³ć¹åććććć³ć«ćcreateRefćÆę°ććRefćŖććøć§ćÆććä½ęćć¾ććććć«ćććć³ć³ćć¼ćć³ćć®åć¤ć³ć¹ćæć³ć¹ćē¬čŖć®ć¦ćć¼ćÆćŖRefćęć¤ććØćäæčؼććć¾ćć
ę§ęćØä½æēØę³
createRefć使ēØććć«ćÆćć¾ććÆć©ć¹ć³ć³ćć¼ćć³ćć§Refć宣čØćć¾ććéåøøćÆć³ć³ć¹ćć©ćÆćæå
ć§ććꬔć«ćrefå±ę§ć使ēØćć¦ćDOMč¦ē“ ć¾ććÆć³ć³ćć¼ćć³ćć«Refćć¢ćæćććć¾ćć
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
// ć³ć³ćć¼ćć³ććć¦ć³ćå¾ć«DOMč¦ē“ ć«ć¢ćÆć»ć¹ćć
this.myRef.current.focus();
}
render() {
return ;
}
}
ćć®ä¾ć§ćÆćthis.myRefćÆReact.createRef()ć使ēØćć¦ä½ęććć¦ćć¾ćććć®å¾ćå
„åč¦ē“ ć®refå±ę§ć«å²ćå½ć¦ććć¾ććć³ć³ćć¼ćć³ćććć¦ć³ććććå¾ļ¼componentDidMountå
ļ¼ćthis.myRef.currentć使ēØćć¦å®éć®DOMćć¼ćć«ć¢ćÆć»ć¹ćććććęä½ć§ćć¾ćļ¼ćć®å “åćÆćå
„åć«ćć©ć¼ć«ć¹ćć¾ćļ¼ć
ä¾ļ¼å „åćć£ć¼ć«ććøć®ćć©ć¼ć«ć¹
ć³ć³ćć¼ćć³ćććć¦ć³ćććććØćć«ćå „åćć£ć¼ć«ćć«čŖåēć«ćć©ć¼ć«ć¹ćå½ć¦ććć·ććŖćŖćčćć¦ćæć¾ćććććććÆRefsć®äøč¬ēćŖć¦ć¼ć¹ć±ć¼ć¹ć§ćććē¹ć«ćć©ć¼ć ćć¤ć³ćæć©ćÆćć£ććŖč¦ē“ ć§ćć使ēØććć¾ćć
class FocusInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentDidMount() {
this.inputRef.current.focus();
}
render() {
return (
);
}
}
ćć®ä¾ć§ćÆćFocusInputćÆćć¦ć³ćē“å¾ć«/>å
„åćć£ć¼ć«ćć«ćć©ć¼ć«ć¹ćć¾ććććć«ćććć³ć³ćć¼ćć³ććć¬ć³ććŖć³ć°ććććØććć«ć¦ć¼ć¶ć¼ć®ę³Øęćå
„åč¦ē“ ć«čŖå°ććććØć§ćć¦ć¼ć¶ć¼ćØćÆć¹ććŖćØć³ć¹ćåäøćć¾ćć
createRefć«é¢ććéč¦ćŖčę
®äŗé
- ćÆć©ć¹ć³ć³ćć¼ćć³ćć®ćæļ¼
createRefćÆćÆć©ć¹ć³ć³ćć¼ćć³ćć§ć®ä½æēØć®ććć«čØčØććć¦ćć¾ććé¢ę°ć³ć³ćć¼ćć³ćć§ćęč”ēć«ę©č½ććåÆč½ę§ćććć¾ćććęå³ććć使ēØę¹ę³ć§ćÆćŖććäŗęććŖćåä½ć«ć¤ćŖććåÆč½ę§ćććć¾ćć - åć¤ć³ć¹ćæć³ć¹ć§ę°ććRefļ¼ćÆć©ć¹ć³ć³ćć¼ćć³ćć®åć¤ć³ć¹ćæć³ć¹ćÆćē¬čŖć®
createRefćåå¾ćć¾ćććććÆćć³ć³ćć¼ćć³ćć¤ć³ć¹ćæć³ć¹éć®åé¢ćē¶ęććććć«éč¦ć§ćć
useRefļ¼é¢ę°ć³ć³ćć¼ćć³ćć®ćććÆ
useRefćÆReact 16.8ć§å°å
„ććććććÆć§ććé¢ę°ć³ć³ćć¼ćć³ćå
ć§å¤ę“åÆč½ćŖRefćŖććøć§ćÆććä½ęććę¹ę³ćęä¾ćć¾ććcreateRefćØćÆē°ćŖććuseRefćÆć³ć³ćć¼ćć³ććć¬ć³ććŖć³ć°ććććć³ć«åćRefćŖććøć§ćÆććčæćć¾ććććć«ćććåć¬ć³ććŖć³ć°ćå¼ćčµ·ććććØćŖćć¬ć³ćć¼éć§å¤ćę°øē¶åććć®ć«ēę³ēć§ćć
ę§ęćØä½æēØę³
useRefć®ä½æēØćÆē°”åć§ććuseRefćććÆćå¼ć³åŗććåęå¤ćęø”ćć¾ćććććÆćÆć.currentććććć£ćęć¤ćŖććøć§ćÆććčæćć¾ćććć®ććććć£ć使ēØćć¦ćå¤ćć¢ćÆć»ć¹ććć³å¤ę“ć§ćć¾ćć
import React, { useRef, useEffect } from 'react';
function MyFunctionalComponent() {
const myRef = useRef(null);
useEffect(() => {
// ć³ć³ćć¼ćć³ććć¦ć³ćå¾ć«DOMč¦ē“ ć«ć¢ćÆć»ć¹ćć
if (myRef.current) {
myRef.current.focus();
}
}, []);
return ;
}
ćć®ä¾ć§ćÆćuseRef(null)ćÆåęå¤nullćęć¤Refćä½ęćć¾ććuseEffectćććÆćÆćć³ć³ćć¼ćć³ćććć¦ć³ććććå¾ć«DOMč¦ē“ ć«ć¢ćÆć»ć¹ććććć«ä½æēØććć¾ććmyRef.currentććććć£ćÆćå
„åč¦ē“ ćøć®åē
§ćäæęćććć©ć¼ć«ć¹ćåÆč½ć«ćć¾ćć
ä¾ļ¼åć®ććććå¤ć®čæ½č·”
useRefć®å¼·åćŖć¦ć¼ć¹ć±ć¼ć¹ć®1ć¤ćÆćććććć®åć®å¤ć追跔ććććØć§ććRefsć®å¤ę“ćÆåć¬ć³ććŖć³ć°ćå¼ćčµ·ćććŖććććUIć«å½±éæćäøććććØćŖćć¬ć³ćć¼éć§å¤ćę°øē¶åćććå “åć«ćććć使ēØć§ćć¾ćć
import React, { useRef, useEffect } from 'react';
function PreviousValueComponent({ value }) {
const previousValue = useRef();
useEffect(() => {
previousValue.current = value;
}, [value]);
return (
ē¾åØć®å¤ļ¼{value}
åć®å¤ļ¼{previousValue.current}
);
}
ćć®ä¾ć§ćÆćpreviousValue.currentćÆvalueććććć®åć®å¤ćę ¼ē“ćć¾ććuseEffectćććÆćÆćvaluećććććå¤ę“ććććć³ć«Refćę“ę°ćć¾ććććć«ćććē¾åØć®å¤ćØåć®å¤ćęÆč¼ć§ććå¤ę“ćę¤åŗćććć¢ćć”ć¼ć·ć§ć³ćå®č£
ćććććć®ć«å½¹ē«ć”ć¾ćć
useRefć«é¢ććéč¦ćŖčę
®äŗé
- é¢ę°ć³ć³ćć¼ćć³ćć®ćæļ¼
useRefćÆćććÆć§ćććé¢ę°ć³ć³ćć¼ćć³ćć¾ććÆć«ć¹ćæć ćććÆå ć§ć®ćæä½æēØć§ćć¾ćć - ć¬ć³ćć¼éć§ę°øē¶åļ¼
useRefćććÆćÆććć¹ć¦ć®ć¬ć³ćć¼ć§åćRefćŖććøć§ćÆććčæćć¾ćććććÆćåć¬ć³ććŖć³ć°ćå¼ćčµ·ććććØćŖćå¤ćę°øē¶åććč½åć®éµćØćŖćć¾ćć - å¤ę“åÆč½ćŖ
.currentććććć£ļ¼RefćŖććøć§ćÆćć®.currentććććć£ćē“ę„å¤ę“ć§ćć¾ćć - åęå¤ļ¼
useRefć«åęå¤ćęå®ć§ćć¾ćććć®å¤ćÆćć³ć³ćć¼ćć³ććęåć«ć¬ć³ććŖć³ć°ććććØćć«.currentććććć£ć«å²ćå½ć¦ććć¾ćć - åć¬ć³ććŖć³ć°ćŖćļ¼Refć®
.currentććććć£ćå¤ę“ćć¦ććć³ć³ćć¼ćć³ćć®åć¬ć³ććŖć³ć°ćÆēŗēćć¾ććć
useRef vs. createRefļ¼č©³ē“°ćŖęÆč¼
useRefćØcreateRefć®äø”ę¹ćåå„ć«čŖæę»ććć®ć§ćććććäø¦ć¹ć¦ęÆč¼ććäø»ćŖéććØć©ć”ććéøęćć¹ćććå¼·čŖæćć¾ćććć
| ę©č½ | useRef |
createRef |
|---|---|---|
| ć³ć³ćć¼ćć³ććæć¤ć | é¢ę°ć³ć³ćć¼ćć³ć | ćÆć©ć¹ć³ć³ćć¼ćć³ć |
| ćććÆć¾ććÆć”ć½ćć | ćć㯠| ć”ć½ćć |
| Refć¤ć³ć¹ćæć³ć¹ | ćć¹ć¦ć®ć¬ć³ćć¼ć§åćRefćŖććøć§ćÆććčæćć¾ć | ć³ć³ćć¼ćć³ćć®åć¤ć³ć¹ćæć³ć¹ć§ę°ććRefćŖććøć§ćÆććä½ęćć¾ć |
| ć¦ć¼ć¹ć±ć¼ć¹ |
|
|
é©åćŖRefć®éøęļ¼ę±ŗå®ć¬ć¤ć
useRefćØcreateRefć®éć§éøęććć®ć«å½¹ē«ć¤ē°”åćŖć¬ć¤ćć仄äøć«ē¤ŗćć¾ćć
- é¢ę°ć³ć³ćć¼ćć³ćć§ä½ę„ćć¦ćć¾ććļ¼
useRefć使ēØćć¦ćć ććć - ćÆć©ć¹ć³ć³ćć¼ćć³ćć§ä½ę„ćć¦ćć¾ććļ¼
createRefć使ēØćć¦ćć ććć - åć¬ć³ććŖć³ć°ćå¼ćčµ·ććććØćŖćć¬ć³ćć¼éć§å¤ćę°øē¶åććåæ
č¦ćććć¾ććļ¼
useRefć使ēØćć¦ćć ććć - ććććć®åć®å¤ć追跔ććåæ
č¦ćććć¾ććļ¼
useRefć使ēØćć¦ćć ććć
DOMęä½ćč¶ ćć¦ļ¼Refsć®é«åŗ¦ćŖć¦ć¼ć¹ć±ć¼ć¹
DOMč¦ē“ ćøć®ć¢ćÆć»ć¹ćØęä½ćÆRefsć®äø»ćŖć¦ć¼ć¹ć±ć¼ć¹ć§ćććććććÆćć®ć³ć¢ę©č½ćč¶ ććåÆč½ę§ćęä¾ćć¾ććRefsćē¹ć«å½¹ē«ć¤é«åŗ¦ćŖć·ććŖćŖćććć¤ćč¦ć¦ćæć¾ćććć
1.åć³ć³ćć¼ćć³ćć”ć½ćććøć®ć¢ćÆć»ć¹
RefsćÆćåć³ć³ćć¼ćć³ćć§å®ē¾©ćććć”ć½ććć«ć¢ćÆć»ć¹ććććć«ä½æēØć§ćć¾ććććć«ććć親ć³ć³ćć¼ćć³ććÆåć³ć³ćć¼ćć³ćććē“ę„ć¢ćÆć·ć§ć³ćććŖć¬ć¼ćććććć¼ćæćåå¾ćććć§ćć¾ćććć®ć¢ććć¼ććÆćåć³ć³ćć¼ćć³ćć®ē“°ććå¶å¾”ćåæ č¦ćŖå “åć«ē¹ć«å½¹ē«ć”ć¾ćć
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
handleClick = () => {
// åć³ć³ćć¼ćć³ćć®ć”ć½ćććå¼ć³åŗć
this.childRef.current.doSomething();
};
render() {
return (
);
}
}
class ChildComponent extends React.Component {
doSomething = () => {
console.log('åć³ć³ćć¼ćć³ćć®ć¢ćÆć·ć§ć³ćććŖć¬ć¼ććć¾ććļ¼');
};
render() {
return ćććÆåć³ć³ćć¼ćć³ćć§ćć;
}
}
ćć®ä¾ć§ćÆćParentComponentćÆRefć使ēØćć¦ChildComponentć«ć¢ćÆć»ć¹ćććć®doSomethingć”ć½ćććå¼ć³åŗćć¾ćć
2.ćć©ć¼ć«ć¹ćØéøęć®ē®”ē
RefsćÆćå „åćć£ć¼ć«ćććć®ä»ć®ć¤ć³ćæć©ćÆćć£ććŖč¦ē“ å ć®ćć©ć¼ć«ć¹ćØéøęć®ē®”ēć«éåøøć«å½¹ē«ć”ć¾ćććććÆćć¢ćÆć»ć·ćć«ć§ć¦ć¼ć¶ć¼ćć¬ć³ććŖć¼ćŖć¤ć³ćæć¼ćć§ć¤ć¹ćä½ęććććć«äøåÆę¬ ć§ćć
import React, { useRef, useEffect } from 'react';
function FocusOnMount() {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
inputRef.current.select(); // å
„åå
ć®ććć¹ććéøęćć
}
}, []);
return ;
}
ćć®ä¾ć§ćÆćć³ć³ćć¼ćć³ćććć¦ć³ćććććØććć«/>å „åć«ćć©ć¼ć«ć¹ćććć®ććć¹ććéøęćć¾ćć
3.č¦ē“ ć®ć¢ćć”ć¼ć·ć§ć³
RefsćÆćć¢ćć”ć¼ć·ć§ć³ć©ć¤ćć©ćŖļ¼GreenSockćFramer MotionćŖć©ļ¼ćØēµćæåććć¦ćDOMćē“ę„ęä½ććč¤éćŖć¢ćć”ć¼ć·ć§ć³ćä½ęććććć«ä½æēØć§ćć¾ććććć«ćććć¢ćć”ć¼ć·ć§ć³ć·ć¼ć±ć³ć¹ćē“°ććå¶å¾”ć§ćć¾ćć
ē°”ę½ćć®ććć®ććć©JavaScriptć使ēØććä¾ļ¼
import React, { useRef, useEffect } from 'react';
function AnimatedBox() {
const boxRef = useRef(null);
useEffect(() => {
const box = boxRef.current;
if (box) {
// ē°”åćŖć¢ćć”ć¼ć·ć§ć³ļ¼ćććÆć¹ćå³ć«ē§»åćć
box.animate(
[
{ transform: 'translateX(0)' },
{ transform: 'translateX(100px)' },
],
{
duration: 1000, // 1ē§
iterations: Infinity, // ē”éć«ē¹°ćčæć
direction: 'alternate',
}
);
}
}, []);
return ;
}
ćć®ä¾ć§ćÆćWeb Animations APIć使ēØćć¦ē°”åćŖćććÆć¹ćć¢ćć”ć¼ć·ć§ć³åććę°“å¹³ę¹åć«å¾å¾©ē§»åććć¦ćć¾ćć
ć°ćć¼ćć«ć¢ććŖć±ć¼ć·ć§ć³ć§ć®React Refsć®ä½æēØć«é¢ćććć¹ććć©ćÆćć£ć¹
ć°ćć¼ćć«ćŖćŖć¼ćć£ćØć³ć¹åćć®Reactć¢ććŖć±ć¼ć·ć§ć³ćéēŗććéćÆćRefsćå½éåļ¼i18nļ¼ććć³ćć¼ć«ć©ć¤ćŗļ¼l10nļ¼ćØć©ć®ććć«ēøäŗä½ēØććććčę ®ććććØćéč¦ć§ććRefsćå¹ęēć«ä½æēØććććć®ćć¹ććć©ćÆćć£ć¹ćććć¤ć瓹ä»ćć¾ćć
1.ć¢ćÆć»ć·ććŖćć£ļ¼A11yļ¼
Refsć®ä½æēØćć¢ćÆć»ć·ććŖćć£ć«ęŖå½±éæćäøććŖćććć«ćć¦ćć ćććććØćć°ćććć°ć©ć ć§č¦ē“ ć«ćć©ć¼ć«ć¹ććå “åćć¦ć¼ć¶ć¼ć®ćć©ć¼ć«ć¹é åŗćććć©ć¼ć«ć¹ć®å¤ę“ćć¹ćÆćŖć¼ć³ćŖć¼ćć¼ććć¼ćć¼ćć¦ć¼ć¶ć¼ć«é©ćć¦ćććć©ćććčę ®ćć¦ćć ććć
import React, { useRef, useEffect } from 'react';
function AccessibleFocus() {
const buttonRef = useRef(null);
useEffect(() => {
const button = buttonRef.current;
if (button) {
// ććæć³ććć§ć«ć¦ć¼ć¶ć¼ć«ćć£ć¦ćć©ć¼ć«ć¹ććć¦ććŖćå “åć®ćæćć©ć¼ć«ć¹ćć
if (document.activeElement !== button) {
button.focus();
}
}
}, []);
return ;
}
2.å½éåćććå „åćć£ć¼ć«ć
å „åćć£ć¼ć«ććę±ćéćÆććć¾ćć¾ćŖčØčŖć§ä½æēØććććć¾ćć¾ćŖå „åę¹ę³ćęåć»ććć«ę³Øęćć¦ćć ćććRefćć¼ć¹ć®ęä½ļ¼ä¾ļ¼éøęćć«ć¼ć½ć«ä½ē½®ļ¼ćććć¾ćć¾ćŖå „åćæć¤ćććć±ć¼ć«ć§ę£ććę©č½ććććØć確čŖćć¦ćć ććććć¾ćć¾ćŖčØčŖćå „åę¹ę³ć§ć³ć³ćć¼ćć³ććå¾¹åŗēć«ćć¹ććć¦ćć ććć
3.å³ććå·¦ļ¼RTLļ¼ć¬ć¤ć¢ć¦ć
ć¢ććŖć±ć¼ć·ć§ć³ćRTLčØčŖļ¼ä¾ļ¼ć¢ć©ćć¢čŖćććć©ć¤čŖļ¼ććµćć¼ććć¦ććå “åćRefsć使ēØććDOMęä½ćéć®ć¬ć¤ć¢ć¦ććčę ®ćć¦ććććØć確čŖćć¦ćć ćććććØćć°ćč¦ē“ ćć¢ćć”ć¼ć·ć§ć³åććå “åćRTLčØčŖć®ć¢ćć”ć¼ć·ć§ć³ę¹åćå転ććććØćę¤čØćć¦ćć ććć
4.ććć©ć¼ćć³ć¹ć«é¢ććčę ®äŗé
RefsćÆDOMćØććåćććććć®å¼·åćŖę¹ę³ćęä¾ćć¾ćććéåŗ¦ć®ä½æēØćÆććć©ć¼ćć³ć¹ć®åé”ć«ć¤ćŖććåÆč½ę§ćććć¾ććē“ę„ć®DOMęä½ćÆReactć®ä»®ę³DOMćØę“åććć»ć¹ććć¤ćć¹ććäøę“åćę“ę°ć®é å»¶ćå¼ćčµ·ććåÆč½ę§ćććć¾ććRefsćÆę éć«ćåæ č¦ćŖå “åć«ć®ćæä½æēØćć¦ćć ććć
ēµč«
React Refsćē¹ć«useRefćØcreateRefćÆćReactéēŗč
ć«ćØć£ć¦äøåÆę¬ ćŖćć¼ć«ć§ććććććć®ę¹ę³ć®ćć„ć¢ć³ć¹ćØććć¤å¹ęēć«é©ēØććććēč§£ććććØćÆćå
ē¢ć§ććć©ć¼ćć³ć¹ć®é«ćć¢ććŖć±ć¼ć·ć§ć³ćę§ēÆććććć«äøåÆę¬ ć§ććcreateRefćÆćÆć©ć¹ć³ć³ćć¼ćć³ćå
ć§ć®Refsć®ē®”ēć«ćććęØęŗć§ćććåć¤ć³ć¹ćæć³ć¹ćć¦ćć¼ćÆćŖRefćęć¤ććØćäæčؼćć¾ććuseRefćÆćć¬ć³ćć¼å
Øä½ć§ć®ę°øē¶ēćŖę§č³Ŗć«ćććé¢ę°ć³ć³ćć¼ćć³ćć«ēę³ēć§ćććäøč¦ćŖåć¬ć³ććŖć³ć°ćå¼ćčµ·ććććØćŖćDOMč¦ē“ ćē®”ēććå¤ćę°øē¶åććę¹ę³ćęä¾ćć¾ćććććć®ćć¼ć«ćč³¢ćę“»ēØććććØć§ćć¢ćÆć»ć·ćć«ć§ććć©ć¼ćć³ć¹ć®é«ćć¤ć³ćæć¼ćć§ć¤ć¹ćåććć°ćć¼ćć«ćŖćŖć¼ćć£ćØć³ć¹ć«åƾåæććReactć¢ććŖć±ć¼ć·ć§ć³ć®ę©č½ćØć¦ć¼ć¶ć¼ćØćÆć¹ććŖćØć³ć¹ćåäøćććććØćć§ćć¾ćć
Reactćé²åćē¶ććć«ć¤ćć¦ććććć®åŗę¬ēćŖę¦åæµćēæå¾ććććØćÆćå°ēēććć³ęåēćŖå¢ēćč¶ ććé©ę°ēć§ć¦ć¼ć¶ć¼ćć¬ć³ććŖć¼ćŖWebćØćÆć¹ććŖćØć³ć¹ćä½ęććććć®åćäøćć¦ććć¾ććēć«ć°ćć¼ćć«ćŖć¢ććŖć±ć¼ć·ć§ć³ćęä¾ććććć«ćć¢ćÆć»ć·ććŖćć£ćå½éåćććć©ć¼ćć³ć¹ćåŖå ććććØćåæććŖćć§ćć ććć