002-and design-dva.js 知识导图-01JavaScript 语言,React Component

一、概述

参看:https://github.com/dvajs/dva-knowledgemap

react 或 dva 时会不会有这样的疑惑:

  • es6 特性那么多,我需要全部学会吗?
  • react component 有 3 种写法,我需要全部学会吗?
  • reducer 的增删改应该怎么写?
  • 怎么做全局/局部的错误处理?
  • 怎么发异步请求?
  • 怎么处理复杂的异步业务逻辑?
  • 怎么配置路由?

二、JavaScript 语言

2.1、变量声明

const 和 let

不要用 var,而是用 const 和 let,分别表示常量和变量。不同于 var 的函数作用域,const 和 let 都是块级作用域。

const DELAY = 1000;

let count = 0;
count = count + 1;

模板字符串

模板字符串提供了另一种做字符串组合的方法。

const user = ‘world‘;
console.log(`hello ${user}`);  // hello world

// 多行
const content = `
  Hello ${firstName},
  Thanks for ordering ${qty} tickets to ${event}.
`;

默认参数

function logActivity(activity = ‘skiing‘) {
  console.log(activity);
}

logActivity();  // skiing

箭头函数

函数的快捷写法,不需要通过 function 关键字创建函数,并且还可以省略 return 关键字。

同时,箭头函数还会继承当前上下文的 this 关键字。

比如:

[1, 2, 3].map(x => x + 1);  // [2, 3, 4]

等同于:

[1, 2, 3].map((function(x) {
  return x + 1;
}).bind(this));

模块的 Import 和 Export

import 用于引入模块,export 用于导出模块。

比如:

// 引入全部
import dva from ‘dva‘;

// 引入部分
import { connect } from ‘dva‘;
import { Link, Route } from ‘dva/router‘;

// 引入全部并作为 github 对象
import * as github from ‘./services/github‘;

// 导出默认
export default App;
// 部分导出,需 import { App } from ‘./file‘; 引入
export class App extend Component {};

ES6 对象和数组

析构赋值

析构赋值让我们从 Object 或 Array 里取部分数据存为变量。

// 对象
const user = { name: ‘guanguan‘, age: 2 };
const { name, age } = user;
console.log(`${name} : ${age}`);  // guanguan : 2

// 数组
const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo);  // 1

我们也可以析构传入的函数参数。

const add = (state, { payload }) => {
  return state.concat(payload);
};

析构时还可以配 alias,让代码更具有语义。

const add = (state, { payload: todo }) => {
  return state.concat(todo);
};

对象字面量改进

这是析构的反向操作,用于重新组织一个 Object 。

const name = ‘duoduo‘;
const age = 8;

const user = { name, age };  // { name: ‘duoduo‘, age: 8 }

定义对象方法时,还可以省去 function 关键字。

app.model({
  reducers: {
    add() {}  // 等同于 add: function() {}
  },
  effects: {
    *addRemote() {}  // 等同于 addRemote: function*() {}
  },
});

Spread Operator

Spread Operator 即 3 个点 ...,有几种不同的使用方法。

可用于组装数组。

const todos = [‘Learn dva‘];
[...todos, ‘Learn antd‘];  // [‘Learn dva‘, ‘Learn antd‘]

也可用于获取数组的部分项。

const arr = [‘a‘, ‘b‘, ‘c‘];
const [first, ...rest] = arr;
rest;  // [‘b‘, ‘c‘]

// With ignore
const [first, , ...rest] = arr;
rest;  // [‘c‘]

还可收集函数参数为数组。

function directions(first, ...rest) {
  console.log(rest);
}
directions(‘a‘, ‘b‘, ‘c‘);  // [‘b‘, ‘c‘];

代替 apply。

function foo(x, y, z) {}
const args = [1,2,3];

// 下面两句效果相同
foo.apply(null, args);
foo(...args);

对于 Object 而言,用于组合成新的 Object 。(ES2017 stage-2 proposal)

const foo = {
  a: 1,
  b: 2,
};
const bar = {
  b: 3,
  c: 2,
};
const d = 4;

const ret = { ...foo, ...bar, d };  // { a:1, b:3, c:2, d:4 }

此外,在 JSX 中 Spread Operator 还可用于扩展 props,详见 Spread Attributes

Promises

Promise 用于更优雅地处理异步请求。比如发起异步请求:

fetch(‘/api/todos‘)
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));

定义 Promise 。

const delay = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

delay(1000).then(_ => {
  console.log(‘executed‘);
});

