Reactコンポーネントでも親子関係を持つと考えられる
<Parent> <ChildOne /> <ChildTwo> <Baby /> </ChildTwo> </Parent>
props: 親から子へ渡される属性値 ※子コンポーネントで変更できない
state: 子の内部状態 ※親コンポーネントから参照・変更できない
L stateが更新されるとstateを持つコンポーネントが再レンダリングされる
### props
外部から渡される属性値は、propsと呼ぶ
<Component
string="this is string"
number={123}
bool={true}
array={[9,8,7]}
object={{ hello: 'world'}}
func = {a=> a*2}
variable={something}
/>
<button
id="the-button"
className="button is-primary"
onClick={handleClick}
>Button</button>
<label htmlFor="the-id">Label</label>
<input
type="text"
id="email"
arial-labelledby="the-label"
aria-required="true"
/>
### イベント処理
イベントの処理は別に書く
const handleClick = () => {
}
const button = <button onClick={handleClick}>Click me</button>;
### カスタム属性
独自要素には自由にpropsを定義できる
<Component customProp={something} />
<Layout
header={<Header />}
content={<Content />}
footer={<Footer />}
/>
<Panel narrow>...</Panel>
### state
コンポーネント内部でデータを管理したい場合は、useState関数(state)を使う
L useStateは更新されたデータを覚えていて、2回目以降はそちらを使う
function CountButton(){
const countState = React.useState(0);
const count = countState[0]; // 状態
const setCount = countState[1]; // 状態を更新するための関数
const handleClick = () => setCount(count + 1);
return <button onClick={handleClick}>{count}</button>;
}
const root = document.getElementById('root');
ReactDOM.render(<CountButton />, root);
stateによる更新の影響範囲を確認
function Parent(){
const [num, setNum] = React.useState(0);
const handleClick = () => setNum(num + 1);
return(
<>
<p><button onClick={handleClick}>{num}</button></p>
<p><Child num={num} /></p>
<p><Child num={num} /></p>
</>
);
}
function Child({ num }){
const [myNum, setMyNum] = React.useState(0);
const handleClick = () => setMyNum(myNum + 1);
return (
<button className="child" onClick={handleClick}>
{num + myNum}
</button>
);
}
### フック
フックはReactの便利な機能を導入できるヘルパー関数
useStateはフックの一つ
なるほど、propsだけでなくuseStateを使って開発していくのね。
なんとなくイメージが沸きました。
