前言

写这篇文章的主要目标是让初学者更快的上手 React 的项目开发,能有一个循循渐进的理解过程。需要有一定的 JavaScript 基础和 NPM 的使用经验。不多说了,下面会按这个顺序进行介绍:

  1. React 如何编写 Hello World!
  2. React 中三个最基础、最重要的东西
  3. React 中的 JSX
  4. 你的第一个 Web 组件
  5. React 中最开始需要关注的生命周期
  6. React 一个组件集合的简单交互
  7. React 开始一个项目的一点建议
  8. React 简单的项目结构组织

- 阅读剩余部分 -

一、前言

模式是一种规律或者说有效的方法,所以掌握某一种实践总结出来的模式是快速学习和积累的较好方法,模式的对错需要自己去把握,但是只有量的积累才会发生质的改变,多思考总是好的。(下面的代码实例更多是 React 类似的伪代码,不一定能够执行,函数类似的玩意更容易简单描述问题)

- 阅读剩余部分 -

变量名的组成:

  1. 首字母 [a-zA-Z0-9_]
  2. 不能包含空格,能够使用下划线代替
  3. 不能使用关键字

变量的使用:

#define
url="https://www.so.com"

#readonly, 只读的不能修改
#如果修改:line <number>: url: readonly variable
readonly url

#销毁变量
unset url

#变量引用
echo "enter: $url"
echo "enter: ${url}"
#{} 主要用于确定变量的边界, 下面表示 $url, 而非 $url_site
echo "enter: ${url}_site"
#{} 边界在 $ 连续编写的时候不用,不过不推荐
#如果这样写的拖出去吧...
url1="url1"
url2="url2"
url3="url3"
echo $url1$url2$url3

变量的类型

  1. 局部变量,脚本当前作用域
  2. 环境变量,shell 具备访问环境变量的能力
  3. shell 变量,自己提供的,可以包括(1, 2)

shell 的特殊变量

这里主要是写点例子熟悉一下就行了。

echo "args length: $#"
echo "args length: ${#}"
for arg in $*;
  do
    echo "arg is: ${arg}"
  done

echo "----------------"

for var in "$*";
  do
    echo $var
  done

for var in "$@";
  do
    echo $var
  done
#执行
sh ./demo.sh 1 2 3
#输出
args length: 3
args length: 3
arg is: 1
arg is: 2
arg is: 3
----------------
1 2 3
1
2
3

例子中主要注意 $*$@ 的区别,区别在于用 "" 包裹的时候,其余情况一致,可以运行了试试。

其余的看一个表,$? 暂时不用管。

变量含义
$0当前脚本的文件名, 这里指执行的文件,比如 ./demo.sh => ./demo.sh
$n传入的参数,从 1 开始,一次类推,$* 能够访问所有的参数
$#参数的个数,length => 也是从 1 开始计数
$*所有参数
$@所有参数,区别见例子
$$当前进程的 pid
$?上次退出状态的返回值,也可以作为函数返回值

一、前言

其实对于软件开发模式来说,Angular 有着整套的一条龙服务,而 React 只是单纯的解决 View 层的问题,如果只是使用 React 开发项目会或多或少有点麻烦。下面主要讨论下数据层的东西,之前出了一个 mobx 来解决这个问题,但是这里想换个思路套用一下。其实 mobx 主要是声明了 @action, @computed, @observable 等元素来做到将 Store 作为一个可监控的源头,自动做到 VM 的效果,下面我也是,不过我采用 Rx 来做这个事情,简单利用下这种思想,能不能不污染我的原始数据(因为如果是双向的一种数据结构,那么就会被包装成监听类型的数据结构),这样我们调试的时候依然看到的是清晰的数据,并且还可以解决最初 Flux 库的一些麻烦,经过 Rx 改造的结果,可能比 mobx 的可测试性更好一些,具体就不说了,先谈 DEMO。

如果不想看文章的可以直接看代码 GitHub

- 阅读剩余部分 -