Generators

dva 的 effects 是通过 generator 组织的。Generator 返回的是迭代器,通过 yield 关键字实现暂停功能。

这是一个典型的 dva effect,通过 yield 把异步逻辑通过同步的方式组织起来。

app.model({
  namespace: ‘todos‘,
  effects: {
    *addRemote({ payload: todo }, { put, call }) {
      yield call(addTodo, todo);
      yield put({ type: ‘add‘, payload: todo });
    },
  },
});

三、React Component

Stateless Functional Components

React Component 有 3 种定义方式,分别是 React.createClassclass 和 Stateless Functional Component。推荐尽量使用最后一种,保持简洁和无状态。这是函数,不是 Object,没有 this 作用域,是 pure function。

比如定义 App Component 。

function App(props) {
  function handleClick() {
    props.dispatch({ type: ‘app/create‘ });
  }
  return <div onClick={handleClick}>${props.name}</div>
}

等同于:

class App extends React.Component {
  handleClick() {
    this.props.dispatch({ type: ‘app/create‘ });
  }
  render() {
    return <div onClick={this.handleClick.bind(this)}>${this.props.name}</div>
  }
}

JSX

Component 嵌套

类似 HTML,JSX 里可以给组件添加子组件。

<App>
  <Header />
  <MainContent />
  <Footer />
</App>

className

class 是保留词,所以添加样式时,需用 className 代替 class 。

<h1 className="fancy">Hello dva</h1>

JavaScript 表达式

JavaScript 表达式需要用 {} 括起来,会执行并返回结果。

比如:

<h1>{ this.props.title }</h1>

Mapping Arrays to JSX

可以把数组映射为 JSX 元素列表。

<ul>
  { this.props.todos.map((todo, i) => <li key={i}>{todo}</li>) }
</ul>

注释

尽量别用 // 做单行注释。

<h1>
  {/* multiline comment */}
  {/*
    multi
    line
    comment
    */}
  {
    // single line
  }
  Hello
</h1>

Spread Attributes

这是 JSX 从 ECMAScript6 借鉴过来的很有用的特性,用于扩充组件 props 。

比如:

const attrs = {
  href: ‘http://example.org‘,
  target: ‘_blank‘,
};
<a {...attrs}>Hello</a>

等同于

const attrs = {
  href: ‘http://example.org‘,
  target: ‘_blank‘,
};
<a href={attrs.href} target={attrs.target}>Hello</a>

Props

数据处理在 React 中是非常重要的概念之一,分别可以通过 props, state 和 context 来处理数据。而在 dva 应用里,你只需关心 props 。

propTypes

JavaScript 是弱类型语言,所以请尽量声明 propTypes 对 props 进行校验,以减少不必要的问题。

function App(props) {
  return <div>{props.name}</div>;
}
App.propTypes = {
  name: React.PropTypes.string.isRequired,
};

内置的 prop type 有:

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string

往下传数据

往上传数据

CSS Modules

理解 CSS Modules

一张图理解 CSS Modules 的工作原理:

button class 在构建之后会被重命名为 ProductList_button_1FU0u 。button 是 local name,而 ProductList_button_1FU0u 是 global name 。你可以用简短的描述性名字,而不需要关心命名冲突问题。

然后你要做的全部事情就是在 css/less 文件里写 .button {...},并在组件里通过 styles.button 来引用他。

定义全局 CSS

CSS Modules 默认是局部作用域的,想要声明一个全局规则,可用 :global 语法。

比如:

.title {
  color: red;
}
:global(.title) {
  color: green;
}

然后在引用的时候:

<App className={styles.title} /> // red
<App className="title" />        // green

classnames Package

在一些复杂的场景中,一个元素可能对应多个 className,而每个 className 又基于一些条件来决定是否出现。这时,classnames 这个库就非常有用。

import classnames from ‘classnames‘;
const App = (props) => {
  const cls = classnames({
    btn: true,
    btnLarge: props.type === ‘submit‘,
    btnSmall: props.type === ‘edit‘,
  });
  return <div className={ cls } />;
}

这样,传入不同的 type 给 App 组件,就会返回不同的 className 组合:

<App type="submit" /> // btn btnLarge
<App type="edit" />   // btn btnSmall

原文地址:https://www.cnblogs.com/bjlhx/p/9213722.html

时间: 2024-10-09 14:15:09

002-and design-dva.js 知识导图-01JavaScript 语言,React Component的相关文章

