1.Reactとは
JavaScript フロントエンドフレームワーク
アプリケーションで各状態に対するシンプルな設計をすることで、React はデータが変更された時に、適切なコンポーネントだけを効率的に更新してレンダリングすることができる
自身の状態を管理するカプセル化されたコンポーネントを構築することで、それらのコンポーネントを呼び出し複雑なUI もコンポーネント呼び出しで作成できる
2.Reduxとは
Fluxアーキテクチャの一種
2.1.構成用要素
2.1.1.Reduce
状態を変化させる関数
引数
store 今の状態を示すオブジェクト
action どんな動作を行ったかを示すオブジェクト
ES2015仕様：Spread Operator
const hoge = [2, 3];
console.log(1, ...hoge, 4.5);
// 実行結果 [1,2,3,4,5]
const fuga = { name: 'Taro', age: 25 };
const piyo = { name: 'Jiro', location: 'Tokyo' };
console.log({ ...fuga, ...piyo });
// プロパティがかぶる場合、後のものが優先する
// 実行結果 {name: 'Jiro',age: 25 ,location: 'Tokyo' }
const myFunc = (x, y, z) => [x, y, z];
const age = [0, 1, 2];
mfFunc(...age);
// 実行結果 [0,1,2]
注意点
値渡が基本 オブジェクトや配列は参照渡しとなるため、Object.assignを用いる
onst target = { a: 1, b: 2}
const source = { b: 3, d: 4}
const returnedTarget = Object.assign(target, source);
console.log(target);
console.log(source);
console.log(returnedTarget);
// $ node test.js
// { a: 1, b: 3, d: 4 }
// { b: 3, d: 4 }
// { a: 1, b: 3, d: 4 }
let user = {
username: "John",
};
let user_id = {
id: 1,
};
let email = {
email: "john@example.com",
};
user = Object.assign(user, user_id, email);
console.log(user);
//結果
//{ username: 'John', id: 1, email: 'john@example.com' }
Object.assignを使った例(form)
const form = {
firstName: null,
lastName: null,
Email: null,
zipCode: null,
Address: null,
Phone: null
}
const input = {
firstName: 'John',
lastName: 'Doe',
Email: 'john@example.com'
}
Object.assign(form, input)
console.log(form)
// $ node test.js
// {
// firstName: 'John',
// lastName: 'Doe',
// Email: 'john@example.com',
// zipCode: null,
// Address: null,
// Phone: null
// }
