阅读 28

AST大法--解析reactjs为原生js

一边享受着react的各种舒畅,一边在一些简单的项目时,你不得不做出取舍,用原生+js模板引擎(预编译的那种)来实现尽量小体积与快速渲染。

那么是否有办法鱼和熊掌都兼得呢。基于这个想法,这里写了个小小的webpack loader,实现把简单的reactjs转成原生js,一方面你可以继续用着你喜欢的react,另一方面可以保持你项目的小体积(不需要引入任何react的库),同时还可以享受高性能(因为是原生js比较精简的逻辑,缓存、执行复杂度都是比较低的)。

安装

npm i p-jsx-loader
复制代码

webpack中配置

// 这只是一个简单实例,请根据自己需要进行调整
module.exports = {
  entry: './index.js',
  mode: "development",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name][hash].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: 'p-jsx-loader'
      }
    ]
  }
}
复制代码

实例

  • 老规矩,第一个例子,先上hello wolrd:
// 源码
export default function (props) {
  return <div>hello world!</div>
}

// 如果是react,@babel/plugin-transform-react-jsx转换后
export default function (props) {
  return React.createElement("div", null, "hello world!");
}

// p-jsx-loader转换后
export default function (props) {
  return '<div>hello world!</div>';
}
复制代码
  • 带变量的例子
// 源码
export default function (props) {
  return <div>{props.name}</div>
}

// 如果是react,@babel/plugin-transform-react-jsx转换后
export default function (props) {
  return React.createElement("div", null, props.name);
}

// p-jsx-loader转换后
export default function (props) {
  return '<div>'+(props.name)+'</div>';
}
复制代码
  • 带逻辑的例子
// 源码
export default function (props) {
  let list = props.list
  if (list.length == 0) {
    return <div>暂无数据</div>
  }
  return list.map(function (item, index) {
    return <div>
      <span>任务{index}</span>
      <span>{item.hasDone ? "已完成" : "未完成"}</span>
    </div>
  }).join('')
}

// 如果是react,@babel/plugin-transform-react-jsx转换后
export default function (props) {
  let list = props.list;

  if (list.length == 0) {
    return React.createElement("div", null, "\u6682\u65E0\u6570\u636E");
  }

  return list.map(function (item, index) {
    return React.createElement("div", null, React.createElement("span", null, "\u5F53\u524D\u5E8F\u53F7\u4E3A\uFF1A", index), React.createElement("span", null, item.hasDone ? "已完成" : "未完成"));
  }).join('');
}

// p-jsx-loader转换后
export default function (props) {
  let list = props.list;

  if (list.length == 0) {
    return "<div>\u6682\u65E0\u6570\u636E</div>";
  }

  return list.map(function (item, index) {
    return "<div><span>\u4EFB\u52A1"+(index)+"</span><span>"+(item.hasDone ? "已完成" : "未完成")+"</span></div>";
  }).join('');
}
复制代码
  • 带事件监听的例子
// 源码
function sayHi (event) {
  let { name } = event.target.dataset
  alert(`Hi,i am ${name}. Nice to meet you!`)
}
export default function (props) {
  return <button data-name={props.name} onClick={sayHi}>say hello</button>
}

// 如果是react,@babel/plugin-transform-react-jsx转换后
function sayHi(event) {
  let {
    name
  } = event.target.dataset;
  alert(`Hi,i am ${name}. Nice to meet you!`);
}

export default function (props) {
  return React.createElement("button", {
    "data-name": props.name,
    onClick: sayHi
  }, "say hello");
}

// p-jsx-loader转换后
function sayHi(event) {
  let {
    name
  } = event.target.dataset;
  alert(`Hi,i am ${name}. Nice to meet you!`);
}

export default function (props) {
  return "<button data-name=\""+(props.name)+"\" onclick=\"window.jsx_loader_event__0sayHi(event)\">say hello</button>";
}
window.jsx_loader_event__0sayHi = sayHi;
复制代码
  • 带组件的例子
// 源码,main.jsx
import Sub from './sub.jsx'

export default function (props) {
  return <div>
    <p>你好</p>
    welcome to:<Sub name={props.name} cls={props.cls} />
  </div>
}
// 源码,sub.jsx
import './index.css'

export default function (props) {
  return <span className={props.cls}>{props.name}</span>
}

// 如果是react,@babel/plugin-transform-react-jsx转换后,main.jsx
import Sub from './sub.jsx';
export default function (props) {
  return React.createElement("div", null, React.createElement("p", null, "\u4F60\u597D"), "welcome to\uFF1A", React.createElement(Sub, {
    name: props.name,
    cls: props.cls
  }));
}
// 如果是react,@babel/plugin-transform-react-jsx转换后,sub.jsx
import './index.css';
export default function (props) {
  return React.createElement("span", {
    className: props.cls
  }, props.name);
}

// p-jsx-loader转换后,main.jsx
import Sub from './sub.jsx';
export default function (props) {
  return "<div><p>\u4F60\u597D</p>welcome to\uFF1A"+(Sub({"name":""+(props.name)+"","cls":""+(props.cls)+""}))+"</div>";
}
// p-jsx-loader转换后,sub.jsx
import './index.css';
export default function (props) {
  return "<span class=\""+(props.cls)+"\">"+(props.name)+"</span>";
}
复制代码

觉得还行的话,请麻烦给我点个赞,感谢!