Redux 대 React Context API 대 AppRun
glitch.com에서 라이브 데모를 볼 수 있습니다: https://apprun-state-2-components.glitch.me
Redux 및 Context API와 비교하여 이해를 돕기 위해 AppRun의 사고 과정을 설명하겠습니다.
HTML
HTML에는 사이트 구조가 있습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>AppRun</title>
</head>
<body>
<div id="root">
<div class="app">
<div class="nav" id="user-avatar">
</div>
<div class="body">
<div class="sidebar">
<div class="user-stats" id="user-stats">
</div>
</div>
<div class="content">main content here</div>
</div>
</div>
</div>
<script src="main.tsx"></script>
</body>
</html>
우리는 주로 HTML을 사용하고 구성 요소 구조가 필요하지 않음을 알 수 있습니다.
// No need
<App>
<Nav>
<UserAvatar />
</Nav>
<Body>
<Sidebar>
<UserStats />
</Sidebar>
</Body>
</App>
우리는 구성 요소 구조에 강제로 들어가지 않기 때문에 HTML을 활용하고 구성 요소를 HTML 요소에 마운트합니다.
주요 프로그램
AppRun 애플리케이션에서 컴포넌트를 HTML 요소에 마운트합니다.
import './style.css';
import app from 'apprun';
import UserAvatar from './UserAvatar';
import UserStats from './UserStats';
new UserAvatar().mount('user-avatar');
new UserStats().mount('user-stats');
app.run('/set-user', {
avatar: "https://github.com/yysun/apprun/blob/master/logo.png?raw=true",
name: "AppRun",
followers: 1234,
following: 123
});
및 두 가지 구성 요소만 필요합니다. id가 각각 'user-avatar'와 'user-stats'인 요소에 마운트합니다.
그런 다음 사용자 데이터를 이벤트 매개변수로 사용하여 AppRun 이벤트 '/set-user'를 게시합니다.
구성 요소
구성 요소는 AppRun 이벤트를 구독하고 처리합니다. 이벤트 매개변수에서 사용자 데이터를 가져오고 새 구성 요소 상태를 만듭니다. 그런 다음 AppRun은 새 상태로 보기 함수를 호출합니다. view 함수는 JSX를 사용하여 Virtual DOM을 생성합니다. 그런 다음 AppRun은 DOM을 렌더링합니다.
UserAvatar 구성 요소
UserAvatar 구성 요소는 아바타 이미지를 표시합니다. 상태는 아바타 URL입니다.
import app, {Component} from 'apprun';
export default class extends Component {
state = '';
view = (state) => <img className="user-avatar small" alt="user avatar" src={state} />;
update = {
'/set-user': (_, user) => user.avatar,
}
}
UserStats 컴포넌트
UserStats 구성 요소는 사용자의 아바타 이미지, 이름 및 기타 정보를 표시합니다. 상태는 사용자 개체입니다.
import app, {Component} from 'apprun';
export default class extends Component {
state = {} ;
view = (user) => <>
<div>
<img className="user-avatar " alt="user avatar" src={user.avatar}/>
{user.name}
</div>
<div className="stats">
<div>{user.followers} Followers</div>
<div>Following {user.following}</div>
</div>
</>;
update = {
'/set-user': (_, user) => user,
}
}
AppRun은 JSX fragment . 루트 요소 없이 요소 목록을 만들어 그룹화할 수 있습니다. 요소 목록은 구성 요소가 마운트된 요소에 삽입됩니다. 그것은 우리가 미세 조정하고 완벽한 HTML 구조를 얻는 데 도움이 됩니다.
그게 다야.
결론
두 가지로 인해 AppRun 응용 프로그램이 더 쉽고 간단해졌습니다. 하나는 구성 요소를 요소에 마운트할 수 있다는 것입니다. 두 번째는 이벤트를 사용하여 데이터를 전달하고 구성 요소 상태 업데이트 및 DOM 렌더링을 포함한 일련의 프로세스를 트리거한다는 것입니다.
glitch.com에서 예제를 리믹스할 수 있습니다. https://glitch.com/edit/#!/remix/apprun-state-2-components
AppRun에 대한 자세한 내용은 다음을 방문하십시오.
이순
/
앱런
AppRun은 elm에서 영감을 받은 아키텍처, 이벤트 및 구성 요소를 사용하여 고성능의 안정적인 웹 애플리케이션을 개발하기 위한 JavaScript 라이브러리입니다.
앱런
AppRun은 Elm에서 영감을 받은 아키텍처, 이벤트 및 구성 요소를 사용하여 안정적인 고성능 웹 애플리케이션을 구축하기 위한 JavaScript 라이브러리입니다.
AppRun is an MIT-licensed open source project. Please consider supporting the project on Patreon. 👍 ❤️ 🙏
AppRun 혜택
적은 코드 작성 학습할 독점 구문이 없음 컴파일러/변환기는 선택 사항입니다 . 상태 관리 및 라우팅 포함 jQuery, chartjs, D3, lit-html과 나란히 실행...
AppRun은 npm에 배포됩니다.
npm install apprun
unpkg.com CDN에서 직접 AppRun을 로드할 수도 있습니다.
<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
또는 unpkg.com에서 ES 모듈로 사용하십시오.
<script type="module">
import { app, Component } from 'https://unpkg.com/apprun/esm/apprun-html?module'
</script>
아키텍처 개념
AppRun 아키텍처에는 상태, 보기 및 업데이트가 있습니다. AppRun은 이벤트 기반입니다. AppRun은 Component 기반입니다.
Try the AppRun Playground .
Apress의 AppRun Book
Order from Amazon
AppRun 만들기
…
View on GitHub
즐겁게 코딩하고 PR을 보내세요.
Reference
이 문제에 관하여(Redux 대 React Context API 대 AppRun), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/yysun/redux-vs-the-react-context-api-vs-apprun-2knm
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>AppRun</title>
</head>
<body>
<div id="root">
<div class="app">
<div class="nav" id="user-avatar">
</div>
<div class="body">
<div class="sidebar">
<div class="user-stats" id="user-stats">
</div>
</div>
<div class="content">main content here</div>
</div>
</div>
</div>
<script src="main.tsx"></script>
</body>
</html>
// No need
<App>
<Nav>
<UserAvatar />
</Nav>
<Body>
<Sidebar>
<UserStats />
</Sidebar>
</Body>
</App>
AppRun 애플리케이션에서 컴포넌트를 HTML 요소에 마운트합니다.
import './style.css';
import app from 'apprun';
import UserAvatar from './UserAvatar';
import UserStats from './UserStats';
new UserAvatar().mount('user-avatar');
new UserStats().mount('user-stats');
app.run('/set-user', {
avatar: "https://github.com/yysun/apprun/blob/master/logo.png?raw=true",
name: "AppRun",
followers: 1234,
following: 123
});
요소에 마운트합니다.
그런 다음 사용자 데이터를 이벤트 매개변수로 사용하여 AppRun 이벤트 '/set-user'를 게시합니다.
구성 요소
적은 코드 작성 학습할 독점 구문이 없음 컴파일러/변환기는 선택 사항입니다 . 상태 관리 및 라우팅 포함 jQuery, chartjs, D3, lit-html과 나란히 실행...
AppRun은 npm에 배포됩니다.
unpkg.com CDN에서 직접 AppRun을 로드할 수도 있습니다.
또는 unpkg.com에서 ES 모듈로 사용하십시오.
AppRun 아키텍처에는 상태, 보기 및 업데이트가 있습니다. AppRun은 이벤트 기반입니다. AppRun은 Component 기반입니다.
Try the AppRun Playground .
Order from Amazon
View on GitHub
즐겁게 코딩하고 PR을 보내세요.
그런 다음 사용자 데이터를 이벤트 매개변수로 사용하여 AppRun 이벤트 '/set-user'를 게시합니다.
구성 요소
구성 요소는 AppRun 이벤트를 구독하고 처리합니다. 이벤트 매개변수에서 사용자 데이터를 가져오고 새 구성 요소 상태를 만듭니다. 그런 다음 AppRun은 새 상태로 보기 함수를 호출합니다. view 함수는 JSX를 사용하여 Virtual DOM을 생성합니다. 그런 다음 AppRun은 DOM을 렌더링합니다.
UserAvatar 구성 요소
UserAvatar 구성 요소는 아바타 이미지를 표시합니다. 상태는 아바타 URL입니다.
import app, {Component} from 'apprun';
export default class extends Component {
state = '';
view = (state) => <img className="user-avatar small" alt="user avatar" src={state} />;
update = {
'/set-user': (_, user) => user.avatar,
}
}
UserStats 컴포넌트
UserStats 구성 요소는 사용자의 아바타 이미지, 이름 및 기타 정보를 표시합니다. 상태는 사용자 개체입니다.
import app, {Component} from 'apprun';
export default class extends Component {
state = {} ;
view = (user) => <>
<div>
<img className="user-avatar " alt="user avatar" src={user.avatar}/>
{user.name}
</div>
<div className="stats">
<div>{user.followers} Followers</div>
<div>Following {user.following}</div>
</div>
</>;
update = {
'/set-user': (_, user) => user,
}
}
AppRun은 JSX fragment . 루트 요소 없이 요소 목록을 만들어 그룹화할 수 있습니다. 요소 목록은 구성 요소가 마운트된 요소에 삽입됩니다. 그것은 우리가 미세 조정하고 완벽한 HTML 구조를 얻는 데 도움이 됩니다.
그게 다야.
결론
두 가지로 인해 AppRun 응용 프로그램이 더 쉽고 간단해졌습니다. 하나는 구성 요소를 요소에 마운트할 수 있다는 것입니다. 두 번째는 이벤트를 사용하여 데이터를 전달하고 구성 요소 상태 업데이트 및 DOM 렌더링을 포함한 일련의 프로세스를 트리거한다는 것입니다.
glitch.com에서 예제를 리믹스할 수 있습니다. https://glitch.com/edit/#!/remix/apprun-state-2-components
AppRun에 대한 자세한 내용은 다음을 방문하십시오.
이순
/
앱런
AppRun은 elm에서 영감을 받은 아키텍처, 이벤트 및 구성 요소를 사용하여 고성능의 안정적인 웹 애플리케이션을 개발하기 위한 JavaScript 라이브러리입니다.
앱런
AppRun은 Elm에서 영감을 받은 아키텍처, 이벤트 및 구성 요소를 사용하여 안정적인 고성능 웹 애플리케이션을 구축하기 위한 JavaScript 라이브러리입니다.
AppRun is an MIT-licensed open source project. Please consider supporting the project on Patreon. 👍 ❤️ 🙏
AppRun 혜택
import app, {Component} from 'apprun';
export default class extends Component {
state = '';
view = (state) => <img className="user-avatar small" alt="user avatar" src={state} />;
update = {
'/set-user': (_, user) => user.avatar,
}
}
import app, {Component} from 'apprun';
export default class extends Component {
state = {} ;
view = (user) => <>
<div>
<img className="user-avatar " alt="user avatar" src={user.avatar}/>
{user.name}
</div>
<div className="stats">
<div>{user.followers} Followers</div>
<div>Following {user.following}</div>
</div>
</>;
update = {
'/set-user': (_, user) => user,
}
}
두 가지로 인해 AppRun 응용 프로그램이 더 쉽고 간단해졌습니다. 하나는 구성 요소를 요소에 마운트할 수 있다는 것입니다. 두 번째는 이벤트를 사용하여 데이터를 전달하고 구성 요소 상태 업데이트 및 DOM 렌더링을 포함한 일련의 프로세스를 트리거한다는 것입니다.
glitch.com에서 예제를 리믹스할 수 있습니다. https://glitch.com/edit/#!/remix/apprun-state-2-components
AppRun에 대한 자세한 내용은 다음을 방문하십시오.
이순 / 앱런
AppRun은 elm에서 영감을 받은 아키텍처, 이벤트 및 구성 요소를 사용하여 고성능의 안정적인 웹 애플리케이션을 개발하기 위한 JavaScript 라이브러리입니다.
앱런
AppRun은 Elm에서 영감을 받은 아키텍처, 이벤트 및 구성 요소를 사용하여 안정적인 고성능 웹 애플리케이션을 구축하기 위한 JavaScript 라이브러리입니다.
AppRun is an MIT-licensed open source project. Please consider supporting the project on Patreon. 👍 ❤️ 🙏
AppRun 혜택
AppRun is an MIT-licensed open source project. Please consider supporting the project on Patreon.
AppRun은 npm에 배포됩니다.
npm install apprun
unpkg.com CDN에서 직접 AppRun을 로드할 수도 있습니다.
<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
또는 unpkg.com에서 ES 모듈로 사용하십시오.
<script type="module"> import { app, Component } from 'https://unpkg.com/apprun/esm/apprun-html?module' </script>
아키텍처 개념
Try the AppRun Playground .
Apress의 AppRun Book
AppRun 만들기
…View on GitHub
즐겁게 코딩하고 PR을 보내세요.
Reference
이 문제에 관하여(Redux 대 React Context API 대 AppRun), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yysun/redux-vs-the-react-context-api-vs-apprun-2knm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
