React/radio controllers #378
Conversation
|
|
||
| export default ({ url, duration }: IProps): IUseAudio => { | ||
| const [audio] = React.useState(new Audio()); | ||
| const [, _forceUpdate] = React.useState(false); |
There was a problem hiding this comment.
forceUpdateが何をしているのかちょっとよく分からなかったので教えてほしいです！
There was a problem hiding this comment.
内部状態に変更があった時に直前の真偽値とは逆の値をセットすることで必ず再レンダリングさせるためです
There was a problem hiding this comment.
webAPIにあんまり詳しくないから教えてほしいんだけど、
addEventListenerやremoveEventListenerの第2引数にboolを渡したらどんな挙動になるんです？
There was a problem hiding this comment.
第2引数に渡しているのはconst forceUpdate = () => _forceUpdate(prevState => !prevState);という関数でboolは渡してないです。
この関数を渡すことでaudio.currentTimeなどの値が変わると必ず再レンダリングされます。
これがないとaudio.currentTime等が更新されないのでシークバーなども再レンダリングされません。
There was a problem hiding this comment.
たしかに、boolじゃなかった、
この関数を渡すことでaudio.currentTimeなどの値が変わると必ず再レンダリングされます。
これがないとaudio.currentTime等が更新されないのでシークバーなども再レンダリングされません。
なぜこのtoggleしている?関数を渡すと再レンダリングされるようになるのかがよく分かっていない、、、
There was a problem hiding this comment.
stateが変われば再レンダリングされるっていう仕様を使ってcurrentTimeとかをobserveしてるのね、なるほど
トリッキーな感じがするけどこれが普通なのかな、、
There was a problem hiding this comment.
useCallbackを使うのが正しそう？
https://ja.reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
There was a problem hiding this comment.
確かにuseCallbackの方が正しそう
別PRで修正してもいいですか？
一旦このRadioCard系を潰したいです
|
useAudioの参考URL |
|
|
||
| export default ({ url, duration }: IProps): IUseAudio => { | ||
| const [audio] = React.useState(new Audio()); | ||
| const [, _forceUpdate] = React.useState(false); |
|
|
||
| export default ({ url, duration }: IProps): IUseAudio => { | ||
| const [audio] = React.useState(new Audio()); | ||
| const [, _forceUpdate] = React.useState(false); |
There was a problem hiding this comment.
stateが変われば再レンダリングされるっていう仕様を使ってcurrentTimeとかをobserveしてるのね、なるほど
トリッキーな感じがするけどこれが普通なのかな、、
| cx={params.width / 2} | ||
| cy={params.height / 2} | ||
| r={params.radius - 2} | ||
| /> |
|
マージしますー！ |
closed #323
WHAT
やったこと
/hooks/useAudioの作成 (preload="none"対応済み ref: Modify preload=metadata -> preload=none #278 )