React + TypeScript + Mobx + AntDesignMobile 모 바 일 모 바 일 프로젝트 구축
본 고 는 React + TypeScript + Mobx + AntDesignMobile 기술 창 고 를 바탕 으로 Create - React - app 비 계 를 이용 하여 모 바 일 엔 드 프로젝트 를 구축 하고 프로젝트 구축 과정 과 관련 설정, 그리고 상태 관리 도구 인 Mobx 의 사용 을 소개 하 며 마지막 으로 버튼 숫자 + 1 과 간단 한 TodoList 작은 기능 을 실현 하여 여러분 에 게 도움 이 되 기 를 바 랍 니 다.GitHub 코드 주소
프로젝트 구축 구체 적 인 절차:
npm install create-react-app -g create-react-app my-app --typescript 주의: 만약 에 학생 들 이 type: script 공식 문 서 를 참고 하여 react 프로젝트 를 만 들 었 다 면 그 안에 create-react-app my-app --scripts-version=react-scripts-ts 명령 으로 만 들 었 습 니 다. 절대 사용 하지 마 세 요. 지금 은 시간 이 지 났 습 니 다. webpack 버 전에 문제 가 있 습 니 다. 생각 지도 못 한 구덩이 TypeScript 중국어 홈 페이지 이 단계 홈 페이지 에 상세 한 소개 가 있 습 니 다. 저 는 설정 과정 을 일일이 열거 하지 않 겠 습 니 다. eject 가 모든 내장 설정 을 노출 하지 않 는 것 을 권장 합 니 다. 후속 버 전 업그레이드 유지 가 귀 찮 을 수 있 습 니 다. react - app - rewired 플러그 인 을 사용 하면 설정 할 수 있 습 니 다.AntDesignMobile 홈 페이지
npm install history @types/history react-router-dom @types/react-router-dom // react
npm install mobx-react mobx // mobx
npm install node-sass // sass , sass,
npm run start Mobx 는 기능 이 강하 고 대상 을 대상 으로 프로 그래 밍 하 는 방식 을 바탕 으로 하 는 상태 관리 도구 로 상대 적 으로 쉽다.Redux 의 작가 도 이 를 추천 한 적 이 있 습 니 다. TypeScript 에 대한 지원 이 비교적 우호 적 입 니 다. 홈 페이지 의 흐름 도 를 참고 하 십시오. Mobx 중국어 홈 페이지
다음은 Mobx 핵심 개념 몇 가 지 를 소개 합 니 다.
Observable state (관찰 가능 한 상태)
MobX 는 기 존의 데이터 구조 (예 를 들 어 대상, 배열, 클래스 인 스 턴 스) 에 관찰 가능 한 기능 을 추가 했다.@ observable 장식 기 (ES. Next) 를 사용 하여 클래스 속성 에 주 해 를 추가 하면 이 모든 것 을 간단하게 완성 할 수 있 습 니 다.
import { observable } from "mobx";
class Todo {
id = Math.random();
@observable title = "";
@observable finished = false;
}계 산 된 값 (계산 값)
MobX 를 사용 하면 관련 데이터 가 변 했 을 때 자동 으로 업데이트 되 는 값 을 정의 할 수 있 습 니 다.@ computed 인 테 리 어 나 Observable 을 사용 할 때 사용 하 는 getter / setter 함 수 를 통 해 사용 합 니 다. 아래 코드 에서 quue 나 refresh 가 변 할 때 MobX 는 데이터 변 화 를 감청 하여 컴퓨터 를 통 해 fooProps 방법 을 자동 으로 업데이트 합 니 다.
import React from 'react';
import {observable, isArrayLike, computed, action, autorun, when, reaction,runInAction} from "mobx";
import {observer} from 'mobx-react';
// Store
class Store {
@observable queue:number = 1;
@action refresh = ():void => {
this.queue += 1;
console.log('this.queue -> ', this.queue);
}
@computed get fooProps():any {
return {
queue: this.queue,
refresh: this.refresh
};
}
}동작 (동작)
모든 응용 에는 동작 이 있다.동작 은 상 태 를 수정 하 는 데 사용 되 는 모든 것 입 니 다. mobx 는 관측 변 수 를 수정 하 는 행 위 를 action 에 두 는 것 을 추천 합 니 다.action 은 실행 중인 함수 에 만 영향 을 줄 수 있 고 현재 함수 호출 의 비동기 작업 에 영향 을 줄 수 없습니다. 공식 문서 의 용법 을 참고 하 십시오.
action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}
action / javascript 。 ，action.bound 。 ， action ，(@)action.bound name ， 。
class Ticker {
@observable tick = 0
@action.bound
increment() {
this.tick++ // 'this'
}
}
const ticker = new Ticker()
setInterval(ticker.increment, 1000)Mobx 를 상태 관리 로 하여 두 가지 작은 기능 을 실현 합 니 다.
버튼 클릭 + 1
import React from 'react';
import {observable, isArrayLike, computed, action, autorun, when, reaction,runInAction} from "mobx";
import {observer} from 'mobx-react';
import {Button} from 'antd-mobile';
import './index.scss';
// Store, Mobx
class Store {
@observable queue:number = 1;
@action refresh = ():void => {
this.queue += 1;
console.log('this.queue -> ', this.queue);
}
@computed get fooProps():any {
return {
queue: this.queue,
refresh: this.refresh
};
}
}
// ts ,
interface BarProps{
queue :number
}
// @observer ,Bar Foo queue
@observer
class Bar extends React.Component{
render() {
const {queue} = this.props
return (
{queue}
)
}
}
interface FooProps {
queue: number,
refresh():void
}
// Foo Add store
@observer
class Foo extends React.Component{
render() {
const {queue,refresh} = this.props;
return (
)
}
}
// store , Foo
const store = new Store();
class Add extends React.Component{
render() {
return (
hello react-ts-mobx
)
}
}
export default observer(Add) TodoList 기능
import React from 'react';
import {observable, isArrayLike, computed, action, autorun, when, reaction,runInAction} from "mobx";
import {observer} from 'mobx-react';
import './index.scss';
// Todo
class Todo {
id:number = new Date().getTime();
title:string = '';
finished:boolean = false;
constructor(title:string) {
this.title = title;
}
}
// Store
class Store {
@observable title:string = '';
@observable todos:Todo[] =[];
// Todo Title
@action createTitle (e:any) {
console.log('e',e.target.value);
this.title = e.target.value;
}
// Todo
@action createTodo = () => {
this.todos.unshift(new Todo(this.title));
this.title = '';
}
// Todo
@action delTodo (id:number) {
this.todos.forEach((item,index) => {
if (item.id === id) {
this.todos.splice(index,1)
}
})
}
// todos ,
@computed get unfinished () {
return this.todos.filter(todo => !todo.finished).length;
}
}
interface TodoItemProps {
todo:any;
store:any;
}
// Todo
@observer
class TodoItem extends React.Component {
render() {
const {todo,store} = this.props
return (
{todo.title}
store.delTodo(todo.id)}>X
)
}
}
const store = new Store();
@observer
class TodoList extends React.Component {
render() {
return (
TodoList
store.createTitle(e)} />
{store.todos.map((todo)=>{
return -
})}
)
}
}
export default TodoList 요약:
저 는 TypeScript 와 Mobx 를 접 한 지 얼마 되 지 않 아 학습 방법 을 정리 합 니 다. 먼저 기본 적 인 개념 을 익 힌 후에 작은 기능 을 천천히 해 야 합 니 다. 문제 에 부 딪 혀 진지 하 게 생각 한 후에 자 료 를 찾 거나 다른 사람 에 게 물 어보 고 문 서 를 반복 적 으로 보 며 지식 에 대한 이 해 를 강화 해 야 합 니 다.사내 들 의 댓 글 교 류 를 환영 합 니 다.GitHub 코드 주소
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
