今年总体上是心情比较消沉的一年。

工作

年初谈绩效，老板还说需要努力，哪哪做的还不够好，随后就给了提名了晋升，感觉很神奇。随后认真准备了一周多的晋升材料，还在家里给女朋友试讲了几遍，最终如愿通过了晋升。只是晋升后的待遇提升配股跟外界说的数量差距甚大，据说仅有往年的一半。晋升带来的喜悦并没有很大，随之而来的工作压力确是肉眼可见的增大。

有些事情也有了新的认识，比如一件事情要不要做，不在于技术的难度，而在于普惠程度，不要怕别人说这个太简单，就这也好意思拿出来分享。只要做的事情真的能帮助到其他人，这就够了。

投资

今年投资成果还是不错的，当然也是大行情比较好，跟着趋势赚了点小钱。
结果上来看：投资收入占年总收入的 23.2% ，由于今年工作太忙太累导致很多投资操作没有记录，以至于算不出来具体的投资收益率，但保守估计今年收益率应该在50% 以上，

期权的概念

美股顾名思义就是美国交易所进行交易的股票, 那么期权（Option）是什么？

期权（Option）是一种权力，持有期权的人可以在未来的某个时间，以期权约定的价格，来买入或者卖出相应的股票。
这种权力在美股市场上是可以交易的，交易该权利的价格被称作权利金（premium）。

期权的操作

期权的最小交易单位为手，一手是 100 张，对应 100 股相应正股的交易权力。期权分为看涨（Call）和看跌（Put）的期权。

在美股市场上，整个交易机制是完全公平的。你可以买入看涨期权，也可以卖出看涨期权，对应到看跌期权也一样，也就是说对于期权总共有四种操作：

• 买入看涨期权（Long Call
• 卖出看涨期权（Short Call
• 买入看跌期权（Long Put
• 卖出看跌期权（Short Put

同时期权根据约定的价格和目前的股价对比会有价内和价外两种概念，价内是指当前期权具有内在价值，即行权后获利的情况，相对应的价外就是没有价值的期权，废纸一张，对于价外期权一般持有人不会行权。

接下来来结合价内价外来介绍期权的四种情况：

买入看涨期权（Long Call

买入看涨期权，意味着你拥有了在未来某个时间点以期权约定价格买入股票的权力。
现在时间是 2020.11.10 ，微软一股 200$ ，你以 20$ 的价格买入一张 2020.12.10 到期的微软 220$ 的期权，花费为 2000$。到了 12.10 这天，会有两种情况：

1. 价内
   微软涨到了 300$ ，高于期权约定的 220，属于价内期权，你会选择行权，因为有利可图。
   行权就是以期权约定的 220$ 的价格买入 100 股微软的股票，然后转手就可以以现在的市价 300$ 卖掉。

   你的收益为：

   （股票当前价 - 行权价） * 股数 - 期权权利金价格 * 张数 * 100 ： （300 - 220）* 100 - 20 * 100 = 6000

   也就是收入为 6000$ 。

2. 价外

   微软跌倒了 180$, 低于期权约定的 220$ ，此时期权已经没有获利空间了，属于价外期权。
   如果你要行权的话，意味着你要以期权约定的 220$ 的价格买入 100 股微软的股票。然而现在市价才 180$, 买入就是亏，所以此时期权持有人是不会行权的。不行权的话，如果过了期权到期时间，那么你损失的就是 20$ 的期权权利金。

期权交易

当然期权不是说一定要行权才可以获利，期权本身也是可以交易的。

同样拿上面的例子来说，当微软涨到了 300$ , 如果行权的话，是要买入 100 股微软的股票然后卖出才能获利 6000$ ，你需要用 220 * 100 = 22000$ 的资金全部买入微软，但如果没有这么多钱呢？

可以选择直接交易期权，当微软一股 200$ 的时候，2020.12.10 到期的 220$ 的看涨期权卖 20$ ，那么当微软涨到 300$ 的时候，这张期权本身也会涨到至少 300 - 220 = 80$ （期权的价格收到很多因素影响，主要因素为当前的股价和到期时间）。此时你选择不行权，直接卖掉这张期权，那么你的收益为：

忆往昔

想来自己的第一台电脑已经是 2016 年配的了，当时拿了工作以来的第一笔年终奖，差不多两万块大洋，心里很是激动，就给自己配了第一台属于完全自己的台式电脑。当时选用的配置已经很高了，英特尔 i7-6700k 的 CPU 加上华硕 1070 猛禽的显卡，硬盘用的浦科特的 SSD ，这一套配置下来无论是工作还是日常娱乐，都能完全满足我的诉求。

参加工作的前四年，几乎保持着每周都拿出至少三天业余时间来学习工作相关知识的习惯。工作之余，放松的活动除了看电影之外，最喜欢的就是玩各种单机游戏，Steam 库中的游戏也越来越多了。这台电脑都很好的胜任了自己的工作，CPU 性能强劲让我在各种代码编译中不必有多余的等待，次旗舰的显卡也能带我在 1080p 的高特效下体验各种虚拟游戏世界而不会卡顿，就这样一声不吭的伴随我不知多少个日夜。

总之，这台电脑在毕业后前几年无论是生活还是工作中都扮演了很重要的角色，帮助我保持好的心情不断努力并从不知名的小公司进入了网易而后再入职阿里。

