반응과 각도에서 함수 프로그래밍

프레임 및 라이브러리

ReactJS와 AngularJS(여기서는 AngularJS와 VueJS를 포함하지 않음)는 구글의 최신 트렌드 중 가장 유행하는 라이브러리와 프레임워크입니다.

ReactJS 및 Angular POV의 함수 프로그래밍:

함수식 프로그래밍은 결코 새로운 일이 아니지만 최근에 점점 유행하고 있다. 왜냐하면 이것은 시장에서 두 가지 주류 프레임워크의 핵심이기 때문이다.
면책 성명: 이것은 단지 이 두 도구 중 가장 뚜렷한 함수 프로그래밍의 영향에 대한 간단한 관점일 뿐이다.만약 우리가 계속 깊이 파고든다면, 틀림없이 더 많은 함수식 프로그래밍 방법이 있을 것이다. 우리는 단지 표면에 닿을 뿐이다.

먼저 Redux 원칙이 무엇인지 살펴보겠습니다.

세 가지 원칙
Redux는 다음 세 가지 기본 원칙으로 설명할 수 있습니다.

단일 진리의 출처:
전체 응용 프로그램의 상태는 단일 저장소의 대상 트리에 저장됩니다.

상태는 읽기 전용입니다.
상태를 바꾸는 유일한 방법은 어떤 일이 일어났는지 설명하는 동작을 내는 것이다.

기능 변경 사항:
상태 트리가 조작을 통해 어떻게 변환되는지 지정하기 위해서 우리는 순약간을 작성했다.
https://redux.js.org/introduction/three-principles

반응:

"불변성"을 원칙으로 하고 가변 DOM 공유를 피하는 것은 그 구조와 단방향 데이터 흐름의 동기이다.

불변성'읽기 전용 도구'(구성 요소의 입력 파라미터가 불변성을 부여하고 부작용을 피함)를 사용하면 페이스북의 불변성을 이용하여 불변성 개념을 다시 실시할 수 있다.JS, const 성명은 재분배를 방지할 수 있지만 돌변을 방지할 수 없다는 것을 기억하자.

reactreduxconnect () 함수는 순수한 "curried"one*0

"기억"을 사용하여 구성 요소render () 방법의 결과를 캐시하거나 되돌아오는 기능 구성 요소의 JSX를 간단하게 캐시합니다. 따라서 기억은 클래스와 기능 구성 요소에 응용할 수 있습니다. 클래스 기본 구성 요소로 이루어진 기능은 HOCs와React 연결이 있습니다.setState(previous State:{},props:{})는 상태를 관리하고 상태의 돌변을 피합니다.

React 16.8+ 이후에 React 연결을 사용할 수 있습니다. "use*"몇 개를 포함하여 클래스 기반 구성 요소가 아닌 기능 구성 요소에 기능을 추가할 수 있습니다. 예를 들어

useState(currentState: {}, newState: {}) ) 

React의 개발 가이드는 무상태 구성 요소의 생성을 촉진하기 때문에 구성 요소의 출력은 도구에 달려 있어야 합니다.
'상태 없음'구성 요소는 보기에 매우 순수한 함수처럼 보이지만, 사실은 확실히 이렇다.따라서 우리가 보듯이 React는 대상을 대상으로 하는 실천보다 기능을 위한 실천을 추진*2

React는 단방향 데이터 흐름을 가지지만 양방향 데이터 연결을 실현할 수 있다

<input onChange(props: changed) value(props.name) />

React에서 자주 사용하는 라이프 사이클 방법: render()

// class component
class MyComponent extends Component {
  state = {};

  render() { // pure function
    const { contact } = this.props;
    return (
      <div className="card card-body mb-3" >
        <ul className="list-group">
          <li className="list-group-item">{contact.email}</li>
          <li className="list-group-item">{contact.location}</li>
        </ul>
      </div>
    )
  }
}

React 구성 요소의 생명 주기 중: 렌더링 단계는 순수하고 부작용이 없지만 제출 단계: 실행 부작용.

React는 또한 React 구성 요소의 생명 주기 내에 소량의 기능 대체 기술을 사용하도록 장려한다.더 구체적으로 말하면 정적 getDerivedStateFromProps()를 사용할 때의 설치 프로세스에 대해 설명합니다.

static getDerivedStateFromProps(props, state)

파생 상태는 지루한 코드를 초래하여 구성 요소를 생각하기 어렵게 하고 기능 대체 방안을 제시합니다.
- 도구 변경에 응답하기 위해 부작용 (예: 데이터 가져오기 또는 애니메이션) 을 수행하려면 componentDidUpdate 라이프 사이클을 사용하십시오.
- 도구가 변경될 때만 일부 데이터를 다시 계산하려면 메모리 조수를 사용하십시오.

React is pretty flexible but it has a single strict rule:
All React components must act like pure functions with respect to their props.

각도:

도 단방향 데이터 흐름을 가지고 있다.이것은 [()] 양방향 데이터 연결을 선택할 수 있지만, 응용 프로그램이 증가함에 따라 성능이 문제가 될 수 있고, 데이터 흐름을 추적하는 것이 더 큰 문제가 될 수 있기 때문에 이렇게 하는 것을 권장하지 않는다.

엄격한 불변성: Angular는 설정을 허용합니다.미리 정의된 것이 아니라 onPush().default () 검사 정책 변경 Angular와 계약을 체결하고 있으며, 변경할 수 없는 대상을 처리하도록 요구하고 있습니다. 따라서 Angular는 구성 요소가 입력에만 의존하고 모든 입력은 변경할 수 없다고 명확하게 알려 줍니다.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // OnPush strategy
})
export class AppComponent {
    constructor(){}
}