003-and design-dva.js 知识导图-01-Reducer,Effect,Subscription,Router,dva配置,工具

一.Reducer reducer 是一个函数,接受 state 和 action,返回老的或新的 state .即:(state, action) => state 增删改 以 todos 为例. app.model({ namespace: 'todos', state: [], reducers: { add(state, { payload: todo }) { return state.concat(todo); }, remove(state, { payload: id }) {

编程随笔-ElasticSearch知识导图(1):全景

1. 由ElasticSearch开始的思考 ??官方介绍Elasticsearch(以下简称ES)是一个基于Apache Lucene(TM)的开源搜索引擎.但我最初了解ES却是从NoSQL数据库开始,在使用.研究了ES一段时间后,我发现这是一个优秀的分布式部署软件,不仅是一个全文搜索引擎.还是一个分布式存储系统.一个分布式数据库.??在ES之前我们习惯使用关系数据库(RDBMS)来进行现实数据世界的建模,将现实世界中的领域模式表示为实体-关系模型(E-R模型).但现实世界的领域本体(Onto

编程随笔-ElasticSearch知识导图(2):分布式架构

1. 集群结构 ??在我们探究ES的分布式架构之前,我们使用一个简单的导图描述一下我们在设计分布式系统时会考虑的问题,如图1所示.??带着图1中的问题我们来探究一下ES集群,ES集群是一个典型的主从结构,从某种意义上来说,符合现今大多数主流分布式存储.分布式计算系统的审美要求.下面我们逐步来了解集群中的这些东东.??先用来自文献2的一张集群结构图开始我们的探究. 1.1 集群节点 ??在ES集群中,一个ES实例就是一个节点(node),图2中显示的是三个节点的一个集群.集群中有一个主节点(mas

js思维导图

用思维导图建立知识的链接和结构

如果只用一种方式了解某样事物,你就不会真正了解它.了解事物真正含义的秘密取决于如何将其与我们所了解的事物相联系.通过联系,你可将想法内化于心,从各种角度看问题,直到找到适合自己的方法.这才是思考的真谛! ——马文·明斯 不要担心你以前没有接触过相关的专业知识,学习起来会很吃力! 其实,学习,是一个将新知识与已经掌握的知识相链接的过程. 思维导图和曼陀罗思维法是最好的帮助我们建立知识链接的工具. \ 思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维

【 D3.js 高级系列 — 10.0 】 思维导图

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有"树形".因此,可以凭借这两种布局来制作思维导图. 1. 构造思路 树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name:

JS高程读书笔记-第一、二章-内附在线思维导图和quizlet卡片

之前在kindle上买了高程,今天又到了纸质的<JavaScript语言精粹>,<高性能JavaScript>,<JavaScipt设计模式>,开始读书之旅啦. 我在思考如何才能高效的理解书中的内容,练习代码肯定是必要的. 同时我想思维导图+quizlet卡片复习是可以尝试的方法,思维导图可以理出清楚的脉络,再将需要记忆的知识点放在卡片中进行记忆. 前两章的思维导图如图,在线交互式的在:https://www.processon.com/view/link/56f35d

你不能混为一谈的思维导图和知识树

每一个分支的内容为总结或简化的课程资料内容.这与企业界的目标树有异曲同工的作用.类似的还有企业的组织结构图.都是这种形式的结构.基本来说,它的组织结构还是没有脱离大纲的方式.在进行知识资料的汇总时,对所学的知识进行学习和了解,当然也可以根据自己的知识树,进行学习计划或日程的安排.只是这方面的应用的案例很少. 关于思维导图和知识树的区别: 第一,他们对于知识的记录内容要求不同.知识树记录的为课程知识或是简化的内容,需要记录大量的文字信息.如果要对一本书作知识树,可以根据书的目录进行制作,然后再把相

深入浅出Node js 读书笔记 思维导图

最近在研究node,发现是很不错的技术~ 考虑到平时看书转换率不高.遂尝试使用思维导图的方式来对一本书进行分析.感觉如果看完之后能够做个思维导图,对整本书的理解都会提高呢~ 下面第一部分介绍思维导图的做法,第二部分为我看深入浅出Nodejs的读书笔记. PART1 如何在阅读时做思维导图: 简单归纳起来,对一本书做思维导图的技巧主要分为两类:准备及应用.在以下各篇中,共有8个阶段.为方便查找起见,各阶段总结如下,都附有推荐的限制时间. 准备: 1.浏览——制作一个中央图象(10分钟) 2.设定时