然而随着时间的推移，它的性能已不如当年那么优异。虽然在日常代码编译上还没有太大的问题，但在娱乐上，面对体量越来越大，计算越来越复杂的游戏，以及 4K 高清屏带来的压力下，无论是 i7-6700k 的 CPU 还是 1070 的显卡，都逐渐感到有点吃力，一些游戏都只能勉强跑在中低特下，而且还时不时的卡顿，大大影响了游戏体验。影响游戏体验可是一件很大的事情，毕竟影响了游戏体验，就会影响我的心情，影响我的心情就会影响我的工作，影响了我的工作，就会影响我的经济收入。没了经济收入可不行，所以必须对这台老电脑进行升级换代了。

探未来

由于很久没有关注硬件市场了，所以就在 NGA 上逛了一段时间，由于我预算比较充足，所以直接上了一套旗舰配置：

简单开箱

半全家福：

主板 & CPU

本来是想要上 X570 + 3950x 的，但是考虑到没有雷电三接口(虽然手里没有这个设备，但就是想要)，而且还是打游戏的用途更多，所以还是上了 Intel 平台下微星 Z490 Godlike 的主板：

2019 年我的生活有了很多变化。

生活

东北

元旦，也就是 2019 年的第一天，就跟着同事去东北玩了，想想也是神奇。

那天早上同事问我元旦假期要不要去东北玩，我想都没想就答应了，连行程和时间都没问。回想起来可能是那会工作的太压抑了，需要放松一下，所以一听到出去玩，就直接答应了，至于去哪怎么玩都不重要。

现在回想起来，去了哪些地方都已经不太记得了。

印象深刻的就几件事情：

- 和同事以及滴滴司机说服了另一位同事不去冰雪大世界
- 凭着不怕摔的精神，学会了滑雪，说到学滑雪就让我想起来第一次去滑冰的时候，也是凭着这样的精神学会的，虽然摔的很惨，还是挺欣赏自己的勇气的
- 与旅游团的伙伴一起玩黑魔法 & 狼人杀，其乐无穷
- 和团里所有的妹子合了一张影
- 最重要的，认识了现在的女朋友

所以这次东北之行还是收获颇多，这也是第一次主动和同事出去玩。

背景

最近接手公司的一个移动端项目，是通过 Rax 作为 dsl 开发的，在发布的时候构建多分代码，在 APP 端编译为能够运行在 weex 上的代码，在 H5（跑在浏览器或者 webview 里面，不管什么技术我们统称 H5） 端使用降级的 weex

这一套开发体系，看起来很完美，一次开发，三端运行。但是真实在开发的时候，就不是这么完美了。由于毕竟是跑在 weex 上的，而不是浏览器。所以在开发方式上也很难直接从 web 端的开发方式平移过去，为了实现跨端运行，所以在样式上只实现了 Css 的子集， DOM API 也是如此，开发的时候，在浏览器里面调试的时候，一切正常，但是等发布到 APP 端用 weex 跑的时候又是各种问题，开发体验很不流畅。

当然，有人会说那是因为你对 weex 的 api 不了解，也对，一直以来对与这种自己搞一套非标准体系来实现各种魔法功能的东西都不怎么感兴趣 但是如果了解它的成本大于了它带来的收益，那么对我们来说，就没有必要做这件事情。

weex 相对于 H5 ，最大的优点在于交互性能上要更好一点。

而随着手机性能的提升，以及 webview 的不断优化，H5 的页面也越来越流畅了，尤其是纯展示形页面上。而且相较于 H5 ，weex 天生不具备 seo 能力，同时存在分享传播困难的缺点，这样看来，使用 weex 的理由就更少了。而且我们在一个新业务上使用 H5 开发了一个页面，借助同构以及提前缓存的能力，已经把首屏打开速度做到了全球秒开，而且业务数据也达到预期，所以我们打算把现有的存量业务都迁移到 H5 上。

这就是我为什么要把基于 Rax 开发的模块代码转换为 React 代码，也就有了本篇文章。
本文针对的 rax 版本是 0.6.8 ，1.x 的版本改动很大，不再本文讨论范围内。

期望的目标

对于一个 rax 模块，我们期望通过编译后：

1. 能够在 react 下运行
2. 尽可能提取样式到 css 文件里，不使用内联

不同之处

Rax 在开发之处，就是为了能够使用 React 的语法来开发 weex ，所以一开始在语法上和 React 几乎一致。后续随着 rax 的不断迭代，渐渐和 react 有了一些不一样的地方，但是差距不大。
我们对比一下同一个模块在 rax 和 react 的实现代码：

rax module

import { Component, createElement, findDOMNode } from 'rax';
import Text from 'rax-text';
import View from 'rax-view';
import styles from './index.css';

class Kisnows extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
    };
  }

  handleClick = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    const { count } = this.state;
    const { name } = this.props;
    return (
      <View style={styles.wrap}>
        <Text style={[styles.name, { color: 'red' }]}>{name}</Text>
        <View onClick={this.handleClick}>怕什么真理无穷，进一步有进一步的好。</View>
        <View>点击进步：{count}</View>
      </View>
    );
  }
}

export default Kisnows;

react module

import { Component } from 'react';
import { findDOMNode } from 'react-dom';
import styles from './index.css';

class Kisnows extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
    };
  }

  handleClick = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    const { count } = this.state;
    const { name } = this.props;
    return (
      <div className='wrap'>
        <h1 className='name' style={{ color: red }}>
          {name}
        </h1>
        <div onClick={this.handleClick}>怕什么真理无穷，进一步有进一步的好。</div>
        <div>点击进步：{count}</div>
      </div>
    );
  }
}

export default Kisnows;

可以看到他们的区别如下：