React처럼 우리도 페이스북의 불변성을 이용하여 불변성의 개념을 다시 실시할 수 있다.JS, "const"성명은 재분배를 방지할 수 있지만 돌변을 방지할 수 없다는 것을 기억하자.

Angular는 순수한 파이프의 결과를 캐시할 수 있는 기회를 제공합니다.사실, 기본적으로 Angular의 모든 파이프는 순수한 파이프입니다.
순수한 파이프는 순수한 함수와 유사합니다. 같은 매개 변수 집합을 사용하면 같은 출력을 생성합니다.이러한 파이프에는 참조 투명도 속성이 있습니다.

RxJS를 사용하는 효용 연산자 라이브러리로 고급 함수를 통해 흐름에 작용한다. 이것은 전체 Angular에서 광범위하게 사용되지만 Angular API는 OOP 사상의 영향을 많이 받고 FP 사상의 영향을 적게 받는다. 그러나 모든 현대 OOP 연구자'Alan Kay'는 "OOP의 본질은 포장과 메시지 전달이다. 따라서 OOP는"가변 상태와 부작용을 공유하는 것을 피하는 또 다른 방법일 뿐"이라고 말했다.

우리는 이미 Angular 응용 프로그램에 RxJS 무효 확장을 묶었다.그들을 포옹하는 힘은 우리가 동작과 복원 같은 특정한 용어를 도입할 필요가 없이 Redux의 원칙을 사용할 수 있게 할 것이다.

우리는 데이터 파이프가 있습니다. 우리는 RxJS 라이브러리에서 제공하는 파이프 가능 조작부호를 사용하여 함수 프로그래밍을 통해 데이터를 생산자에서 소비자로 전환합니다.

import { from } from './rxjs';
import { map } from './rxjs';

const fooValues = [{ n:1, n:2, n:3}]

from(fooValues)
  .pipe(map(({n}) => n)) // data-pipeline
  .subscribe(x => console.log(x));

우리가 이미 언급한 바와 같다.Redux 핵심 계수 원리는 유사합니다.

Redux 및 Context API: 응용 프로그램을 통해서만 데이터를 전달하려면 React의 Context API가 매우 잘 되어 있습니다.
작은 응용 프로그램에서 Redux의 형식주의는 좀 지나쳤을 수도 있다.그러나 우리가 부작용을 겪고 디버깅이 일반적인 임무가 되기 시작했을 때, Redux는 정말 훌륭했다.

Redux는 데이터(Reducer)에 대한 매번 변경 기록을 보존합니다. 기본적으로 시간을 거슬러 오류의 원인을 볼 수 있도록 합니다.
이를 실현하기 위해 불변성을 사용했다.Redux는 응용 프로그램 상태를 간단한 대상으로 구성하고 새 상태로 바꾸어 읽기 전용 상태를 업데이트합니다.

@ngrx/store는 RxJS 흐름으로 각도의 Redux 구현입니다.널리 알려진 RxJS 각도 관찰치를 사용하여 Redux 구조 모델과 원칙을 실현합니다.

만약에 우리가 Angular를 기업급으로 확장한다면: 우리는 Angular, RxJS와 Redux(@ngrx/store*1)를 배울 수 있다. 우리는 실제적으로 관건적인 기능 개념을 만날 수 있다. 이런 개념들은 우리가 학습하는 핵심이다.'순함수','불변성','상태','돌연변이','합성'또는'반응성'이다.우리는 Redux에서 "reducer"(순전불변 함수) 와/또는 "@Effect"(순전치 않은 클래스) 의 "actions"를 터치하는 것을 더 좋아합니다. Angular에서 서비스 클래스를 호출하는 방법이 아니라.

Redux를 사용하는 사상에 따른다. 이 데이터 흐름 모델은React의 구조와 잘 일치하고 특히 Flux 사상으로 설계된 응용 프로그램과 잘 일치한다.

사실상, 단지 그것을 완성하기 위해서, 다른 유행하는 프레임워크, 예를 들어 VueJS, Vuex (Redux와 유사한) 를 사용하여 예측 가능한 방식으로 변이 상태를 사용하는데, 이것은 우리가 명령식으로 상태를 수정할 수 있다는 것을 의미한다.
*0 react-redux.js.org
*1 Redux (@ngrx/store) best practices
*2 So What About Inheritance?
*3 Facebook immutable-js

결론

함수식 프로그래밍은 중요한 학습 추세가 되었다. 이것은 충분한 이유가 있다. 이것은 가장 유행하는 프레임워크의 본질과 구성 요소의 생명 주기에 의존한다.어플리케이션이 엔터프라이즈급으로 업그레이드되기 시작하면 이 점이 더욱 뚜렷해지고, 상호 통신과 상호작용의 구성 요소의 복잡성과 수량은 같은 업데이트와 유일한 데이터에 의존하여 원격 동급 통신을 해야 한다.

진일보한 정보

* Google Trends source
* Faster Angular Applications - Part 2. Pure Pipes, Pure Functions and Memoization

[다음] 함수 프로그래밍 관련 이야기:

감사합니다.

{“Leo Lanese”,
"인심을 격려하는 반응식 솔루션 구축"
"영국 런던".
폴더
http://www.leolanese.com
트위터:
질문/건의/건의?
[email protected]
개발 목표:
블로그:
leolanese.com/blog