reactnative ,rn,react, jsx 一切之入门
JSX
JSX主要是引入了一种新的变量类型, 官方就叫jsx
类型, 或者element
. 这是长得和html差不多的html模板(嗯, Vue比jsx高明的地方就是, vue真的就是html模板,而jsx只是长得像而已)
下面说明两者差异,以及模板内嵌变量的用法
类型|JSX|HTML/vue|比较
--|--
尖括号tag|<></>| |一样的
属性名称|首字母小写的驼峰式|全小写羊肉串式|不一样
模板|< {}>{}</>|跟Vue比,Vue是双花括号{{}}|不一样
除了属性名称写法不同,还有些字母组成也不同
JSX|HTML
--|--
className|class
jsx类型换行的话,需要用小括号()括起来.
下面是个完整演示
const h1Class = 'greeting'
const element = (
<h1 className={h1Class}>
Hello, world!
</h1>
);
const element2 = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
还可以用构造器生成element
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
有三种构造器, React.createClass 、React.createElement、Component的区别
Android
- adb无法启动: 5037端口占用
可以增加一个系统变量ANDROID_ADB_SERVER_PORT
, 值是1~65535重新选个端口, 比如60000
- 使用夜神模拟器?
先要建立好项目并且编译好apk, 建议看官方文档中文翻译
启动后,还是要在夜神中打开开发者模式和USB调试选项.
然后使用adb connect 127.0.0.1:62001
连接到夜神模拟器
将项目下android\app\build\outputs\apk\debugapp-debug.apk
手动安装到夜神模拟器,然后打开
使用adb shell input keyevent 82
打开app中的debug菜单
进入Settings -> Debug server host for device
, 设置为电脑的ip端口,如192.168.0.38:8081
, 8081是默认端口
RN
下面这个例子演示了:
- 所有class都是从Component中extends, 扩展以后就是一个新组件
- 必须有个返回element的render()函数
- 组件默认有个this.props对象, 所有在模板里的属性都是这个对象的key
- 要让界面有变化,必须调用setState来修改this.state对象, 注意这个对象名称也是固定不能修改的,即使你可以一开始给他重新赋值.
import React, { Component } from 'react'; import { Text, View } from 'react-native';
class Blink extends Component {
// 声明state对象
state = { isShowingText: true };
componentDidMount() {
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({
isShowingText: !this.state.isShowingText
});
}, 1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
if (!this.state.isShowingText) {
return null;
}
return (
<Text>{this.props.text}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
python pip豆瓣源命令
用了conda之后,似乎用户目录下指定pip源的pip.ini就失效了...这样pip安装就是个麻烦事儿.
增加了一个bat文件解决这个问题,名字叫pipd.cmd
,内容如下:
pip %* -i https://pypi.doubanio.com/simple/
后面使用跟正常pip差不多:
pipd install pytest
jekyll入门
翻我自己的blog,发现在三年前就搞了Jekyll,后面也有几次断续提到. 既然总是涉及到还是好好学学了.
Jekyll基于ruby/markdown/Liquid. 官网在这儿
安装
- 去Ruby官网下载安装ruby
- 安装后, 包管理工具
gem
应该可以运行. 先替换gem
源:$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ $ gem sources -l https://gems.ruby-china.com # 确保只有 gems.ruby-china.com
- 敲入下面命令做jekyll入门安装:
gem install bundler jekyll jekyll new my-awesome-site cd my-awesome-site bundle exec jekyll serve
- jekyll serve命令将打开
127.0.0.1:4000
端口.不过这个端口很多程序都喜欢占用. 除了将占用程序杀掉, 还可以更换端口,如换到8080
:jekyll serve -P 8080
上面使用Jekyll的
new
命令建立了整套blog, 使用了一个默认的theme. 然而jekyll最本质应用是转换Markdown+Liquid到Html, 所以是几乎可以应用到任何静态html的编写的. 当然其强项还是写blog. 后面教程就说这个.标准项目结构
. ├── _config.yml ├── _data #放yml数据文件, 可以在其他html/md中通过liquid语法引用其中的数据{% site.data.ymlfilename %} │ └── members.yml ├── _drafts #未发布的posts,不会显示。 │ ├── begin-with-the-crazy-ideas.md │ └── on-simplicity-in-technology.md ├── _includes # 放html、md文件, 其中的文件可以在layouts、posts的html和md文件中通过liquid include语法引用并插入{% include 文件名.后缀 %} │ ├── footer.html │ └── header.html ├── _layouts # 放html文件, 可以在posts和其他md/html文件中通过liquid语法设置 layout: xxfilename │ ├── default.html │ └── post.html ├── _posts # 放md文件. 文件名格式需要是下面这种. 内容可使用liquid语法. │ ├── 2007-10-29-why-every-programmer-should-play-nethack.md │ └── 2009-04-26-barcamp-boston-4-roundup.md ├── _sass # 放scss文件. 其中的样式在html中通过link引用, 注意文件目录编译后是/assets/css/, 后缀是编译后的.css <link rel="stylesheet" href="/assets/css/filename.css"> │ ├── _base.scss │ └── _layout.scss ├── _site ├── .jekyll-metadata └── index.html # can also be an 'index.md' with valid front matter
关于theme
theme解压缩后,要运行一次
bundle install
, 然后运行服务bundle exec jekyll serve
就可以了。
关于自定义数据
最好放在_data/somefile.yml
中,而不是放在_config.yml
中。因为前者不需要重启服务,而后者需要重启服务才生效。
如在_data\info.yml
中:
root_path: \pd\
在md文件中可以用{{site.data.info.root_path}}
引用。
在当前页面的前导部分定义的变量如var1
,可以用{{page.var1}}访问。最妙的是,{{page.var1}}可以写在_includes
里面如public.md
,这样, {{page.var1}}就像本地定义的局部变量, 插入的{% include public.md %}
中可以使用这些局部变量,就像是传递了实参一样. 而_data/
中的数据就像是全局变量/常量一样.
jekyll可以尽可能的共用内容, 而不是像普通写文档一样大段的复制粘贴, 并且实时刷新,写起来非常有愉悦感.
Liquid
Liquid官方文档
表达式 {{ }}
语句 {% %}
逻辑运算
大多数和js一样,比较符号:
== != < > <= >= true false
逻辑运算不太一样,分别是and
和or
字符串运算
不是通过函数,而是通过语句:
包含:
{% if product.tags contains "Hello" %}
This product has been tagged with "Hello".
{% endif %}
赋值
注意字符串用双引号
{% assign my_variable = false %}
{% assign my_variable = "foo" %}
{% capture my_variable %}I am being captured.{% endcapture %}
条件转向
{% if customer.name == "kevin" %}
Hey Kevin!
{% elsif customer.name == "anonymous" %}
Hey Anonymous!
{% else %}
Hi Stranger!
{% endif %}
{% unless product.title == "Awesome Shoes" %}
These shoes are not awesome.
{% endunless %}
{% assign handle = "cake" %}
{% case handle %}
{% when "cake" %}
This is a cake
{% when "cookie" %}
This is a cookie
{% else %}
This is not a cake nor a cookie
{% endcase %}
循环
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
更复杂一些的,包括可以使用continue、limit、看官网对iteration的说明
regex编辑
python import
import的天坑,先读读
我在stackoverflow上问了个问题,最终发现必须要在test目录和项目根目录放__init__.py
,src里面可以不放。
包和模块(Package/module)
简单理解,模块就是.py
文件,包就是模块所在的目录。
再python3.3之前,目录中还需要有__init__.py
才能称之为包。在这其中定义模块。在3.3之后提出了隐式命名空间包
的概念,可以不定义__init__.py
。
用法
连引号和目录斜杠都省了
导入下级目录之一的包
me.py中:
from sonFolderName import sonPackageFileName
在me.py的目录中运行python me.py
导入上级
from .. import parentPackge
需要在上上级的grandpaFolder按模块-m
运行:
python -m parentFolder.myFolder.me
如果不按这种方式运行,会报错ImportError: attempted relative import with no known parent package
python单元测试
free commander 显示日期时间格式的修改
默认是dd/mm/yyyy,看起来很不习惯。修改在“工具、设置、查看、文件/文件夹列表、常规”中的“时间戳格式”,改为Windows就和系统一样了。
程序员们不遗余力的简化
再看Jekyll的过程中,忽然发现简化简化再简化才是王道,也是程序员们孜孜不倦追求的王道。
先举两个远一点的例子。
第一个例子是文档编辑格式,在寻找什么才是更好的文档编辑格式的时候,就会发现有DITA(xml格式承载)、reStructText(.rst格式承载)、Markdown(.md格式承载)。上面三种都可以转成html,所以另外还可以再加上html本身。可以看到,在这篇老外写的对比里面,markdown确实是极受欢迎的。 markdown+jekyll也是其推荐首选之一。而DITA的复杂性令人望而却步。
第二个例子是宇宙第一js框架之争。候选是react和vue。vue无数人说其胜在简单。除了使用标准的html、css、js以外,没有引入更多的新语法。而react虽然很强大,但是它引入了jsx这个奇怪的产物。然后就开始在js里面写html……让我想起了在html写php……虽然react极其优秀,然而更多的人们仍然更喜欢更简单的vue。
再说到对文件内容的简化。能列出来好多例子了。
markdown其实就是对html的简化。考虑到markdown里面还可以加入html标签以达成更高的兼容性,就更让大家喜欢了。html长长的标签及其影响阅读体验,才有了markdown用武之地。当然,HTML更强大不是吗,但这无法阻止更简单的markdown对它应用范围的蚕食。
scss是对css的简化和强化。去掉了{}
和分号,改用了缩进,加入了变量和语句。其实,像if、for这种语句就是为了怕麻烦。另外,看来相当多的程序员都不喜欢花括号和分号啊!scss前身sass并不流行,看来简化的时候保持兼容性还是很重要的。
python之所以能有这么大的占有率,可以说他也是去掉了C系语言(C/C++/Java/Javascript)里面的花括号和分号。去掉了变量类型。javascript虽然没有去掉花括号(不知道有没有改型语言去掉它的花括号的),但可以省略分号。当然花括号和分号有一大好处就是可以把代码压缩在一行里面,这个python就不行了。JavaScript开始甚至都没有class,所有都是object,并且给object一系列默认的隐藏的function,让其实现复杂的功能已经class的功能,而表现上及其简单。
yaml是json的简化。虽然其名称更像是html。当然,json是xml的简化,用花括号替代了冗长的标签。yaml又用缩进替代了花括号,用-
替代了方括号。
简化之路无止尽!每一种简化虽然可能损失了很多功能,然而却带来了更多的使用者、更高的效率!这才是发展的方向,而不是做一个大而全晦涩难懂的东西。
大而全的东西必然走向晦涩难懂,因为它要考虑的太多了。比如excel使用率极低的vba,它要考虑自动化,那么必然vba有很高的学习门槛。另外csv是excel不太成功的简化。损失了太多,但也有其生存之地。
css/sass/scss关系
看这个.
简单来说, sass是css的语法简化版,但是和css语法又不兼容. 于是在sass3版本加入了scss, 这个就是和css的语法的兼容版本.
liquid模板语言
jekyll问题集
jekyll serve启动报错 error:permission denied -bind(2) for 127.0.0.1:4000
4000端口被占用
D:\r\jekyllproj\try\my-awesome-site
λ netstat -aon | findstr "4000"
TCP 127.0.0.1:4000 0.0.0.0:0 LISTENING 3112
TCP 127.0.0.1:4000 127.0.0.1:52772 ESTABLISHED 3112
TCP 127.0.0.1:52772 127.0.0.1:4000 ESTABLISHED 32940
最后是PID.在任务管理器的服务
中找到PID, 我这儿发现是foxit的一个服务占用的. 停掉它.再次运行就好了.
jekyll可以转换的语言
包括markdown和liquid
jekyll如何使用liquid
在html最前面加上
---
---
即可
替换ruby gem源/gem用法
替换源
据说淘宝源已经停止维护,现在只有https://gems.ruby-china.com了
$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com
显示安装进度
gem默认不显示安装进度,下载比较大的gem文件的时候就搞不清楚是不是断了,添加--verbose
或者-V
显示详情.
gem install xxx -V
```
在线文档用什么?DITA/reStructedText/Markdown对比
这儿是原文, 2016年写.
到最后, 看来还是用markdown+Jekyll. 另外有个kramdown, 是markdown的扩展, 被github所用. 详见这儿
如何评估一间公司应该做什么不该做什么?
自己的核心产品是应该做的。可以扩大一点产品的的概念:产品除了我们常见的产生价值的有形物品外,把销售能力/服务能力等其他产生价值的虚拟能力也称之为产品。核心产品是公司依靠赚钱生活的产品,或者是在未来想象中依靠赚钱生活的产品。公司的客户建立在核心产品之上的印象凝聚成品牌印象。
一个产品背后都是一串供应链,那么自己的产品中,哪些又是应该自己做,哪些是供应链来做?
那么要看产品的竞争力和供应链的竞争力了。这两个有什么不同?产品竞争力是公司的客户、也就是我们的下游评估的,供应链的竞争力是供应链的客户(包括自己公司在内)评估的。
产品的竞争力
至少包括产品门槛和产品差异化优势。门槛决定能不能卖,差异化决定好不好卖。
在我来看,产品差异化优势是必须自己做的,不自己做也就没有所谓“差异化”可言。
而产品门槛是否自己做,其实可以看供应链的竞争力。
供应链竞争力
供应链的竞争力其实是供应链提供的产品的竞争力。就是看我们能不能从市场上(潜在供应商)那里选购到合适的产品作为我们产品的原料。原料可选择性多、很容易选购到,我们说供应链很成熟;很难选购到,我们说供应链不成熟。
那么怎么算成熟?
- 是否存在符合要求的原料。如果自己的要求很高,那就有可能找不到。反之有可能遍地都是。这时要评估自己的要求是否合理。
- 这样的原料是否大量存在。大量存在则容易选择,不容易导致供应链中断。
- 生产这样原料的公司是否大量存在。大量存在则容易替换,原因是一样的。
- 这个原料是不是在我们产品中占有比较低的成本比例。产品最终要考虑成本,如果成本高,也许是要重新考虑是否自己做了。
- 这个原料采购周期是否足够短。漫长的等待导致对市场需求反应慢,要么库存积压要么库存缺货。
- 这个原料供应链的上游供应链(上上游)是否成熟。上上游不成熟同样会有潜在隐患,供应链始终是一个链条,一环断则环环断。但上上游的影响总之还是相对间接一点。
常见原料对比
- 公版原料与需要设计的原料。前者当然要比后者更成熟。需要设计的原料就是不存在的原料。
- 设计本身。同样因要求不同而不同。高要求使可选择的设计人员变少,价格变高。低要求可选择的多,价格低,结果也可能比公版好不了多少。我认为,如果设计被评估为一种差异化的话,那还是应该尽量自己做。
举例
华为终端
我对华为终端还算比较熟悉。华为很早之前尝试做过终端,一直不成功。包括电话、Modem、小灵通、手机。但终端一直没法成为像运营商产品那样的核心产品。更像是因为有了运营商渠道而搭配着卖的。也不重视品牌,很多都是运营商定制。所以,华为这个时期有很多终端都是外包做的。然而终端中的手机成为未来核心产品的时候,就必须找出差异化来亲力亲为了。
首先是外观。其次是系统。最早的智能手机可能只有外观是差异化,系统都是公版Android。然而自从小米等自制系统越来越受到欢迎后,系统也变成了差异化竞争力之一。再次是主板。这是由外观差异化决定的。
在后期的差异化方面又发生了变化,首先是CPU。高通、联发科CPU虽然符合要求、大量存在,然而供应商就这俩,然后提高下要求到高端的话,就只剩下高通了,CPU成本也不低,所以不能说是太成熟的,值得自己做。并且其中有可以差异化的点,如低功耗之类。虽然这个门槛很高,但作为华为仍然是有实力、或者有魄力去做的。
其次是拍摄效果。这完全是新定义的一个差异化点。摄像头没有能力做,好在供应商还有几个,算法还可以优化,数量还可以自定义。当然,最重要的摄像头不能做的话,导致其实差异化拉不开太大差异,小米努努力,也可以超越。
最后是