概要: 関数型プログラミングとオブジェクト指向は、日常のプログラミングでは非常に一般的です。フロントエンド プロジェクトの開発では、オブジェクト指向プログラミングと関数型プログラミングを組み合わせて使用することがよくあります。この記事では、関数型プログラミングとオブジェクト指向プログラミングを比較します。次に、フックの観点から機能コンポーネントを紹介し、次に vue3 の機能プログラミングを紹介します。Java のラムダとストリームの関数型プログラミングもいくつかあります。
1. データ処理方法
1.1 データの格納方法によってアクセス方法が決まります。
1. OO の場合、データ (グローバル変数を除く) にアクセスするには、最初にオブジェクトの参照を取得してから操作を実行する必要があります (直接アクセス - パブリック プロパティ、またはメンバー関数/メソッドを呼び出してアクセス - プライベート プロパティ)
2. 関数型の場合、データへのアクセスは直接アクセス (関数の入力パラメーターまたはスコープ チェーン検索による) です。
//OO
class Foo {
constructor(){
this.bar = 0
}
}
let foo = new Foo()
foo.bar ++
//函数式
let bar = 0
function foo(){
bar ++
}
foo()
コードからわかるように、関数型プログラミングはより簡潔です。関数型プログラミングでデータを呼び出す場合、まずオブジェクトを作成してから操作を考える必要はなく、まず関数の観点から問題を考えます。
関数型プログラミングで。すべてのデータは不変です. さまざまな関数がデータ ストリームを介して情報を交換します. 関数は第一級市民として, データと同じステータスを享受します. それらはパラメータとして次の関数に渡すことができ, また戻り値としても使用できます.
2. 柔軟性とパフォーマンス
2.1 すべてのデータは不変であるため、プログラムの実行中にすべての変数が常に存在し、多くの実行リソースを消費します 2.2
関数型プログラミングの理解が状況を深く理解していないと、大規模なプロジェクトでの関数型プログラミングは困難になります。
2.3 関数型の記述はより柔軟で、よりセマンティックです。
2.4. 関数型プログラミングでは、プログラミングの主な焦点は何をしているのかです。オブジェクト指向プログラミングでは、プログラミングの主な焦点は、それをどのように行うかです。
3. フロントエンドプロジェクトへの適用
3.1 フックの使用
- hook 1.1 の簡単な紹介
React では、関数コンポーネントは状態ではなく props のみを持つことができます。つまり、ステートレス コンポーネントのみを実装できます。React では、関数コンポーネントに状態とライフサイクルを設定するための操作方法がいくつか提供されていないため、当時、関数コンポーネントが適しているシナリオはほとんどありませんでした。
1.2 フックの目的は、クラスを記述せずにステートやその他の React 機能を使用できるようにすることです - フックの意味のフレームワークは
、ビジネスに役立つことです.ビジネスで避けられない問題は、ロジックの再利用、同じ関数、同じコンポーネント、さまざまな場合に、結合を避けるために2回以上書く必要があることです. 、主要なフレームワークはいくつかの解決策を考え出しました:
2.1 mixin react と vue は mixin を使用しました (react は放棄されました)、
2.2 HOC Higher-Order-Components (HOC) は react で比較的多く、vue の場合、ネストされたテンプレートは少し. . 厄介なことに、
2.3 スロットは vue でより多く使用され、react は基本的にスロットの使用を必要としません。
React 公式サイト ケース useState
import React, {
useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {
count} times</p>
<button onClick={
() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
まとめ
1. Function コンポーネントは今後の主要なフレームワークの開発の方向性になる. TS に対する function の自然な親しみやすさも重要な影響を与える. 2.
react hook を使い始めるためのコストは vue よりも難しい. , これは自然にいくつかの反応を回避します 3.
フックは大きなフロントエンドのトレンドでなければなりません.
この部分は参考用です: https://blog.csdn.net/weixin_33929309/article/details/93164243
3.2 vue3 の関数型プログラミング
Vue2 は、mounted、data、computed、watch などのメソッドをオブジェクトのプロパティとしてエクスポートします。
Vue3 では setup というエントリ関数が追加され、value、computed、watch、onMounted などのメソッドはすべて外部からインポートする必要があります。
vue3 では、このコンポーネントの JS ロジック部分をメソッドのように記述し、インポートを使用してオンデマンドで導入できます。これの利点は明白です. 第一に, 書く必要があるコードが少なくて済みます. 第二に, より多くのサブ関数をカプセル化し, コードを維持するためにより多くのパブリック関数を参照できます. 第三に, コードの読みやすさが向上します. . （もちろん、パッケージサイズも小さくなります）
vue2 のコード編成構造
<script>
import ueditor from 'ueditor'
export default {
data () {
return {
ue: null,
ueId: `J_ueditorBox_${
new Date().getTime()}`,
ueContent: '',
dialogVisible: false
}
},
mounted () {
this.ue = ueditor.getEditor(this.ueId, {
// serverUrl: '', // 服务器统一请求接口路径
zIndex: 3000
})
},
methods: {
getContent () {
this.dialogVisible = true
this.ue.ready(() => {
this.ueContent = this.ue.getContent()
})
}
}
}
</script>
vue3 の関数型プログラミング
<script>
import {
value, computed, watch, onMounted } from 'vue'
export default {
setup() {
// reactive state
const count = value(0)
// computed state
const plusOne = computed(() => count.value + 1)
// method
const increment = () => {
count.value++ }
// watch
watch(() => count.value * 2, val => {
console.log(`count * 2 is ${
val}`)
})
// lifecycle
onMounted(() => {
console.log(`mounted`)
})
// expose bindings on render context
return {
count,
plusOne,
increment
}
}
}
</script>
4. Java プロジェクトでの関数型プログラミング
Java プロジェクトでの関数型プログラミングの使用は、フロントエンド プロジェクトでの使用とは大きく異なります。Java で関数型プログラミングを使用すると、コードの量を大幅に削減できますが、最終的な分析では、構造はオブジェクトのいくつかのプロパティまたはメソッドを提供しています。
4.1 以下は、スレッドの単純で古典的なケースの簡単な例です。ラムダ式を拝借し、new Runnable()の処理を省略し、親クラスのrunメソッドを@Overrideなしで直接書き換える
public static void main(String[] args) {
// Java7
new Thread(new Runnable() {
@Override
public void run() {
for (int i = 0; i < 100; i++) {
System.out.println(i);
}
}
}).start();
// Java8
new Thread(() -> {
for (int i = 0; i < 100; i++) {
System.out.println(i);
}
}).start();
}
4.2 ストリームデータの変換など、多くのシナリオで使用されます
// 2.查询所有属性
List<AttrGroupEntity> attrGroupEntities = this.getData();
List<AttrGroupWithAttrsVo> collect = attrGroupEntities.stream().map((item) -> {
// 对原有对象 AttrGroupEntity 处理封装出新的对象 AttrGroupWithAttrsVo
AttrGroupWithAttrsVo attrGroupWithAttrsVo = new AttrGroupWithAttrsVo();
BeanUtils.copyProperties(item,attrGroupWithAttrsVo);
// 查询出属性分组的id然后赋值
List<AttrEntity> relationAttr = attrService.getRelationAttr(item.getAttrGroupId());
attrGroupWithAttrsVo.setAttrs(relationAttr);
return attrGroupWithAttrsVo;
}).collect(Collectors.toList());
V. まとめ
1. 現在のプロジェクトでは、より多くの関数型プログラミングがフロント エンドで具体化され、より多くの OOP アイデアがバック エンドで実現されています。
2.大規模なエンジニアリング指向のプロジェクトでは、オブジェクト指向の方法が使用され、拡張と記述が容易になります。プロジェクト内のいくつかの小さな組織モジュールは、関数型プログラミングを使用して効率を向上させることができます。