이 글의 내용은 Pastate.js의 반응형 반응 상태 관리 프레임워크에 관한 것입니다. 이는 특정 참조 가치가 있습니다. 필요한 친구가 참조할 수 있습니다.
Pastete 소개
Pastate는 무엇입니까?
Pastate는 반응 React입니다. 상태 관리 프레임워크는 상태의 비동기식 응답 관리를 구현합니다. Pastate는 많은 고급 개념을 친숙하게 캡슐화하는 린 프레임워크입니다. 즉, 이해하기 어려운 개념을 배울 필요가 없으며 간단한 애플리케이션에서 Paste를 쉽게 사용할 수 있습니다. 애플리케이션이 점점 복잡해짐에 따라 점차 복잡해지는 시스템 개발 요구 사항을 충족하기 위해 붙여넣기에서 더 많은 기능을 점차적으로 배우고 사용하면 됩니다. 동시에 Pastate는 이전 버전과 호환되는 프로그레시브 프레임워크이기도 합니다. Paste를 사용하여 기존 React 또는 Redux 프로젝트에서 일부 구성 요소를 구현한 다음 점차적으로 전체 프로젝트로 확장할 수 있습니다. Pastate 홈페이지: https://pastate.js.org
Pastate GitHub: https://github.com/BirdLeeSCUT/pastate (별 환영)
간단한 예:
const state = store.state class AppView extends Component { increaseAge(){ state.myInfo.age += 1 } changeName(newName){ state.myInfo.name = newName } render() { ... } }
직접 값을 할당할 수 있습니다. 상태 노드인 페이스트의 반응형 엔진은 뷰를 비동기식으로 업데이트합니다! 이 모드는 네이티브 리액트의 setState 메소드나 네이티브 리덕스의 리듀서 모드보다 훨씬 편리하고 유연합니다!
Features
- 편리하고 사용하기 쉽습니다
: Pastate는 고급 개념을 캡슐화하고, React에 대한 기본 지식만 있으면 쉽게 시작할 수 있습니다
- Responsive State
: 상태를 직접 업데이트할 수 있습니다. js 기본 모드를 사용하는 값,pastate는 응답적으로 관련 뷰를 업데이트합니다
- 유형 팁
:pastate에는 완전한 유형 정의 파일이 있어 intelliSense
- 주문형 렌더링의 도움으로 개발 효율성을 크게 향상시킬 수 있습니다.
:pastate는 상태를 구현합니다. 노드는 요청 시 참조 메커니즘을 추적하고 업데이트하며 뷰는 상태 변경에 효율적으로 응답할 수 있습니다.
- 비동기 업데이트 메커니즘
: 상태를 지속적으로 수정하면 붙여넣기는 효율적으로 다음 작업만 수행합니다. 하나의 비동기 뷰 업데이트
- 친숙한 학습 곡선
:pastate는 플럭스 모드의 고급 개념을 캡슐화하므로 관심이 있을 때만 이러한 개념을 이해하면 됩니다
- redux 프로젝트와 호환 가능
: 쉽게 할 수 있습니다 Pastate를 Redux 프로젝트에 통합하고 컨테이너는 Pastate 모드로 구현됩니다
- TypeScript 지원
: Pastate 자체는 TypeScript를 사용하여 개발되며 완전한 유형 정의 및 일반 지원
- MIT 라이선스 인증
: 다음을 사용할 수 있습니다. 개인 또는 상업용 프로젝트에 무료로 사용하고, 필요에 따라 수정하거나 확장하세요
원리 소개
Pastete라는 이름은 Path State의 약어에서 유래되었습니다. 위치(경로) 정보와 매장 소유권 정보를 추가합니다. 배열 노드의 주문형 재귀 참조 업데이트는 불변 상태 기능을 구현하므로 파스타는 복잡한 상태 트리를 관리하고 효율적인 비동기식 주문형 렌더링을 달성할 수 있습니다. 동시에 Pastate는 ES5의 Object.Assign을 기반으로 상태에 대한 전체 노드 응답 작업 지원을 구현합니다. state.userinfo.name = 'myName'
과 같은 일반 변수처럼 상태를 수정하기만 하면 됩니다. > 이때 Pastate의 반응형 엔진은 관련 뷰를 비동기식으로 효율적으로 자동 업데이트합니다. 자세한 원칙은 원칙 장을 참조하세요.
state.userinfo.name = 'myName'
, 这时 pastate 的响应式引擎会为自动为你异步高效更新相关视图,详细原理请查看原理章节:
灵感来源
Pastate 受启发于 redux 的 immutable state 管理模式和 vue.js 的响应式 state 设计模式;同时融入的精益(lean)设计思想。
可靠性
Pastate 已经通过 160+ 个测试用例的全面测试,稳定可靠。测试用例的具体内容可查看项目源码中的 src/pastate/tests
目录。
欢迎反馈
如果发现 pastate 的 bug 或有任何建议,欢迎提交 issue,感谢大家的反馈。如果你喜欢 pastate, 希望能给个宝贵的 star ^_^
:pastate github 。
快速上手
我们来看看如何用 pastate 构建一个最简单的应用。
安装
Pastate 是一个 react 状态管理框架,需要配合 react 使用。我们先使用 create-react-app 工具创建一个基本的 react 项目,并在这个项目上演示如何使用 pastate:
$ npm install -g create-react-app $ create-react-app my-pastate-app $ cd my-pastate-app
然后,可以用 npm 直接安装 pastate:
$ npm install --save pastate
或使用 yarn 安装:
$ yarn add pastate
开始使用
Pastate 使用起来很简单,我们来创建一个 pastate 组件,显示简单的个人信息。
创建 src/MyPastateApp.jsx
- 신뢰성
Pastate는 160개 이상의 테스트 사례를 통해 완벽하게 테스트되었으며 안정적이고 신뢰할 수 있습니다. 테스트 케이스의 구체적인 내용은 프로젝트 소스 코드의
피드백 환영src/pastate/tests
디렉토리에서 볼 수 있습니다.
^_^
를 주셨으면 좋겠습니다: Pastate github.
빨리 시작하세요붙여넣기를 사용하여 가장 간단한 애플리케이션을 구축하는 방법을 살펴보겠습니다. 🎜🎜Installation🎜🎜Pastate는 React 상태 관리 프레임워크이며 React와 함께 사용해야 합니다. 먼저 create-react-app 도구를 사용하여 기본 반응 프로젝트를 만들고 이 프로젝트에서 Pastate를 사용하는 방법을 보여줍니다. 🎜
import React, { Component } from 'react'; import { Pastore, makeOnlyContainer } from 'pastate'; const store = new Pastore({ name: 'Peter', isBoy: true, age: 10 }) class AppView extends Component { render() { let state = store.state; return ( <p> My name is {state.name}.<br/> I am a {state.isBoy ? "boy" : "girl"}.<br/> I am {state.age} years old.<br/> </p> ) } } export default makeOnlyContainer(AppView, store)🎜 그런 다음 npm을 사용하여 Pastate를 직접 설치할 수 있습니다: 🎜
const store = new Pastore({ name: 'Peter', isBoy: true, age: 10 })🎜 또는 Yarn을 사용하여 설치할 수 있습니다. 🎜
const initState = { name: 'Peter', isBoy: true, age: 10 } const store = new Pastore(initState)🎜사용 시작하기 🎜🎜Pastate는 사용이 매우 간단합니다. 간단한 개인 정보를 표시하는 Pastate 컴포넌트를 만들어 보겠습니다. 🎜🎜
src/MyPastateApp.jsx
파일을 생성하여 구성 요소를 작성합니다. 🎜... export default makeOnlyContainer(App, store)🎜Complete, 이것은 보급형 붙여넣기 구성 요소이며 다음 두 가지 점에서 기본 반응 프로젝트와 다릅니다. 🎜🎜🎜🎜독립 구성 요소의 🎜store🎜🎜🎜🎜
import ReactDOM from 'react-dom'; import container from './MyPastateApp'; ReactDOM.render(container, document.getElementById('root'));🎜Store는 상태 데이터를 저장하고 일련의 상태 관리 엔진과 보기 업데이트 엔진을 포함하는 🎜데이터 센터🎜입니다. 🎜
在初始化 store 时,需要向 Pastore 构造函数里传入一个初始化 state, 我们通常使用以下命名的方式书写, 以便复用这个初始化 state:
const initState = { name: 'Peter', isBoy: true, age: 10 } const store = new Pastore(initState)
对组件和 store 进行连接
对于只有唯一一个 store 的应用,我们使用 pastate 提供的 makeOnlyContainer
把 store 和组件(Component)连接成一个的容器, 这使得组件视图可以响应 store 中 state 的变化:
接着,把该容器(Container)渲染在HTML中即可:
src/MyPastateApp.jsx
... export default makeOnlyContainer(App, store)
src/index.js
import ReactDOM from 'react-dom'; import container from './MyPastateApp'; ReactDOM.render(container, document.getElementById('root'));
注意,makeOnlyContainer
生成的是一个 React Element, 即 <xxx></xxx>
, 因此在 render 时不必再多加一层 <...>。
更新 state 值
接下来我们来尝试更新 state 的值:通过两个按钮来控制 state.age 值的增加和减少。
先在组件中添加两个操作函数
increaseAge
和decreaseAge
// src/MyPastateApp.jsx ... const store = new Pastore(initState) class AppView extends Component { increaseAge(){ store.state.age += 1 } decreaseAge(){ store.state.age -= 1 } render() { ... } } ...
可以看到,使用 pastate 更新 state 非常简便:直接对 state 中需要更新的节点进行赋值即可,与 store 连接的视图会自动更新。
接下来在 JSX 中添加两个按钮来触发这两个操作函数:
src/MyPastateApp.jsx
... render() { let state = store.state; return ( <p> My name is {state.name}.<br/> I am a {state.isBoy ? "boy" : "girl"}.<br/> I am {state.age} years old.<br/> <button onClick={this.decreaseAge}> decrease age </button> <button onClick={this.increaseAge}> increase age </button> </p> ) } ...
Amazing!我们第一个简单的 pastate 应用大功告成:
点击 increaseAge
和 decreaseAge
按钮, 可以看到年龄值的变化。<br>你可以再添加几个按钮来修改 state 中名字和性别,看看视图有没有如你所愿地更新。
Pastate 在 store 中实现了一个响应式和 immutable 特性结合的 state 管理引擎, 我们可以像修改普通变量一样操作 state, 同时 pastate 可以高效地根据 state 的改变对相关视图进行更新。
编辑器智能提示(intelliSense)
我们推荐使用 Visual Studio Code 编辑器开发 react / pastate 应用,它拥有很好的变量类型智能提示功能和其他优秀特性,使得我们可以提高开发效率,并探测减少一些输入性错误。
Tips: vscode 默认关闭了通过 tab 键触发 emmet 的功能, 你可以通过修改设置开启: "emmet.triggerExpansionOnTab": true
。
下面我们简单地使用 jsDoc 注释来使 state 具有类型提示效果:<br>src/MyPastateApp.jsx
... const initState = { name: 'Peter', isBoy: true, age: 10, } const store = new Pastore(initState) /** @type {initState} */ const state = store.state; // 修改点, 把 state 提取成文件级的变量 class AppView extends Component { increaseAge(){ state.age += 1 // 修改点,使用文件级的变量 state,下同 } decreaseAge(){ state.age -= 1 // 修改点 } render() { // 修改点 return ( <p> My name is {state.name}.<br/> I am a {state.isBoy ? "boy" : "girl"}.<br/> I am {state.age} years old.<br/> ... </p> ) } } ...
我们把 store.state 提取为文件级的变量 state,这使得对 state 的使用和修改变得方便。
同时我们在
const state
之前加上类型注释/** @type {initState} */
, 使得编辑器知道 state 的格式,并获得如下的智能提示效果:
智能提示的功能在 state 结构复杂的时候非常实用。
你也可以使用 pastate 提供的 createStore 函数来创建 store, 并自动获取 state 类型定义,具体用法请看API文档,我们现在先使用 new Pastore 的方式创建 store 。如果你使用 Typescript 进行开发,pastate 支持 Typescript 泛型的变量类型传递功能,无需使用 jsdoc 注释。
这里只是简单例子只是涉及到一个 react 组件,在文档中我们会介绍如何构建一个包含多个组件的 pastate 应用。
Pastate 文档
1.快速上手
2.多组件应用
3.数组渲染与操作
4.表单渲染与操作
5.模块化
6.多模块应用
7.规模化
8.原理与API文档
9.其他资源
将持续更新,欢迎关注本专栏 ^_^
<br>
위 내용은 Pastate.js 반응형 반응 상태 관리 프레임워크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

드림위버 CS6
시각적 웹 개발 도구

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
