こんにちは。フロントエンドエンジニアの藤澤(@f_a24_)です。
前回の記事ではReactに関してざっくりとHTMLを部品(コンポーネント)化するイメージと紹介しましたが、 今回はコンポーネントの機能についてもう少し紹介出来たらと思います。
dsinside.digitalstage.jp
ReactのコンポーネントにはPropsとStateと言う機能があるのですが、
とても重要な機能なので1つずつ紹介していきます。 ReactのコンポーネントはHTMLの属性のように外から値を渡すことが可能です。 また、コンポーネントの子要素もPropsとして扱います。 ReactのコンポーネントはState(状態)と呼ばれる機能を用いることで直接HTMLを変更しなくても、
値だけを変更すればすぐに変更箇所が描画されるような作りになっています。 例として、以下の簡単なカウンターアプリを見てみましょう。 ReactのStateを使用しているのでこういった動作になりますが、試しにReact.useStateの行の部分を
countの値は変わっていますが、変更後の結果が表示されないかと思います。 Reactコンポーネントは基本的にStateを更新することで表示内容を変更していくので、jQueryなどを使用した際によく見るHTMLを直接変更するようなことは原則としてしないのが良いとされています。 基本的にReactコンポーネントのライフサイクルは、 といった形になりますが、その各タイミングで処理を記述することが可能です。 では、先ほどのカウンターアプリで使ってみます。 このように各タイミングで何かしらの処理を行いたい場合やHTMLを直接変更する場合はuseEffectを使用します。 今回はReactコンポーネントの機能について、基本的な部分を紹介しました。PropsとState
Props
この外から渡された値がPropsと呼ばれるものです。function Header(props) {
return <h1>{props.title}</h1>;
}
// Headerをbody直下に描画する
ReactDOM.render(<Header title="タイトル" />, document.querySelector('body'));
function List(props) {
// childrenでli要素を表示
return <ul>{props.children}</ul>;
}
// Listをbody直下に描画する
ReactDOM.render(<List>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</List>, document.querySelector('body'));
State
ADD COUNTボタンを押下してcountを増やすと増えた状態のcountが表示されるかと思います。function Counter() {
const [count, setCount] = React.useState(0); // State(状態)と呼ばれる機能
function addCount() {
setCount(count + 1);
};
return (<div>
<div>{count}</div>
<button onClick={addCount}>ADD COUNT</button>
</div>);
}
// Counterをbody直下に描画する
ReactDOM.render(<Counter />, document.querySelector('body'));
let count = 0;
にしてaddCount関数でcount++;
にしてみてください。
これはReactコンポーネントの特性上、Stateが更新されないとコンポーネントが更新されないのでcountがいくら増えても描画されません。ライフサイクル
しかし、実際にはHTMLを直接変更しなければならない状況になることもあるかと思います。
その際に覚えていてほしいのがライフサイクルになります。
その際に使用するのはuseEffectという機能になりますので、どのような機能か見てみましょう。React.useEffect(function() {
// コンポーネントが描画された時の処理
// Stateが更新されてコンポーネントも更新された時の処理
return function() {
// コンポーネントが消える直前の処理
}
});
// コンポーネントが描画された時だけ何か処理したい場合は第二引数に空の配列を渡します
React.useEffect(function() {
// 処理
}, []);
countが更新されたタイミングでtitleも更新されるようになりました。function Counter() {
const [count, setCount] = React.useState(0); // State(状態)と呼ばれる機能
function addCount() {
setCount(count + 1);
};
React.useEffect(function() {
// titleを更新
document.title = `Count : ${count}`;
});
return (<div>
<div>{count}</div>
<button onClick={addCount}>ADD COUNT</button>
</div>);
}
// Counterをbody直下に描画する
ReactDOM.render(<Counter />, document.querySelector('body'));
まとめ
次回以降の記事では今回紹介した機能を使用して少し実践的なものを作りながら、Reactの魅力を紹介出来たらと思います。